vue hash模式实现微信扫码分享

需求：微信扫二维码跳转到设定的链接，然后分享到微信朋友，或者朋友圈, 配置分享界面样式

首先，生成跳转链接的二维码

https://segmentfault.com/a/11...（这里具体写了怎么生成二维码）

下来我们具体讨论微信分享的具体配置，和遇到的问题。

1、配置微信分享界面

我们系统中使用的路由跳转，都做了权限控制，配置路由的时候如果没有登录就会跳转到登录界面，或者请求接口的时候后台做了token验证，这些都会影响分享界面，所以配置分享界面路由是和login同级别的（即外层），请求接口的时候我们也配置一下微信分享路由不需要验证token。我自己的配置是这样的

router/index.js

...
{
  path: '/wechat-share',
  name: 'wechat-share',
  component: WechatShare
},
{
  path: '/login',
  name: 'login',
  component: Login
}
...

main.js

router.beforeEach((to, from, next) => {
  // 如果没有session信息不能跳转
  if (localStorage.getItem('userInfo_admin')) {
    next()
  } else {
    // 如果是登录界面，或者微信分享界面都不需要验证session
    if (to.path === '/login' || to.path === '/wechat-share') {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  }

请求接口文件，封装http.js

// 请求拦截器
axios.interceptors.request.use(config => {
  // 如果不是登录接口，或者微信分享接口，都需要验证token
  if (window.location.hash.indexOf('login') === -1 && window.location.hash.indexOf('wechat-share') === -1) {
    const token = store.state.userInfo.Authorization
    token && (config.headers.Authorization = token)
  }
  return config
}

2、通过接口获取微信配置信息（和后台沟通）

通常接口只需要传递转码的url就可以了，返回我们需要的配置信息

axios.get('接口地址', {params: {url: encodeURIComponent(window.location.href.split('#')[0])}}).then(res => {}).catch(error => {})

注意：这里的url通过window.location.href.split('#')获取‘#’号前面的内容，然后进行编码传递给后台获取内容。这里只是实力，实际项目中可以把获取信息写在vuex actions中

3、微信分享配置

// 安装wx sdk
npm install weixin-js-sdk --save
// 组件中引入
import wx from 'weixin-js-sdk'
// 在mounted中配置
// appId,timestamp, nonceStr, singature都可以在接口中得到。
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})

wx.ready(function() { //通过ready接口处理成功验证
// config信息验证成功后会执行ready方法
    wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
        title: '这里是标题', // 分享标题
        desc: 'This is a test!', // 分享描述
        link: '链接', // 分享链接
        imgUrl: '图片', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
     })
     wx.onMenuShareTimeline({ //分享朋友圈
        title: '标题', // 分享标题
        link: '链接',
        imgUrl: '图片', // 分享图标
        success: function() {
            // 用户确认分享后执行的回调函数
        },
        cancel: function() {
            // 用户取消分享后执行的回调函数
        }
    })
})
wx.error(function(res){//通过error接口处理失败验证
    // config信息验证失败会执行error函数
})

我的配置代码，以及遇到的坑

data () {
    return {
      config: {
        url: encodeURIComponent(this.$store.getters.base_url),
        title: '项目名称',
        desc: '项目描述',
        img: 'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'
      },
      projectInfo: ''
    }
}
...
// 获取微信配置信息，通过后台接口。
    await this.$store.dispatch('getWechatConfigAction', encodeURIComponent(window.location.href.split('#')[0]))
    // alert(this.projectInfo)
    // // 接口获取界面内容
    // alert(JSON.stringify(this.config, null, 4))
    // alert(JSON.stringify(this.$store.state.wxConfig, null, 4))
    wx.config({
      debug: true,
      appId: this.$store.state.wxConfig.appId,
      timestamp: this.$store.state.wxConfig.timestamp,
      nonceStr: this.$store.state.wxConfig.nonceStr,
      signature: this.$store.state.wxConfig.signature,
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
    })
    wx.ready(() => {
      wx.onMenuShareAppMessage({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
      wx.onMenuShareTimeline({
        title: this.config.title, // 分享标题
        desc: this.config.content, // 分享描述
        link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
        imgUrl: this.config.imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
          this.$message({
            type: 'success',
            message: '分享成功'
          })
          // config.success()
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          // _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
          this.$message({
            type: 'success',
            message: '取消分享'
          })
          // config.cancel()
        },
        fail: function (res) {
          this.$message({
            type: 'error',
            message: '分享失败'
          })
          // config.fail()
        }
      })
    })
    wx.error(() => {
      console.log('请求分享数据失败')
      // config.fail()
    })

问题1：

// 配置完成以后弹出如下信息
{errorMsg: config: invalid signature}
// 这是因为请求配置信息的接口参数url有误，可以通过encodeURIComponent(window.location.href.split('#')[0])来获取

问题2：

// 配置完成以后弹出如下信息
{errorMsg: config: invalid url domain}
// 这是因为微信公众号设置中没有设置好，可以根据下图设置

完整代码

// 分享界面的代码

代码中获取配置信息，封装在了vuex的actions中，获取的配置信息存储在 $store.stat.wxConfig中，主要是传递参数url的配置。