產品背景:
產品哥哥要開發一個在微信中開啟的需要獲取使用者當前地理位置的功能的頁面,於是便開始了與微信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
複製程式碼
題外話:貌似看到有人在處理微信分享的時候也有類似的問題,有時間可以好好研究下~