jssdk 在history模式下安卓不能調用圖片上傳接口和分享接口

dkzwm 發布于2019-08-22 15:37 / 456人閱讀

摘要：配置先上配置每個頁面都調用微信授權配置注是我在暴露的接口這份配置主要是根據微信公眾號開發踩坑記錄配置而來。

首先說明，應用環境是使用的是vue+vue-router,history模式開發的單頁應用。

配置

先上配置???

// 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);// 每個頁面都調用微信授權配置
});
// 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模式在微信瀏覽器內的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93594.html

vue+微信支付目錄+JSSDK簽名解決方案

摘要：主要是用，每當用戶第一次進來時，去獲取一次簽名驗證。注意只獲取一次，這樣簽名就解決了。 vue+微信支付目錄+JSSDK簽名解決方案遇坑如下注意：此方法僅為個人總結，并非唯一解決方案微信JSSDK簽名出錯微信支付調起支付缺少API參數微信支付目錄配置，只有5個配置，可能超過5個地方有配置，路由規劃微信授權回調處理我所使用的技術 vue路由模式 history 模...

Little_XM 2019-06-28 14:35 評論0 收藏0
微信開發之錄音上傳、下載、轉碼

摘要：具體請看我在提問里的回答下載七牛云文件間歇性失敗總結至此，在微信開發中關于錄音這一塊兒的功能，就已經介紹完畢。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以點閱讀原文進行跳轉查看，還有好聽的背景音樂噢~ ????一年的時間里，前前后后都在搞微信開發...

余學文 2019-06-28 18:30 評論0 收藏0
移動端H5開發遇到的坑

摘要：微信分享簽名錯誤單頁應用模式下微信分享一直提示簽名錯誤按照微信官網文檔，已經引入，正確的配置安全域名，后臺開發人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且微信分享簽名錯誤invalid signature vue單頁應用history模式下微信分享一直提示簽名錯誤invalid signature ...

Eirunye 2019-08-26 13:39 評論0 收藏0