用vue做微信公众号调用js-sdk遇到的问题
问题1（JS-SDK在IOS中报签名无效invalid signature）
解决办法
在VUE路由进去你要操作的页面时进行config接口注入
首先打开工程文件中的router/index.js
IOS系统的config接口注入
关于isIOS 和requestWxStr方法说明
import wx from 'weixin-js-sdk' // 这个时JS-SDK的一个插件具体使用百度下
import api from '../../../API/API'// 接口
// 提取出来的公共方法
/*
* 判断是否IOS环境
* */
export default {
isIOS () {
let isIphone = navigator.userAgent.includes('iPhone')
let isIpad = navigator.userAgent.includes('iPad')
return isIphone || isIpad
},
requestWxStr (topath) {
// alert(location.href)
// 需要用到接口的页面
var params = {
// 'urlName': `${location.href.split('.com')[0]}.com${topath}`
'urlName': location.href.split('#')[0]
}
// alert(params.urlName)
api.WechatAPI.WechatPayPageDate(params).then(res => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: [
'openLocation',
'chooseWXPay',
'chooseImage',
'uploadImage'
]
})
wx.error(function (res) {
// 注册失败
console.log('注册失败')
this.$toast.fail('请返回上一层')
alert('请返回上一层')
})
})
}
}
安卓项目的Confing接口注入
（吐槽下，安卓感觉直接在页面注入没有一点毛病，比IOS好用多了）
安卓机型的话 直接在created中进行confing接口注入就行了，做个判断就行了是IOS就不用做了
methods: {
// 跳转页面
GOpage (toUrl) {
if (toUrl !== null) {
if (toUrl === 'TakingPictures') {
console.log('进来拍照了')
this.TakingPictures()
return
}
this.$router.push({path: toUrl})
}
},
// 拍照
TakingPictures () {
this.$toast('拍照')
let _this = this
this.$wx.ready(function () {
_this.$wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
console.log(localIds)
},
cancel: function (res) {
},
fail: function (res) {
// _this.$toast.fail(res.msg)
_this.$toast.fail('加载中。。。')
_this.reload() // 调用假JS-SDK 失败重新刷新页面，则会congfig会注入成功
}
})
})
},
// 注入配置
wechatconfig () {
let params = {urlName: window.location.href.split('#')[0]}
// 该接口在那个页面使用
// let params = {urlName: window.location.href}
this.$api.WechatAPI.WechatPayPageDate(params).then(res => {
this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: ['chooseImage']
})
})
}
},
created () {
// 是不是IOS端 就开始注入配置
if (!JSSDKHlep.isIOS()) {
console.log('我不是IOS用户，我在注册需要的接口')
this.wechatconfig() // 注入微信配置
}
}
就算这样写 ，IOS系统的手机中的微信公众号有时候也会抽风，突然就签名无效的错误，JS-SDK就不能用了
发现刷新当前页面后，就正常了。于是我就想到了如果调用JS-SDK时失败了，就刷新页面。就可以重新调用了
刷新页面的 参考资料点击
亲自测试了没效果。。。这个刷新
—2020年6月17日更新
最后发现是async 异步搞得。 不用就好了。。。
–2020年7月30日更新
上述操作太麻烦了。而且有几率性报错。目前使用的方法是IOS微信公众号签名报错