vue cli单页模式下偶尔报错 invalid signature 的错误

最近遇到一个需求是调用jssdk进行语音录制的功能,功能已经开发好了,只是经常偶然性的config会报报错,大部分是报invalid signature的错误,这个错误不是必现的,只是经常性地出现.后来发现了原因.

原因是使用了vue-router里面的history模式,这种模式下的url是不断变化的,而jssdk的在每一次url变化的时候都需要重新config,导致每一个跳转一个页面都需要重新去进行config,

而使用vue-router的默认模式,只是hash部分(#后面的内容)变化,这种变化是不需要重新进行config的

使用默认的vue-router的hash mode就可以,在根组件(一般是app.vue)里面配置config信息即可,代码如下

const wx = require('weixin-js-sdk')
// 配置微信 config信息
let data = {
  noncestr: 'Wm3WZYTPz0wzccnWsss',
  timestamp: +new Date(),
  url: window.location.href.split('#')[0],
  jsApiList: ['chooseImage', 'startRecord', 'playVoice', 'stopRecord', 'downloadVoice', 'uploadVoice', 'stopVoice']
}
// m6Get 是我自己封装的fetch方法
// 从后台获取appid和对应的signature
m6Get('getWechatSu', data).then((res) => {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: res.data.appid, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.noncestr, // 必填，生成签名的随机串
    signature: res.data.signature, // 必填，签名，见附录1
    jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
})

之后其他页面不用再进行config配置了,可以直接使用 :)