關於微信JSSDK中遇到的「invalid signature」的天坑

產品背景：

產品哥哥要開發一個在微信中打開的須要獲取用戶當前地理位置的功能的頁面，因而便開始了與微信JSSDK的蒼蠅與大便的故事。

技術背景：

Vue主打，router使用history模式，外加微信JSSDK套餐，實現定位功能。

正文：

wx.config()這塊網上的信息太多了，基本的配置這裏繞過，直接說此次遇到的最坑的問題 ---- invalid signature

排查了各類狀況老是找不出緣由，並且神奇的是在安卓上能夠正常獲取位置，就只是在ios上一直「invalid signature」，打印出來的當前url跟簽名的url也明明是一致的，爲何仍是簽名有問題呢！！？？？

頁面的結構以下：

SPA：

• 頁面A
• 頁面B

很是簡單，整個應用從A進入，而後跳轉到B，B須要獲取位置，我也只是在B裏面配置微信的JSSDK，而後就遇到了前面所說的問題。而後！！關鍵來了！！在某一次調試的時候，我就直接從B頁面刷新了，而後就能夠了！！！！！What the fuk？！！

從B刷新加載的每一次都是那麼絲滑，而從A到B，每一次都被槍斃，因此抱着這個問題，我來到了這個新世界 ---- 關於html5-History模式在微信瀏覽器內的問題

原來，是醬紫？！！

IOS：微信IOS版，微信安卓版，每次切換路由，SPA的url是不會變的，發起簽名請求的url參數必須是當前頁面的url就是最初進入頁面時的url

Android：微信安卓版，每次切換路由，SPA的url是會變的，發起簽名請求的url參數必須是當前頁面的url(不是最初進入頁面時的)

坑爹啊！虧我把請求籤名的url跟當前頁面的url（location.href）對比明明是同樣的！

解決方案：

全局存儲進入SPA的url（window.entryUrl），Android不變，依舊是獲取當前頁面的url，IOS就使用window.entryUrl，而後簽名，done！

// 記錄進入app的url，後面微信sdk
if (window.entryUrl === '') {
	window.entryUrl = location.href.split('#')[0]
}
// 進行簽名的時候
url: isAndroid() ? location.href.split('#')[0] : window.entryUrl
複製代碼

題外話：貌似看到有人在處理微信分享的時候也有相似的問題，有時間能夠好好研究下～