這篇文章主要介紹了VUE如何解決微信簽名及SPA微信invalid signature問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務靈壽,十多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108
需求： 使用微信的功能
原因：
1. 項目基于vue，在微信上的web應用
2. 要使用上傳功能(不同系統(tǒng)的兼容真的很多BUG，最后只能使用微信方案)，支付功能，定位....
3. 簽名一直存在bug和問題，那么后面的功能都會喚不起(偶爾也可以)
簽名
1. 流程詳細請看文檔，反正能力有限，沒看出什么名堂，總結(jié)一句話，要使用先簽名
2. 開啟填坑之路,由于微信使用會區(qū)分IOS和安卓系列，不同系列產(chǎn)生不一樣的問題
(公司項目第一版的時候就給微信大坑過，所以本次重構的時候，就格外注意這一點)
安利一個在微信下能檢測內(nèi)核的判斷：window.__wxjs_is_wkwebview(是否為webview內(nèi)核)，如果是的情況下就變成true
因為SPA應用下，會有一定的問題，路由采用的是history模式(不帶#號)。因為在頁面每次進入到路由之后才去獲取簽名授權，所以將方法公用寫在路由的模塊下
重慶分公司
重慶分公司
router.afterEach((to, from) => { // 伸手黨福利
// window.__wxjs_is_wkwebview
// true 時 為 IOS 設備
// false時 為 安卓 設備
if (window.__wxjs_is_wkwebview) { // IOS
if (window.entryUrl == '' || window.entryUrl == undefined) {
var url = `${FRONT_BASE}${to.fullPath}`
window.entryUrl = url // 將后面的參數(shù)去除
}
getWxAuth(to.fullPath,"ios")
}else { // 安卓
setTimeout(function () {
getWxAuth(to.fullPath,"android")
}, 500);
}
})window.entryUrl這個是什么鬼？這個是自己定義的全局屬性，就是為了獲取IOS第一次進入頁面的時候存儲起來的，如果IOS的簽名的路徑不是第一次進入的頁面，那么就一定會失敗，所以這個路由第一次進入就要儲存起來
為什么要寫在router.afterEach，因為頁面進入了再去做申請和簽名，如果在beforeEach，會導致頁面申請簽名的時候還是上一個頁面，但是到了新頁面卻沒有注冊簽名，或者因為簽名的路徑不同，導致invalid signature
為什么安卓的時候要增加一個延時器，因為安卓會存在一些情況，就是即便簽名成功，但是還是會喚不起功能，這個貌似是一個比較穩(wěn)妥的解決辦法，
看完路由模式了，就來進入邏輯部門，來看看如何處理
有同學疑惑這個encodeURIComponent是干嘛用的，其實具體很簡單，就是因為我們在微信分享的時候，會自動給我們帶上參數(shù)(記得告訴后端的伙伴要decodeURIComponent),切記只要帶參數(shù)就一定要轉(zhuǎn)碼！
對于IOS系統(tǒng)會自動增加如下參數(shù)：
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
對于安卓系統(tǒng)會自動添加如下參數(shù)：
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage
然后就直接去請求簽名，寫法就不深究，getWeChat是封裝的axios，只是為了統(tǒng)一管理才這么寫，大家可以寫成正常的請求axios('xxxx.com/get-wx',obj).then()這樣的寫法，一樣的效果
到了這一步就基本上是請求簽名成功，但是有同學疑惑，那么IOS每次分享的時候會不會是進去的第一個路由，我的回答是會的(需要稍加處理)
感謝你能夠認真閱讀完這篇文章，希望小編分享的“VUE如何解決微信簽名及SPA微信invalid signature問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!
