项目场景:
公众号网页开发 请求微信授权 调用微信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.full