invalid signature微信sdk报签名错误

背景

• vue-cli3
• 微信version 7.0.9

1、大坑之sdk的引入

• vue中如何引入weixin-js-sdk

• 官方github

  官方说明:

官方说明没屌用

正确用法:

        const wx = window.jWeixin || require('weixin-js-sdk')//window.jWeixin才能获取到

2、大坑之二签名错误

• wx.config之报invalid signature签名错误。

  sdk文档

下面的appInfo是后端反的数据。 类似getmpjs这种接口

注意这个url参数，需要用encodeURIComponent编码下，不然会报签名错误

wx.config({ // 设置微信参数
          debug: false,
          appId: appInfo.appId,// 必填，公众号的唯一标识
          timestamp: appInfo.timestamp, // 必填，生成签名的时间戳
          nonceStr: appInfo.nonceStr,// 必填，生成签名的随机串
          signature: appInfo.signature,// 必填，签名
          jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"]//这里使用到的方法 必填，需要使用的JS接口列表
        })

为什么要给url编码？ 参考

3、大坑之三——分享给朋友方法无效

• 新的无法使用，请使用废弃的方法。哎。。。实测。要用即将废弃的。

//分享给朋友 --旧版
          wx.onMenuShareAppMessage({
            title: fnProductObj.name, // 分享标题
            desc: fnProductObj.reason, // 分享描述
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: `${_this.$path}${fnProductObj.detailimg_url}`, // 分享图标
            success:()=> {
              //alert('分享到给朋友成功')
              // 设置成功
            }
          })