image.png

如何让上面这样的情况变成下面这种正常的。

第一步，需要后台给你提供一个接口来获取微信需要的验证用的参数

  // 微信二次分享获取参数
  wxSecondShareAct: async function (context) {
    let params = {
      shareUrl: location.href.split('#')[0] // 微信需要当前的url，由于我的链接上用了hash，所以只要前面的域名
    }
    let ownRes = await wxSecondShare(params).catch(e => console.log(e)) // wxSecondShare是接口，用来获取appId,timeStamp,nonceStr,signature这些参数
    if (ownRes.mag === '200') {
      context.commit('updateInfo', { // 保存更新进vuex的state里
        appId: ownRes.appId, // 必填，公众号的唯一标识
        timeStamp: ownRes.timeStamp, // 必填，生成签名的时间戳
        nonceStr: ownRes.nonceStr, // 必填，生成签名的随机串
        signature: ownRes.signature, // 必填，签名，见附录1
      })
    } else {
      console.log(ownRes.msg)
    }
    return ownRes.mag === '200'
  },

第二步开始验证，这个方法可以在第一步的成功回调里用，也可以分开，但是肯定是要在第一步后面的了，用async await就可以了

    // 微信二次转发
    wxHaveShareAct () {
      wx.config({
        debug: false,
// 下面的这些参数是从当前绑定的vuex的state里取的，随意什么方法都行，只要能取到参数
        appId: this.state.appId, // 必填，公众号的唯一标识
        timestamp: this.state.timeStamp, // 必填，生成签名的时间戳
        nonceStr: this.state.nonceStr, // 必填，生成签名的随机串
        signature: this.state.signature, // 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      let that = this
      wx.ready(function () {
        // alert('第一步成功了！！！')
        wx.error(function (res) {
          // alert('第一步出错了！！！')
        })
        let paramsJson = {
          'title': 你需要的title, // 分享标题
          'link': 你当前的链接, // 分享链接
          'imgUrl': 分享出来上的缩略图片, // 分享图标
          'desc': title下的描述, // 分享描述
          success: function () {
            // 用户确认分享后执行的回调函数
            // alert('第三步分享成功！！！')
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        }
        // 朋友圈
        wx.onMenuShareTimeline(paramsJson)
        // 分享给朋友
        wx.onMenuShareAppMessage(paramsJson)
        // 分享到QQ接口
        wx.onMenuShareQQ(paramsJson)
        // 分享到微博接口
        wx.onMenuShareWeibo(paramsJson)
      })
    },

不得不又想吐槽微信的文档，有的参数是驼峰有的又全是小写，有的甚至有下划线但是真正需要传的参数居然是驼峰，浪费了多少开发者的时间，欸