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模式在微信瀏覽器內的問題