前一段時(shí)間做了一個(gè)微信分享的東西，而且前端框架用的是VUE，被這個(gè)東西快折磨瘋了，一個(gè)列表頁(yè)，一個(gè)詳情頁(yè)，分享詳情頁(yè)的時(shí)候，會(huì)報(bào)錯(cuò)invalid signature簽名錯(cuò)誤。

當(dāng)時(shí)就不淡定了，然后開始了排坑之路，根據(jù)官網(wǎng)的各種校驗(yàn)錯(cuò)誤問題，沒有發(fā)現(xiàn)有什么區(qū)別

建議按如下順序檢查：

1.確認(rèn)簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁(yè)面工具進(jìn)行校驗(yàn)。

2.確認(rèn)config中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫S）, timestamp與用以簽名中的對(duì)應(yīng)noncestr, timestamp一致。

3.確認(rèn)url是頁(yè)面完整的url(請(qǐng)?jiān)诋?dāng)前頁(yè)面alert(location.href.split('#')[0])確認(rèn))，包括'http(s)://'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分。

4.確認(rèn) config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

5.確保一定緩存access_token和jsapi_ticket。

6.確保你獲取用來簽名的url是動(dòng)態(tài)獲取的，動(dòng)態(tài)頁(yè)面可參見實(shí)例代碼中php的實(shí)現(xiàn)方式。如果是html的靜態(tài)頁(yè)面在前端通過ajax將url傳到后臺(tái)簽名，前端需要用js獲取當(dāng)前頁(yè)面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因?yàn)轫?yè)面一旦分享，微信客戶端會(huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁(yè)面簽名失敗。

究竟什么導(dǎo)致呢，后來發(fā)現(xiàn)是history在微信中的問題，就是當(dāng)從列表進(jìn)入詳情頁(yè)的時(shí)候，往后臺(tái)傳入U(xiǎn)RL，跟你直接從詳情頁(yè)進(jìn)入傳的URL不一致。比如：A=>B，分享B

這時(shí)候你需要記錄初始頁(yè)的url，解決辦法在你的main.js里，添加

router.beforeEach((to, from, next) => {
 if (!window.initUrl) {
 window.initUrl = location.href.split('#')[0]
 }
 next()
})

然后在你的詳情頁(yè)里B獲取

url: '....?url=' + encodeURIComponent(that.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)

在這里要判斷是android還是ios，因?yàn)樵賏ndroid里顯示是正常的，所以就用

location.href.split('#')[0]

直接獲取當(dāng)前的url即可。

// 判斷ios還是android
 Vue.prototype.isIosOrAndroid = function () {
 let u = navigator.userAgent;
 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android終端
 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端
 let isStr = ''
 if (isAndroid) {
 isStr = 'android'
 }
 if (isiOS) {
 isStr = 'ios'
 }
 return isStr
 }

總結(jié)

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