场景:使用uniapp开发微信公众号网页,调用wx.scanQRCode()方法实现扫码功能,出现安卓手机正常扫码,苹果手机无法扫码,需要手动刷新页面后才可以扫码的问题。
点击菜单跳转路由的逻辑代码,最初是使用uni.navigateTo()
方法跳转,所以出现了苹果手机无法扫码,需要手动刷新页面才可以扫码的问题,后来改成了window.location.href
的方式跳转就解决了这个问题。
出现这个问题的原因主要是:跟你传给微信的url有关,微信会获取你的页面当前的url(即document.location.href)和你传给它的url做比较,当相同时,这个config才会成功,这个你可以通过在error函数里把信息alert出来判断出来。
所以你需要在路由切换时重新执行一次config。
而又由于在ios和android中,document.location.href在spa页面的机制不同(不同在于ios是只要不刷新页面,href就不会改变),所以你要对相应的系统做适配。
——参考文章:https://segmentfault.com/q/1010000011775457
goMenuItemPage(item, i) {
let url;
item.url ? url = item.url : url = `/pages/menuItem/menuItem?menuListId=${i}`
// uni.navigateTo({
// url
// })
// 跳转到扫码页面,使用window.location.href方式跳转,否则IOS系统wx.config会报错,说signature签名失败
window.location.href = url;
}
微信扫码的逻辑
wxScanCode() {
this.$u.api.getWxConfigInfo({
appId: this.vuex_appId,
url: window.location.href.split('#')[0]
}).then(res => {
this.wx = require('jweixin-module');
this.wx.config({
debug: false,
appId: res.data.data.appId,
timestamp: res.data.data.timestamp,
nonceStr: res.data.data.nonceStr,
signature: res.data.data.signature,
jsApiList: ["scanQRCode"]
});
this.wx.ready(() => {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
// 微信扫码
this.wx.scanQRCode({
needResult: 1, // 0:扫描结果由微信处理;1:直接返回扫描结果;
scanType: ["qrCode", "barCode"], // 扫码类型。qrCode:二维码;barCode:一维码;
success: res => {
if (res.resultStr.includes(',')) {
this.meterNo = res.resultStr.split(',')[1];
} else {
this.meterNo = res.resultStr
}
this.search();
},
error: err => {
console.log(err)
}
});
});
this.wx.error(err => console.log('扫码错误~~', err))
}).catch(err => {
console.log(err)
})
},