最近做公眾號(hào)網(wǎng)頁(yè)開發(fā)，使用微信 jssdk 頁(yè)面簽名時(shí) IOS 中一直報(bào)錯(cuò)，這才剛開始就被這只攔路虎攔住了，報(bào)錯(cuò)如下：

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

既然提示 簽名非法 ，那就是簽名有問題咯，但是同樣的接口，為什么Android沒問題？是真是假還是用官方的簽名校驗(yàn)工具驗(yàn)證下：

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

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

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

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

分享后的鏈接仍然是首頁(yè)進(jìn)入的鏈接，這是微信的BUG啊，原來在微信的網(wǎng)頁(yè)中不支持 pushState ，這就導(dǎo)致我們?cè)趈ssdk從配置時(shí)傳入的 url （ window.location.href 得到）和微信識(shí)別到的不一樣，這時(shí)候在分享的頁(yè)面刷新一下，配置就會(huì)正常。

后面再看官方文檔時(shí)也提到了這一點(diǎn)：

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

如何解決

在跳轉(zhuǎn)到要分享的頁(yè)面時(shí)，不用 pushState ，在 Vue router 中就是不用 push 方式跳轉(zhuǎn)，方式如下：

window.location.href = 要跳轉(zhuǎn)的鏈接
// _this.$router.push({
// …
// })

既然 SPA 在微信中只認(rèn)第一個(gè)頁(yè)面的 path ，那我們就在第一次進(jìn)入頁(yè)面時(shí)記錄下 path ，其他頁(yè)面用這個(gè) path 。我們?cè)?App.vue 或者 main.js 中記錄下這個(gè) path ：

window.sessionStorage.setItem('firstEntryUrl', window.location.href)

然后在需要分享的頁(yè)面，使用這個(gè) path ：

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

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

到此這篇關(guān)于微信jssdk踩坑之簽名錯(cuò)誤invalid signature的文章就介紹到這了,更多相關(guān)微信jssdk 簽名錯(cuò)誤 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論