VUE如何解決微信簽名及SPA微信invalid signature問題

這篇文章主要介紹了VUE如何解決微信簽名及SPA微信invalid signature問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

需求： 使用微信的功能

原因：

1. 項目基于vue，在微信上的web應(yīng)用

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

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

簽名

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

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

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

安利一個在微信下能檢測內(nèi)核的判斷：window.__wxjs_is_wkwebview(是否為webview內(nèi)核)，如果是的情況下就變成true

因?yàn)镾PA應(yīng)用下，會有一定的問題，路由采用的是history模式(不帶#號)。因?yàn)樵陧撁婷看芜M(jìn)入到路由之后才去獲取簽名授權(quán)，所以將方法公用寫在路由的模塊下

router.afterEach((to, from) => {    //   伸手黨福利
 // window.__wxjs_is_wkwebview
  // true 時 為 IOS 設(shè)備
  // false時 為 安卓 設(shè)備
 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第一次進(jìn)入頁面的時候存儲起來的，如果IOS的簽名的路徑不是第一次進(jìn)入的頁面，那么就一定會失敗，所以這個路由第一次進(jìn)入就要儲存起來

• 為什么要寫在router.afterEach，因?yàn)轫撁孢M(jìn)入了再去做申請和簽名，如果在beforeEach，會導(dǎo)致頁面申請簽名的時候還是上一個頁面，但是到了新頁面卻沒有注冊簽名，或者因?yàn)楹灻穆窂讲煌瑢?dǎo)致invalid signature

• 為什么安卓的時候要增加一個延時器，因?yàn)榘沧繒嬖谝恍┣闆r，就是即便簽名成功，但是還是會喚不起功能，這個貌似是一個比較穩(wěn)妥的解決辦法，

看完路由模式了，就來進(jìn)入邏輯部門，來看看如何處理

有同學(xué)疑惑這個encodeURIComponent是干嘛用的，其實(shí)具體很簡單，就是因?yàn)槲覀冊谖⑿欧窒淼臅r候，會自動給我們帶上參數(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()這樣的寫法，一樣的效果

到了這一步就基本上是請求簽名成功，但是有同學(xué)疑惑，那么IOS每次分享的時候會不會是進(jìn)去的第一個路由，我的回答是會的(需要稍加處理)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VUE如何解決微信簽名及SPA微信invalid signature問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!