jssdk 在history模式下安卓不能调用图片上传接口和分享接口

首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。

配置

先上配置???

// index.js
const protocol = location.protocol + '//' + location.host;
router.afterEach((to, from) => {
  if(!store.state.weChatUrl) {
    store.commit('m_weChatUrl', document.URL);
  }
  let url = protocol + to.fullPath.split('#')[0];
  store.dispatch('a_wxConfig', url);// 每个页面都调用微信授权配置
});
// action.js
if(window.__wxjs_is_wkwebview === true) {
  urlType = 0;
} else {
  urlType = 1;
}
$get(...).then(item => {
 config = JSON.parse(item);
 $wechat.config(config);
 $wechat.ready(function () {})
})
// 注：$wechat是我在webpack external暴露的wx接口

这份配置主要是根据vue微信公众号开发踩坑记录（2)配置而来。

遇到的问题：

• 上传图片、分享朋友自定义内容在ios上面可以，安卓不可以

有些很有趣的现象：

• ios的可以，有些安卓可以，有些安卓不行
• 在安卓上面有些页面的上传图片可以，有些页面的上传图片不可以
• 在本地用测试公众号可以，用正式公众号大部分时间不行
• 不行的时候，微信debug模式的结果基本都是：config ok,CheckJsApi: permission Denied

正是这些现象把我带偏了半个地球，好不容易才试出来问题的所在。

秀一波我曾经怀疑过的问题：

• jssdk cdn加载可能不成功（用本地版测试过）
• 是不是写死cdn 的协议头http导致的（使用location.protocol测试过）
• 是不是签名路径的问题，难道低版本的安卓跟ios一样也是要用第一次进去页面的url的呢
• 安卓在本地测试可以，在线上又不行了。会不会是由于后端写了所有的jsApiList，但是线上正式账号并不是所有的都具有这个权限的。（排除了）
• 是不是因为API没有在wx.ready 回调里面执行。但是官方说过像上传接口API那样的明确不需要啊

怀疑过这些问题的可以不用怀疑了，经过我的百般折腾，终于在这篇博客???关于html5-History模式在微信浏览器内的问题 发现了一点曙光：

修改后的代码如下

setTimeout(function () {
    $wechat.config(config);
}, 500);

简直不要太高兴，居然可以啦！！！！

其实细想一下config ok却会发生permission Denied已经给出了问题所在了，但是奇怪的现象太多了，想法就饶了半个地球了。
让我来解析一下为什么config ok却会发生permission Denied的报错。
由于在afterEach调用config的时候，页面的路由还是上一个页面的路由，config的url也是上一个页面的路由，所以config是ok的。但是到调用API的时候，afterEach多数已经resolve了，所以页面的路由也已经改变了，也就是当前调用api的路由跟config的路由不一致，所以微信就判断permission Denied了

新的问题，ios的分享总是首页

用了上面延迟后的config之后，ios分享的每个页面进去的都是首页。这是要折腾死我的节奏啊?????。幸好我只改了这延迟这一个地方，所以我很容易地就确定，肯定是afterEach在ios跟Android的处理是不一样的，所以把ios改回原来不延迟的config就妥妥滴好了

if (window.__wxjs_is_wkwebview === true) {
  $wechat.config(config);
} else {
  setTimeout(function () {
    $wechat.config(config);
  }, 500);
}

在一个页面定义了分享，之后每个页面的分享内容都是一样的了

由于是单页应用，页面不会刷新，所以微信分享一旦定义了，wx变量就会一直存在于系统运行内存中，自然就是每个页面分享的内容就是定义过的就不奇怪了。

解决办法，在afterEach里面，定义每个路由默认的分享标题和描述，如果组件需要再在独立的vue组件里面重新定义一篇分享的API即可

$wechat.onMenuShareTimeline({
    title: state.title, // 分享标题
    success: function () {
      // 用户确认分享后执行的回调函数
    }
});
$wechat.onMenuShareAppMessage({
    title: state.title, // 分享标题
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
});

参考文档：
vue微信公众号开发踩坑记录（2)
关于html5-History模式在微信浏览器内的问题