VUE解決微信簽名及SPA微信invalid signature問題(完美處理)

需求： 使用微信的功能

原因：

1. 項目基于vue，在微信上的web應用

2. 要使用上傳功能(不同系統的兼容真的很多BUG，最后只能使用微信方案)，支付功能，定位....

3. 簽名一直存在bug和問題，那么后面的功能都會喚不起(偶爾也可以)

簽名

1. 流程詳細請看文檔，反正能力有限，沒看出什么名堂，總結一句話，要使用先簽名

2. 開啟填坑之路,由于微信使用會區分IOS和安卓系列，不同系列產生不一樣的問題

(公司項目第一版的時候就給微信大坑過，所以本次重構的時候，就格外注意這一點)

安利一個在微信下能檢測內核的判斷：window.__wxjs_is_wkwebview(是否為webview內核)，如果是的情況下就變成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 // 將后面的參數去除
 }
 getWxAuth(to.fullPath,"ios")
 }else { // 安卓
 setTimeout(function () {
 getWxAuth(to.fullPath,"android")
 }, 500);
 }
})

有同學疑惑這個encodeURIComponent是干嘛用的，其實具體很簡單，就是因為我們在微信分享的時候，會自動給我們帶上參數(記得告訴后端的伙伴要decodeURIComponent),切記只要帶參數就一定要轉碼！

對于IOS系統會自動增加如下參數：

對于安卓系統會自動添加如下參數：

然后就直接去請求簽名，寫法就不深究，getWeChat是封裝的axios，只是為了統一管理才這么寫，大家可以寫成正常的請求axios('xxxx.com/get-wx',obj).then()這樣的寫法，一樣的效果

重點關注再與這個link，需要在每次分享的時候記錄當前的路由，如果直接讀location.href在IOS端的時候會是第一次進入的頁面。安卓則沒有問題，所以我統一采用我記錄的這個參數，這個參數可以直接在方法傳遞過來，路由afterEach的to.fullpage，然后再加上自己的域名就OK了最后寫幾句話，希望大家都能順便解決一下BUG，也希望能對大家有所幫助，如果遇到一些其他的問題，歡迎評論區留言，只要有時間就會及時跟大家交流探討！也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com