解决公众号开发 安卓正常 iOS调微信SDK失败 签名错误

457 阅读1分钟

项目场景:

公众号网页开发 请求微信授权 调用微信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);
        });