vue cli單頁模式下偶爾報錯 invalid signature 的錯誤

最近遇到一個需求是調用jssdk進行語音錄製的功能,功能已經開發好了,只是常常偶然性的config會報報錯,大部分是報invalid signature的錯誤,這個錯誤不是必現的,只是常常性地出現.後來發現了緣由.

1. 緣由是使用了vue-router裏面的history模式,這種模式下的url是不斷變化的,而jssdk的在每一次url變化的時候都須要從新config,致使每個跳轉一個頁面都須要從新去進行config,

2. 而使用vue-router的默認模式,只是hash部分(#後面的內容)變化,這種變化是不須要從新進行config的

3. 使用默認的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
  })
})

1. 以後其餘頁面不用再進行config配置了,能夠直接使用 :)