前端小菜鳥，因為項目要對接微信的jssdk，對接就需要簽名認(rèn)證，但是無奈安卓和IOS各有各的坑，本篇文章只討論簽名，和一個分享的坑，希望大家有所收獲，能夠解決問題，如果解決不到，請麻煩在評論區(qū)留言，本文綜合了所有的回答，才調(diào)試出來坑

需求： 使用微信的功能

原因：

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

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

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

簽名

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

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

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

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

因為SPA應(yīng)用下，會有一定的問題，路由采用的是history模式(不帶#號)。因為在頁面每次進(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，因為頁面進(jìn)入了再去做申請和簽名，如果在beforeEach，會導(dǎo)致頁面申請簽名的時候還是上一個頁面，但是到了新頁面卻沒有注冊簽名，或者因為簽名的路徑不同，導(dǎo)致invalid signature
• 為什么安卓的時候要增加一個延時器，因為安卓會存在一些情況，就是即便簽名成功，但是還是會喚不起功能，這個貌似是一個比較穩(wěn)妥的解決辦法，

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

有同學(xué)疑惑這個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()這樣的寫法，一樣的效果

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

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

最新評論