描述下問題就是vue單頁面應(yīng)用接入JS-SDK實現(xiàn)分享等功能（history模式副帶的頁面刷新問題和iOS、Android獲取url方式不同的兼容問題）掰吕、做好微信的配置后剂邮，開始測試的時候發(fā)現(xiàn)除第一次進入的頁面外iOS都簽名失敗洲愤，Android卻每次都能正確簽名颓芭。簽名失敗會導(dǎo)致非常尷尬的問題，分享出去就像這樣：
因為有指定不同頁面的分享禽篱，所以采用vue-router的history模式（如果使用hash模式，分享出去的地址微信會自動處理掉#后邊的部分馍惹，這樣分享出去的都是同一個頁面躺率，不能指定某個頁面）。再看如何配置微信分享功能万矾，官方是這樣說的：
- vue-router切換的時候 都是操作的瀏覽器歷史記錄悼吱，真實URL為第一次剛進入時的URL。每次路由變化時都重新請求下簽名良狈，簽名的URL 用第一次進入時的URL后添。
而history模式每次跳轉(zhuǎn)利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面，所以在每次路由url變化時都要重新調(diào)用一次api去注入實時的配置信息薪丁。 - 所有需要使用JS-SDK的頁面必須先注入配置信息遇西，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性严嗜，所以使用pushState來實現(xiàn)web app的頁面會導(dǎo)致簽名失敗粱檀，此問題會在Android6.2中修復(fù)）
我做了個簡單的實驗 ，在微信ios手機中有
A： http://www.xx.com漫玄、B： http://www.xx.com/B 兩個頁面
主頁面是A頁面茄蚯，就一個按鈕負(fù)責(zé)跳轉(zhuǎn)b頁面
<router-link to="/B">跳轉(zhuǎn)B頁面</>
點擊A頁面的按鈕跳到B頁面
獲取當(dāng)前B頁面的window.location.href是http://www.xx.com/B
但是用微信自帶的復(fù)制鏈接功能復(fù)制當(dāng)前頁面的鏈接還是http://www.xx.com
所以配置里面的link一定要與你頁面url一致！
根據(jù)查閱的信息據(jù)說因為這些問題幾年都無法解決睦优，所以小程序應(yīng)運而生渗常，徹底解決了已上問題
解決問題的方法
1、beforeRouteEnter解決辦法參考
或者用 vue-router 的beforeEach
vue組件中添加汗盘。
beforeRouteEnter(to, from, next) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS && to.path !== location.pathname) {
location.assign(to.fullPath) // 此處不可使用location.replace
} else {
next()
}
}
上面的方式等于刷新了頁面皱碘，但是在我的項目中需要有跳轉(zhuǎn)鏈接的統(tǒng)計埋點事件，所以我刷新頁面會影響我統(tǒng)計不到我的埋點隐孽，所以我選擇了下面的方式尸执，我到現(xiàn)在我都沒有理解后端做了什么配置，在某個項目缓醋，是可以的如失，我現(xiàn)在的項目卻沒有實現(xiàn)，大致問了下他們的解決辦法就是
在你和后端同學(xué)對接的時候送粱，獲取jsSDK這個接口拿簽名串的時候褪贵，編碼encodeURIComponent(當(dāng)前頁面的鏈接)，給他們，他們做了一個處理就是：
if(我們是否傳了當(dāng)前頁面的鏈接){
用我們是傳了當(dāng)前頁面的鏈接解碼后作為驗簽的url
}else if(當(dāng)前的請求是否有reffer){
用reffer作為驗簽的url
}else{
用域名作為驗簽的url
}
然后在把驗簽的url返回給我們方便我們查看是否一致
但是這樣解決的話脆丁，還是會有問題世舰，就是微信ios版復(fù)制當(dāng)前的鏈接，永遠(yuǎn)是進單頁面應(yīng)用的第一個鏈接地址
這個辦法在我的項目中沒有實現(xiàn)槽卫，所以我最終采用下面的方式跟压，最后完美解決，就留一個小bug歼培，微信ios版復(fù)制當(dāng)前的鏈接永遠(yuǎn)是進單頁面應(yīng)用的第一個鏈接地址
IOS：微信IOS版震蒋，微信安卓版，每次切換路由躲庄，SPA的url是不會變的查剖，發(fā)起簽名請求的url參數(shù)必須是當(dāng)前頁面的url就是最初進入頁面時的 Android：微信安卓版，每次切換路由噪窘，SPA的url是會變的笋庄，發(fā)起簽名請求的url參數(shù)必須是當(dāng)前頁面的url(不是最初進入頁面時的)
請求簽名的url跟當(dāng)前頁面的url（location.href）對比明明是一樣的！
解決方案：ios記錄進入的第一個頁面的鏈接window.entryUrl = location.href.split('#')[0]
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
let iosURL=''
if (isiOS) {
iosURL='?referer='+encodeURIComponent(window.entryUrl)
}
繼續(xù)分享的坑之旅倔监，用第一個進入的url解決了ios上述的問題直砂，發(fā)現(xiàn)又大量爆發(fā)了微信分享失效的問題，但是我抓包浩习，開啟debug模式哆键，居然微信配置的config是ok，分享朋友debug模式也是報ok瘦锹，說明我應(yīng)該是可以的籍嘹，but，事實是殘酷的弯院，屢次失敗辱士，我必須得找到原因，不然老大不高興了听绳，然后我就找颂碘，一個重大發(fā)現(xiàn)出來了，就是我的我打開的鏈接地址https://xxx.com椅挣，就是第一個頁面ok头岔，后面的也是ok，但是顯示就是有問題的鼠证，但是https://xxx.com/帶了斜杠的居然沒有問題峡竣。我就問公眾號的小哥哥，你入口的地址是不是填的https://xxx.com量九，果不其然
接下來适掰，又有新的問題了颂碧，后退頁面的時候config雖然配置了，但是他會用后退前的最后一個頁面的分享文案
