Vue history 路由模式微信自定義分享總結

feiben發表於2018-06-22
Vue路由模式

因為之前一直使用的是 hash 模式，所以配置微信分享比較簡單，不管是 Android 還是 iOS，只需要獲取一次簽名即可，然後在需要配置分享的頁面在 wx.ready 的回撥中編寫分享的邏輯即可。

原來一直用 hash 模式都沒什麼問題，可能是最近微信升級之後，在 Android 端微信授權後重定向回來頁面並不會重新整理，導致我無法獲取使用者的授權資訊。嘗試了很久之後將路由改成 history 模式就解決了。但是 history 模式也有很多棘手的問題，分享就是其中一個。

在網上查閱了大量文章，但大多都是點到為止。說明了 Android 和 iOS 獲取簽名失敗的問題。簡單的說就是，在 iOS 的機器中，獲取簽名只需要去第一次進入的地址，在 Android 的機器中，每次路由跳轉都需要拿當前地址去授權。 具體可以參考微信分享 總結（SPA/history模式）

我的做法是在開啟頁面的時候就去獲取簽名，然後進入需要分享的頁面時，再判斷是或否在 Android 裝置中，再決定是否需要獲取新的簽名。簽名的問題解決之後，我以為就OK了，後面才發現在 iOS 分享還是有問題。最後定位到的問題是在 iOS 中不會在進入分享頁之後重複觸發 wx.ready 的方法，只需要編寫分享的邏輯即可。

function getSignature () {
  // 獲取微信簽名
}

function wxShare (data) {
  if (/(Android)/i.test(window.navigator.userAgent)) {
    // 在 Android 裝置，需要獲取新的簽名
    getSignature()
  }

  wx.ready (function () {
    shareConfig(data)
  })

  // iOS 裝置不會多次觸發 wx.ready
  shareConfig(data)
}

function shareConfig (data) {
  // 分享邏輯
}
複製程式碼

相關文章