微信jssdk踩坑—invalid signature

最近做公眾號網(wǎng)頁開發(fā),使用微信jssdk頁面簽名時IOS中一直報錯,這才剛開始就被這只攔路虎攔住了,報錯如下:

然而Android和開發(fā)者工具中好得很,沒有任何問題:

既然提示簽名非法,那就是簽名有問題咯,但是同樣的接口,為什么Android沒問題?是真是假還是用官方的簽名校驗工具驗證下:

生成的簽名完全沒有問題,這就奇怪了,按照網(wǎng)上說的url改成如下方式也不行:

url = window.location.href.split('#')[0]

突然看到網(wǎng)上有人說是因為SPA的原因,經(jīng)過幾番測試,問題鎖定在了SPA。先來解釋下為什么會這樣,我們使用Vue Router切換頁面時,底層使用的是pushState技術(shù),這是H5的一個新特性,雖然表面上看頁面的path變了,內(nèi)容也換了,但是頁面是沒有刷新的。

現(xiàn)在知道問題出在哪里,再來實際確認(rèn)一下。首先進入項目的首頁,地址是[https://www.abc.com/weixin/quan?rr=234wfwf](https://www.abc.com/weixin/quan?rr=234wfwf%60),然后點擊進入我們要分享的頁面,這時候會提示invalid signature,這時jssdk是配置失敗的,分享出去的就是原始的頁面鏈接,然而問題出現(xiàn)了:

分享后的鏈接仍然是首頁進入的鏈接,這是微信的BUG啊,原來在微信的網(wǎng)頁中不支持pushState,這就導(dǎo)致我們在jssdk從配置時傳入的urlwindow.location.href得到)和微信識別到的不一樣,這時候在分享的頁面刷新一下,配置就會正常。

后面再看官方文檔時也提到了這一點:

然而我的Android沒這個問題,iOS反而出現(xiàn)了這個問題(IOS版本13.3.1,微信版本7.0.9,jssdk 1.6)

如何解決

  1. 在跳轉(zhuǎn)到要分享的頁面時,不用pushState,在Vue router中就是不用push方式跳轉(zhuǎn),方式如下:
window.location.href = 要跳轉(zhuǎn)的鏈接
// _this.$router.push({
// …
// })
  1. 既然SPA在微信中只認(rèn)第一個頁面的path,那我們就在第一次進入頁面時記錄下path,其他頁面用這個path。我們在App.vue或者main.js中記錄下這個path
window.sessionStorage.setItem('firstEntryUrl', window.location.href)

然后在需要分享的頁面,使用這個path

let url = window.location.href.split('#')[0]

if (utils.isIOS() && window.sessionStorage.getItem('firstEntryUrl')) {
  url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0]
}

經(jīng)測試,上述兩種方法都能完美解決。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容