vue-router在history模式下的微信分享

在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) {
      })
    })

福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.