问题描述:ios真机从公众号进入系统,无法调起扫一扫并报错。安卓正常,模拟器正常,模拟器预览iOS直接扫描也正常调起,只有iOS真机情况不正常
代码:
handleScanClick() {
const _this = this
debugger
let url = location.href
wxConfigInfo(url).then(res => {
if (res) {
//wx.config的配置
window.wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.timeStampStr + '', // 必填,生成签名的时间戳
nonceStr: res.nonceStr + '', // 必填,生成签名的随机串
signature: res.signature, // 必填,签名,见附录1
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
alert(location.href)
window.wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
console.log(res.resultStr, '扫描的结果~')
const result = res.resultStr.split(',')[1] // 当needResult 为 1 时,扫码返回的结果 scanCode
_this.scanCode = result
_this.$toast('您扫描成功,追溯码为' + result)
},
error: function(response) {
_this.$toast(response)
alert(response)
console.log('出错了:' + res.errMsg)
}
})
window.wx.error(function(res) {
console.log('出错了:' + res.errMsg)
alert('出错了:' + res.errMsg) //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
})
}
})
}
记录本次问题的解决方案(PS:我看大多数并没有解决,也给后来者一些启示,有一说一,官方的运维贼不靠谱,回复的问题驴头不对马嘴)
本次解决方案采用了VUE路由的hash模式,不是history模式(PS:ios一直没法通过验证,就很烦,也没找到解决方案)
1.创建一个空白页面进行重定向,就干这么一件事 mounted() { let http = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXX&redirect_uri=web地址&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect' location.href = http } 2.获取权限以后跳转到首页在解析地址,为了解析{地址/?参数#/路由} => {地址/#/路由?参数}的问题 mounted() { let httpUrl = decodeURI(window.location.href) let url = httpUrl.replace('#/feature', '') if (httpUrl.includes('top/?code')) { // url包括 com/?code 证明为从微信跳转回来的 let index = url.indexOf('top/') + 4 // 获取域名结束的位置 let urlLeft = url.substring(0, index) // url左侧部分 let urlRight = url.substring(index + 1, url.length) // url右侧去掉?部分 let result = urlLeft + '#/feature?' + urlRight.replace('?', '&') console.log(result) window.location.href = result } else { this.getUrlParams(decodeURI(window.location.href)) } } methods: getUrlParams: function(url) { let _this = this let redirectUrl = 'http://wechat.xxx.top/#/feature' let http = url || redirectUrl let params = {} http.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => params[k] = v) // eslint-disable-line // 没有携带参数 if (JSON.stringify(params) === '{}') { let http = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=http%3A%2F%2Fwechat.xxx.top%2F%23%2Ffeature&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect' window.location.href = http } // 携带了参数 else { if (params.code) { setWxCode(params.code) // 判断当前是否有token,如果有直接获取菜单,没有就获取token if (getToken()) { _this.getWXUser() } else { _this.getTokenInfo(params.code) } } else { alert('没有获取到Code') } } }, 下面就调用就好,也没啥特殊的东西了,具体参考两篇文章,结合一下,就这么点东西弄了十来天 文章一: https://blog.csdn.net/zlw_spider/article/details/104180222 文章二: https://www.cnblogs.com/ljx20180807/p/10132760.html
你好,我是微信的技术人员。看到你这边提供了规避方案。请问可以提供一个可以复现原问题的路径吗,我这边排查下。谢谢。
1. 问题1:wx.config时参与签名的url和微信这边二次校验的url不一致,所以签名失败,进而wx.config失败。
在使用vue等框架修改页面history的时候,容易踩这种坑,在修改history之后的页面进行wx.config时,参与签名的url必须使用主页面url,不能使用修改history之后的url。
在这个反馈的case中,应该使用主页面的url,即:http://wechat.zoomwang.top/feature?code=xxx&state=STATE
不应该使用二级页面的url,即:http://wechat.zoomwang.top/QrCodeMerge
2. 问题2:开发者wx.config的签名有问题,和微信官方工具的签名不一致:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign,请自查下