摘要：配置先上配置每個(gè)頁(yè)面都調(diào)用微信授權(quán)配置注是我在暴露的接口這份配置主要是根據(jù)微信公眾號(hào)開發(fā)踩坑記錄配置而來。

首先說明，應(yīng)用環(huán)境是使用的是vue+vue-router,history模式開發(fā)的單頁(yè)應(yīng)用。

先上配置???

// index.js
const protocol = location.protocol + "http://" + 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);// 每個(gè)頁(yè)面都調(diào)用微信授權(quán)配置
});
// 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接口

這份配置主要是根據(jù)vue微信公眾號(hào)開發(fā)踩坑記錄（2)配置而來。

上傳圖片、分享朋友自定義內(nèi)容在ios上面可以，安卓不可以

有些很有趣的現(xiàn)象：

ios的可以，有些安卓可以，有些安卓不行

在安卓上面有些頁(yè)面的上傳圖片可以，有些頁(yè)面的上傳圖片不可以

在本地用測(cè)試公眾號(hào)可以，用正式公眾號(hào)大部分時(shí)間不行

不行的時(shí)候，微信debug模式的結(jié)果基本都是：config ok,CheckJsApi: permission Denied

正是這些現(xiàn)象把我?guī)税雮€(gè)地球，好不容易才試出來問題的所在。

秀一波我曾經(jīng)懷疑過的問題：

jssdk cdn加載可能不成功（用本地版測(cè)試過）

是不是寫死cdn 的協(xié)議頭http導(dǎo)致的（使用location.protocol測(cè)試過）

是不是簽名路徑的問題，難道低版本的安卓跟ios一樣也是要用第一次進(jìn)去頁(yè)面的url的呢

安卓在本地測(cè)試可以，在線上又不行了。會(huì)不會(huì)是由于后端寫了所有的jsApiList，但是線上正式賬號(hào)并不是所有的都具有這個(gè)權(quán)限的。（排除了）

是不是因?yàn)锳PI沒有在wx.ready 回調(diào)里面執(zhí)行。但是官方說過像上傳接口API那樣的明確不需要啊

懷疑過這些問題的可以不用懷疑了，經(jīng)過我的百般折騰，終于在這篇博客???關(guān)于html5-History模式在微信瀏覽器內(nèi)的問題 發(fā)現(xiàn)了一點(diǎn)曙光：

修改后的代碼如下

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

簡(jiǎn)直不要太高興，居然可以啦?。。?！

其實(shí)細(xì)想一下config ok卻會(huì)發(fā)生permission Denied已經(jīng)給出了問題所在了，但是奇怪的現(xiàn)象太多了，想法就饒了半個(gè)地球了。
讓我來解析一下為什么config ok卻會(huì)發(fā)生permission Denied的報(bào)錯(cuò)。
由于在afterEach調(diào)用config的時(shí)候，頁(yè)面的路由還是上一個(gè)頁(yè)面的路由，config的url也是上一個(gè)頁(yè)面的路由，所以config是ok的。但是到調(diào)用API的時(shí)候，afterEach多數(shù)已經(jīng)resolve了，所以頁(yè)面的路由也已經(jīng)改變了，也就是當(dāng)前調(diào)用api的路由跟config的路由不一致，所以微信就判斷permission Denied了

用了上面延遲后的config之后，ios分享的每個(gè)頁(yè)面進(jìn)去的都是首頁(yè)。這是要折騰死我的節(jié)奏啊?????。幸好我只改了這延遲這一個(gè)地方，所以我很容易地就確定，肯定是afterEach在ios跟Android的處理是不一樣的，所以把ios改回原來不延遲的config就妥妥滴好了

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

由于是單頁(yè)應(yīng)用，頁(yè)面不會(huì)刷新，所以微信分享一旦定義了，wx變量就會(huì)一直存在于系統(tǒng)運(yùn)行內(nèi)存中，自然就是每個(gè)頁(yè)面分享的內(nèi)容就是定義過的就不奇怪了。

解決辦法，在afterEach里面，定義每個(gè)路由默認(rèn)的分享標(biāo)題和描述，如果組件需要再在獨(dú)立的vue組件里面重新定義一篇分享的API即可

$wechat.onMenuShareTimeline({
    title: state.title, // 分享標(biāo)題
    success: function () {
      // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
    }
});
$wechat.onMenuShareAppMessage({
    title: state.title, // 分享標(biāo)題
    type: "", // 分享類型,music、video或link，不填默認(rèn)為link
    dataUrl: "", // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
    success: function () {
      // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
    },
    cancel: function () {
      // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
    }
});

參考文檔：
vue微信公眾號(hào)開發(fā)踩坑記錄（2)
關(guān)于html5-History模式在微信瀏覽器內(nèi)的問題