invalid signature微信sdk报签名错误

3,082 阅读1分钟

背景

  • 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('分享到给朋友成功')
              // 设置成功
            }
          })