项目场景:
公众号网页开发 请求微信授权 调用微信SDK 扫一扫 相机/相册接口
问题描述:
项目在安卓上顺利运行 在iOS 无法调起微信SDK 报错为签名错误
原因分析:
在安卓能跑通 说明后端的签名算法正确 问题还在前端
百度发现 微信浏览器中 iOS使用的wkwebview内核 不会对vue-router反应 只记录了第一次进入页面地址 微信授权放在APP.vue中 使用localtion的属性或方法强行重置历史记录 会导致APP.vue刷新 页面不停循环跳转 走不通
因此判断在iOS设备上 使用第一次进入地址去配置config 但是还是签名错误 继续寻找问题所在
之后各种手动配置URL 还是报错 因为项目需要获得微信用户授权 第一次进入页面时 后面跟着授权参数 所以iOS因此应该是记录了此时带着授权参数的URL
解决方案:
无意间发现某位博主的代码片段 对授权参数进行了转码 encodeURIComponent()
配合安卓iOS环境判断 对iOS使用第一次进入地址并对授权参数转码 成功
第一次进入地址存储localStorage.setItem("url",location.href);
需要调用jssdk的地方,获取验签之前:
let url = "";
if(appSource() == "ios"){
url=localStorage.getItem("url")
}else{
url = location.href;
}
let encodeUrl = encodeURIComponent(url);
this.$axios
.wxGet("/wx/config?url=" + encodeUrl)
.then(res => {
if (res.code == 0) {
let a = res.data;
console.log(a)
wx.config({
debug: false,
appId: a.appId,
nonceStr: a.nonceStr,
signature: a.signature,
timestamp: a.timestamp,
jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表,所有JS接口列表
});
wx.ready(() => {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["barCode", "qrCode", "datamatrix"], // 可以指定扫二维码还是一维码,默认二者都有
success: res => {
let result = res.resultStr;
console.log(result);
let formdata = new FormData();
formdata.append("roomid", this.roomid);
formdata.append("tpcode", result);
this.$axios
.wxPost("/wx/tp/tick/scan", formdata)
.then(twoRes => {
if (twoRes.code != 0) {
this.$toast.fail(twoRes.message);
} else {
this.$toast.success("扫码成功");
}
})
.catch(() => {
this.$toast.fail("请重试!");
});
}
});
});
wx.error(res => {
console.log("微信JS 配置失败000");
console.log(res);
});
} else {
this.$toast.fail(res.message);
}
})
.catch(res => {
this.$toast.fail(res.message);
});