技術標籤：vue router 關閉當前頁

本文已同步到專業技術網站 www.sufaith.com, 該網站專注於前後端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊.

在vue-router模式為history的情況下, 由於IOS微信瀏覽器在驗證微信jssdk簽名時,需要的URL是第一次進入該應用時的URL, 並不是當前頁面的URL, 所以這裡需要針對IOS微信瀏覽器作特殊處理.

1. vuex中儲存第一次進入的URL

[SET_WX_JS_URL]: (state, url) => {
    // 設定進入微信時jssdk所需的URL
    state.jsUrl = url
  }
 

2.在路由的全域性前置守衛beforeEach 中提交第一次進入時的URL至vuex

router.beforeEach((to, from, next) => {
  if (!store.state.jsUrl) {
    // 記錄第一次進入的URL
    store.commit(SET_WX_JS_URL, document.URL)
  }
  next()
})
export default router

3. 設定 獲取微信jssdk簽名sign時傳遞的URL

let jsUrl = '' // 驗證簽名所需URL
let shareUrl = location.href.split('#')[0] // 分享連結的URL
if (isIos && isWechat) {
  // 微信瀏覽器&&蘋果裝置, 取出記錄的第一次訪問的URL
  jsUrl = encodeURIComponent(store.state.jsUrl.split('#')[0])
} else {
  jsUrl = encodeURIComponent(location.href.split('#')[0]) // 當前頁面URL
}
 

4. 獲取簽名時使用jsUrl, 配置分享內容的連結時使用shareUrl (當前頁面的真實地址)

let payload = {
      url: jsUrl,
      jsApiList: ''
    }
    api.loadWxShare(payload).then(signPackage => {
      // 傳遞jsUrl, 向伺服器端請求jssdk簽名
      wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: signPackage.jsApiList
      })
      wx.ready(function () {
        wx.onMenuShareTimeline({
          title: '', // 分享標題
          desc: '', // 分享描述
          link: shareUrl, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
          imgUrl: '', // 分享圖示
          type: '', // 分享型別,music、video或link，不填預設為link
          dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
          success: function () {
          },
          cancel: function () {
          }
        })
      })
      wx.error(function (res) {
      })
    })