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

深度解決方案，包教不包會，只由於踩坑無數，但願你們能有所收穫

前端小菜鳥，由於項目要對接微信的jssdk，對接就須要簽名認證，可是無奈安卓和IOS各有各的坑，本篇文章只討論簽名，和一個分享的坑，但願你們有所收穫，可以解決問題，若是解決不到，請麻煩在評論區留言，本文綜合了全部的回答，才調試出來坑

需求： 使用微信的功能

緣由：

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);
  }
})

• window.entryUrl這個是什麼鬼？這個是本身定義的全局屬性，就是爲了獲取IOS第一次進入頁面的時候存儲起來的，若是IOS的簽名的路徑不是第一次進入的頁面，那麼就必定會失敗，因此這個路由第一次進入就要儲存起來
• 爲何要寫在router.afterEach，由於頁面進入了再去作申請和簽名，若是在beforeEach，會致使頁面申請簽名的時候仍是上一個頁面，可是到了新頁面卻沒有註冊簽名，或者由於簽名的路徑不一樣，致使invalid signature
• 爲何安卓的時候要增長一個延時器，由於安卓會存在一些狀況，就是即使簽名成功，可是仍是會喚不起功能，這個貌似是一個比較穩妥的解決辦法，

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

• 有同窗疑惑這個encodeURIComponent是幹嗎用的，其實具體很簡單，就是由於咱們在微信分享的時候，會自動給咱們帶上參數(記得告訴後端的夥伴要decodeURIComponent),切記只要帶參數就必定要轉碼！

  對於IOS系統會自動增長以下參數：
  朋友圈 from=timeline&isappinstalled=0
  微信羣 from=groupmessage&isappinstalled=0
  好友分享 from=singlemessage&isappinstalled=0
  
  對於安卓系統會自動添加以下參數：
  朋友圈 from=timeline
  微信羣 from=groupmessage
  好友分享 from=singlemessage

• 而後就直接去請求籤名，寫法就不深究，getWeChat是封裝的axios，只是爲了統一管理才這麼寫，你們能夠寫成正常的請求axios('xxxx.com/get-wx',obj).then()這樣的寫法，同樣的效果

到了這一步就基本上是請求籤名成功，可是有同窗疑惑，那麼IOS每次分享的時候會不會是進去的第一個路由，個人回答是會的(須要稍加處理)

• 重點關注再與這個link，須要在每次分享的時候記錄當前的路由，若是直接讀location.href在IOS端的時候會是第一次進入的頁面。安卓則沒有問題，因此我統一採用我記錄的這個參數，這個參數能夠直接在方法傳遞過來，路由afterEach的to.fullpage，而後再加上本身的域名就OK了

最後寫幾句話，但願你們都能順便解決一下BUG，也但願能對你們有所幫助，若是遇到一些其餘的問題，歡迎評論區留言，只要有時間就會及時跟你們交流探討！