IOS 配置 微信 JS SDK 报 invalid signature签名错误

微信扫一扫,分享到朋友圈

IOS 配置 微信 JS SDK 报 invalid signature签名错误

问题场景: SPA单页面应用, vuejs router, 微信WebView网页下给 JS SDK API 做 签名,报错

  1. 项目基于vue,在微信上的web应用
  2. 要使用原生系统某些功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位, 设置分享….
  3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以)

具体表现:

项目使用 vue 开发微信手机网页端,获取从后端传来的 微信配置信息, android 端 能够配置正确并能 正常调用 微信提供的js api。 但是 在 ios 上 报 签名错误,重新刷新页面又能正确配置 微信的 config, 再次刷新页面又报 签名错误,

直接上解决代码

if (window.__wxjs_is_wkwebview) { // IOS, 签名地址,固定是入口地址,不是路由跳转地址
window.entryUrl = window.location.href
}
router.afterEach((to, from) => {
// window.__wxjs_is_wkwebview
// true 时 为 IOS 设备
// false时 为 安卓 设备
if (window.__wxjs_is_wkwebview) {  // IOS
// 什么也不做
}else {       // 安卓, 签名地址,每次都变动
window.entryUrl = `${window.location.origin}${to.fullPath}`
}
})

后端做签名的时候, url encode 一下, 使用 window.entryUrl 而不是 window.location.href

问题的原因:

苹果微信App, 签名失败是因为: 苹果在微信中浏览器机制和安卓不同,有 IOS缓存问题,和IOS对单页面的优化问题,

安卓进行页面跳转分享时会刷新当前的history url,而苹果不会;

如果苹果下的微信App是通过vue router即H5的historyState历史记录进来的,不会刷新url所以会导致签名失败

问题来了: vue的history在IOS的微信不会刷新,但是我们又要做js签名。

有很多做法, 比如 beforerouteEnter的路由判断,或者写在Vue.prototype.Wxshare()的原型链中

微信下能检测内核的判断:window.__wxjs_is_wkwebview(是否为webview内核),如果是的情况下就变成true

因为SPA应用下,会有一定的问题,路由采用的是history模式(不带#号)。因为在页面每次进入到路由之后才去获取签名授权,所以将方法公用写在路由的模块下

window.entryUrl这个是什么鬼?这个是自己定义的全局属性,就是为了获取IOS第一次进入页面的时候存储起来的,如果IOS的签名的路径不是第一次进入的页面,那么就一定会失败,所以这个路由第一次进入就要储存起来

为什么要写在router.afterEach,因为页面进入了再去做申请和签名,如果在beforeEach,会导致页面申请签名的时候还是上一个页面,但是到了新页面却没有注册签名,或者因为签名的路径不同,导致invalid signature

安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能, 增加一个延时器或者页面mounted之后再签名一次比较稳妥

题外话

分享的跳转地址会携带一下参数

对于IOS系统会自动增加如下参数:
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
对于安卓系统会自动添加如下参数:
朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage

微信扫一扫,分享到朋友圈

IOS 配置 微信 JS SDK 报 invalid signature签名错误

第六届“i创杯”互联网创新创业大赛决赛在宁开幕

上一篇

大发物业不忘初心,用心服务让爱传递

下一篇

你也可能喜欢

IOS 配置 微信 JS SDK 报 invalid signature签名错误

长按储存图像,分享给朋友