vue中使用微信公衆號js-sdk踩坑記錄（2）

時間 2019-11-05

原文原文鏈接

最近又在vue中搗鼓了下微信公衆號api的接入，不得不說這裏邊水是真的深啊，上次分享了微信受權登陸和js-sdk簽名的部分，其中不少朋友私信我表示了疑惑，今天我就再次嘗試理順一下這裏邊的坑吧：php

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。
經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

分享頁面到朋友圈

上文是從官方文檔中摘出來的，因而可知，咱們若是要實如今公衆號的內嵌h5中實現微信分享，支付等功能，就得引入js-sdk。
使用js-sdk有一個關鍵的環節，那就是經過config接口注入權限驗證配置，而配置中有個signature參數是須要藉助服務端獲取的，這裏就不過多探討了，你們經過官方文檔能夠深刻了解。vue

Hash or History?

上篇文章，我推薦你們在vue中配置vue-router使用hash模式，那麼hash模式和history模式到底有什麼差異呢？我舉個栗子，假設咱們都經過http://domain.com進入，而後跳轉到路由爲/jssdk的頁面須要用到jssdk，那麼實際js-sdk進行簽名校驗時所獲取的當前頁面url在ios和andrioid是不一樣的，這裏我經過表格展現出來：
android

真相都在表格裏，我表達能力很差恕我偷個懶23333333。ios

若是閣下沒有接入分享指定頁面的需求的話，hash模式很方便，可是無奈筆者須要接微信分享，若是使用hash模式，分享出去的地址，微信會自動處理掉#後邊的部分，那麼我就無法分享指定頁面到朋友圈或者給朋友了。
怎麼辦呢，只能硬着腦子解決history問題咯，其實也好解決，就是iOS須要使用第一次進入頁面的URL獲取簽名，安卓每次路由切換都從新配置簽名。我這裏羅列兩個方案：web

1.入口文件中記錄頁面URL，在頁面組件建立完成後，ios獲取記錄的url進行簽名，android獲取當前路由（window.location.href.split('#')[0]），請移步個人上一篇博客vue-router

2.入口文件中直接進行簽名和注入配置，僅針對android在每次切換路由時再從新簽名和配置。該方案適合全部頁面都須要用到js-sdk的狀況axios

問題記錄

現列出我在搗鼓過程當中遇到的一個個bug：segmentfault

1.安卓設備能分享ios設備不能分享；
出現該問題的緣由就是由於採用了history模式，且沒有考慮到ios校驗簽名獲取的url是第一次訪問的url而使用了切換後的url。api

2.ios設備進入頁面時不能分享，手動刷新頁面後才能分享；
屢次測試後我發現，測試分享的時候，若是是訪問的連接沒帶http://的話，除了首頁其餘頁面都是失效的，測試時落地頁ur必需要加http://安全

3.點擊連接能正常分享，點擊別人分享的圖文消息以後不能分享；
猜測1：點擊圖文消息時候，微信進行簽名校驗的url去掉了本身添加的參數，因此咱們在進行簽名時也要去掉微信添加的參數? 因此我把微信參數即
`?from=singlemessage&isappinstalled=0'這個部分去掉，結果依舊是分享失敗，而我本身隨意加一個參數，分享則正常，我隨意加兩個參數的時候，分享卻又不正常了。

猜測2: 微信分享進行簽名校驗的url僅能容許一個參數？因此我這樣寫：
url = location.href.split('&')[0],驗證後發現是錯誤的，再仔細一想我竟然有這麼可怕的想法，連官方文檔都不相信了。

猜測3：url難道須要進行編碼？即
url = encodeURIComponent(window.location.href.split('#')[0])經我屢次debug，終於找到問題，就是須要對簽名的url進行編碼，word哥，不容易啊

僅須要對簽名的url進行編碼，分享配置中的url不須要編碼
僅須要對簽名的url進行編碼，分享配置中的url不須要編碼
僅須要對簽名的url進行編碼，分享配置中的url不須要編碼

這裏又是一個坑，務必當心。

常常N次的debug和嘗試以後我碼了幾十行代碼，解決了以上全部問題，回首一看我真的是年輕啊，也就那麼簡單的邏輯，也許換我的一步就到位了，我卻和各類各樣的bug戰鬥了n多遍（改動一點代碼就要上生產環境debug的心酸有誰能懂），唉。。。

Coding

分享一下我怎麼按照第二種方案進行微信分享配置的
因爲我項目中需求是基本全部頁面都須要能分享，因此在每一個page組件中去獲取簽名是不實際的，因此我就想借助vue-router的after鉤子去完成分享配置的操做，對於android則還須要從新進行簽名。

// main.js
...
import wx from 'weixin-js-sdk'
import request from 'axios'
...
router.afterEach((to, from) => {
  let _url = window.location.origin + to.fullPath
  // 非ios設備，切換路由時候進行從新簽名
  if (window.__wxjs_is_wkwebview !== true) {
    request.get('/api/jssdk?url=' + encodeURIComponent(_url)).then(function (_lists) {
      // 注入配置
      wx.config({
      ...
      })
    })
  }
  // 微信分享配置
  wx.ready(function () {
    wx.onMenuShareTimeline({
     ...
    })
    wx.onMenuShareAppMessage({
      ...
    })
  })
})

...
// ios 設備進入頁面則進行js-sdk簽名
if (window.__wxjs_is_wkwebview === true) {
  let _url = window.location.href.split('#')[0]
  request.get('/api/jssdk?url=' + encodeURIComponent(_url)).then(function (res) {
    let _lists = res
    wx.config({
      debug: false,
      appId: _lists.appId,
      timestamp: _lists.timestamp,
      nonceStr: _lists.nonceStr,
      signature: _lists.signature,
      jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
    })
  })
}

總結：總之簡要歸納就是要想分享成功，必須簽名是成功的，要想簽名成功，必須保證調用簽名配置的時候微信校驗簽名獲取的url（ios永遠是第一次進入頁面的url）和咱們請求服務端獲取簽名時提交的url一致。

調用微信支付

兩個方案何去何從

h5使用微信支付，細心的人會發現，微信是有兩個方案的，我大體瞭解了一個，一個是js-sdk中開放的能力，一個是微信支付開放平臺提供的接口

js-sdk版本:

微信支付版本：

若是你只須要在公衆號中調用支付，兩個方法均可以，筆者因爲已經使用js-sdk接入了其餘功能，因此這裏就選擇了chooseWXPay方式。

接入步驟

在其餘功能都接入成功的前提下，接支付就很快很方便了，筆者把主要步驟列下：

微信公衆平臺中配置好js安全接口域名（例如www.imwty.com），這個是調用js-sdk的前提，公衆號支付也是基於js-sdk；
微信支付平臺中設置支付目錄，參見微信支付開發文檔，這裏要說明的是，你須要進行支付的頁面路由是什麼，就要配置什麼，並且須要在後邊加上/（例如www.imwty.com/pay/）
調用js-sdk簽名配置（wechat.config），上文已有說起。
在點擊支付按鈕的邏輯中，調用wechat.chooseWXPay()方法，該方法也涉及到支付簽名，須要從服務端去獲取簽名信息

注意的點：訪問支付頁面務必不要遺漏/，微信那邊會嚴格比較調用第4步驟時你所在的頁面路由和支付平臺中設置的路由是否一致。

Coding

這裏主要展現第4步驟中筆者的寫法，僅供參考

...
methods () {
 handlerPay () {**粗體文本**
    let self = this
    // 進行支付簽名
    apiUtil.get('/api/jssdk/pay', {amount: this.amount}).then(function (wxmsg) {
      self.$wechat.chooseWXPay({
     // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
          appId: wxmsg.appId,
          timestamp: wxmsg.timeStamp,
          nonceStr: wxmsg.nonceStr, // 支付簽名隨機串，不長於 32 位
          package: wxmsg.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
          signType: wxmsg.signType, // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
          paySign: wxmsg.paySign, // 支付簽名
          success: function (res) {
            // 支付成功的回調函數
          },
          cancel: function (res) {
            // 支付取消的回調函數
          },
          error: function (res) {
            // 支付失敗的回調函數
          }
    }).catch(function () {
      ...
    })
  }
}