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

发表时间：2020-10-16

发布人：葵宇科技

浏览次数：163

项目场景：

公众号网页开发请求微信授权调用微信SDK

问题描述：

在这里插入图片描述

项目在安卓上顺利运行在iOS 无法调起微信SDK 报错为签名错误

原因分析：

在安卓能跑通说明后端的签名算法正确问题还在前端
百度发现微信浏览器中 iOS使用的wkwebview内核不会对vue-router反应只记录了第一次进入页面地址微信授权放在APP.vue中使用localtion的方法或方法强行重置历史记录会导致APP.vue刷新页面不停循环跳转走不通
因此判断在iOS设备上使用第一次进入地址去配置config 但是还是签名错误继续寻找问题所在
之后各种手动配置URL 还是报错因为项目需要获得微信用户授权第一次进入页面时后面跟着授权参数所以iOS因此应该是记录了此时带着授权参数的URL

解决方案：

无意间发现某位博主的代码片段对授权参数进行了转码 encodeURIComponent()
配合安卓iOS环境判断对iOS使用第一次进入地址并对授权参数转码成功
以下贴上完整代码

在 src/router/index.js 里监听路由变化

router.afterEach(async (to) => {
  let baseLocation = "http://www.xx.cn"//自行改为项目地址
  if (window.__wxjs_is_wkwebview) { // 通过此属性判断IOS
    if (window.entryUrl == '' || window.entryUrl == undefined) {
      var url = baseLocation + encodeURIComponent(to.fullPath)
      window.entryUrl = url
    }
  } else { // 安卓
    window.entryUrl = baseLocation +
      to.fullPath
  }
  sessionStorage.setItem("url", window.entryUrl) //直接在使用页面 用来请求接口配置config
})

2.使用页面可以直接调这个函数

// 微信配置
get_config() {
	this.url = sessionStorage.getItem("url");//读取地址
	this.$axios.get(`xx?zz=${this.url}`).then((res) => {//此处自行配置接口地址
		console.log(res, "微信配置");
		if (res.code == 200) {
			wx.config({
				debug: false, // 这里一般在测试阶段先用true，等打包给后台的时候就改回false,
				appId: res.data.appId, // 必填，公众号的唯一标识
				timestamp: res.data.timestamp, // 必填，生成签名的时间戳
				nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
				signature: res.data.signature, // 必填，签名
				jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表 根据你的需求自行写入
			});
		}
	});
},

以我调用的扫一扫举例

wx.ready(() => {
	wx.checkJsApi({
		jsApiList: ["scanQRCode"],
		success: function (res1) {
			console.log("成功", res1);
		},
		fail: function (res1) {
			console.log("失败", res1);
		},
	});
	wx.scanQRCode({
		needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
		success: (res) => {//注意这里写法 微信官方默认为es5写法 这里获取不到this 需改为箭头函数或者提前保存this等方法
		// var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
		},
	});
});
wx.error(function (res) {
	console.log(res, "失败");
});