背景

手機型號：

型號：iphone 7 / iphone xs max
版本：ios 10.3.1 / ios 12.1
微信版本：WeChat 6.7.3

問題還原：

Vue應用(vue-router)上使用history模式，在某個頁面內調用微信JSSDK相關API，如掃碼、分享等，使用當前頁面URL總會出現簽名錯誤(invalid signature)，導致API調用失敗。

問題根源

Vue-Router進行路由切換的時候，總是會操作瀏覽器的歷史記錄，從而響應頁面URL變化。

在JSSDK文檔頁面有這么一句話:

同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復

但根據多次測試情況來看，情況恰好相反，在Android下直接使用 window.location.href 得出的URL進行簽名是完全沒問題(可能已升級至Android6.2以上版本)，在IOS上就不行了。

這是因為在IOS上，無論路由切換到哪個頁面，實際真正有效的的簽名URL是【第一次進入應用時的URL】。

比如進入應用首頁是: https://m.app.com，需要使用JSSDK的頁面A是：https://m.app.com/product1/123，無論從首頁進入到A頁面之前，中間跳轉過多少次路由，最終簽名有效的URL還是首頁URL。

解決方案

方案一

直接粗暴處理方式:

在進入需要使用JSSDK頁面(B)的前一個頁面(A)，即 A > B，直接使用 window.location.href 或 window.open 打開B頁面，此時因為B頁面是直接刷新方式進入，所以當前B頁面URL無論IOS或Android都是可以直接拿來簽名的。

這種方式處理缺點也很明顯，如頁面刷新抖動太厲害不夠平滑過渡，再比如B頁面需要從vuex中取出緩存信息，如果這些緩存信息不是通過vuex保存在localstorage的話，取出來的肯定都是空的。

方案二

思路：既然IOS僅可使用第一次進入應用的URL來簽名，那么在vuex上緩存一個微信簽名URL，IOS保存第一次進入應用的URL，Android則緩存為每個頁面的URL。簽名時，直接從緩存拿出簽名URL來處理。

// 全局判斷是否IOS方法function isIos(){ const u = navigator.userAgent; return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;}

1. 定義vuex緩存

...{ state: {  wechatSignUrl: "" },  mutations: {  setWechatSignUrl(state, wxSignUrl) {   // 關鍵點   // IOS僅記錄第一次進入頁面時的URL   // IOS微信切換路由實際URL不變，只能使用第一進入頁面的URL進行簽名   if (isIos() && state.wxSignUrl !== '') {    return;   }   state.wxSignUrl = wxSignUrl;  } },  getters: {  getWechatSignUrl: (state) => state.wxSignUrl }}...