背景:教育項目,整體依賴於微信環境,涉及到微信分享、微信二次分享
問題:vue使用history模式在iso微信下分享設置出錯(簽名認證錯誤、分享設置失敗)
問題發現路徑
1、按照微信公眾號官方文檔設置微信分享,ios真機測試,第一個進入頁面分享設置成功。
2、使用vue router跳轉到第二個頁面后在分享時,分享設置失敗,刷新頁面后分享正常。
3、打開微信jssdkdebug模式
4、發現在router跳轉后的第二個頁面,簽名失敗(invalid signature)
解決路徑:
google后發現,是ios微信對history操作的問題。
在vue-router模式為history的情況下, 由於IOS微信瀏覽器在驗證微信jssdk簽名時,需要的URL是第一次進入該應用時的URL, 並不是當前頁面的URL, 所以這里需要針對IOS微信瀏覽器作特殊處理.
修改代碼,獲取第一次進入頁面的uil作為ios簽名的url,具體參考(VUE解決微信簽名,SPA微信invalid signature問題,完美處理)
通過設置后在本地測試正常(本地域名攔截,代理轉發)。於是高高興興提測試環境。但是很快心情就不好了。測試環境測試不通過。
繼續填坑。。。
有個好的現象(也許是不好的現象),第二個頁面的簽名通過了,但是分享出去的內容還是錯誤。分享的標題是公眾號的標題,鏈接是首次進入頁面的鏈接。
為此不停的google google google。但是沒有結果。。。。
與同事討論后,感覺可能是以公共組件的方式調起原因。於是有靜下心來更換調用方式,替換成公共方法(為避免大量返工,選擇兩個頁面進行實驗)。
將公共組件改成公共js方法。在兩個頁面中調用方法設置微信分享。本地測試通過,但我已經不相信本地測試了,直接提交測試環境,使用5s測試通過。還是不放心,又使用6、6p、7、7p測試。過了、過了、真的過了~~~~
雖然不知道,這兩種調用方式區別在哪里,但是爽啊。。。
參考鏈接: https://www.jianshu.com/p/a1a31f9da272
https://github.com/vuejs/vue-router/issues/481
https://zhuanlan.zhihu.com/p/31887792