微信iOS浏览器 单页应用(SPA) jssdk失效的bug

    JavaScript

最近在vue的spa开发中使用到 jssdk, 遇到了不少坑。 总算填上了吧。下面说说一些jssdk 签名失败的问题,以及微信的签名分享的一些说明你。

问题描述

环境:iphone
开发: vue-cli hash模式
直接从连接点击进入页面,jssdk调用成功。 如果先进入其他页面,再点击进入则提示 signatrue: failed。

其实也就是: iphone下,jssdk的调用只对 landingPage 有效,对通过spa跳转的URL 是无效的。举个例子:

微信直接通过链接或者菜单访问 aa.com/a/,此时的landingPage 为aa.com/a/.

然后通过该页跳转到 aa.com/b/, 在b页面进行jssdk调用的时候,微信会认为当前的URL仍然是a,也就是a仍然是landingPage,此时将location.href作为jssdk请求的URL发送,会出现signatrue失败的提示。

但是,如果直接通过链接或者菜单访问 aa.com/b/ 就会成功。 此时的landingPage 就变成了 aa.com/b/

而在安卓下则规则正常。也就是当前URL是啥微信就会怎么判断。 不管是直接点进来还是通过landingPage进行跳转。

解决方案

其实上面的原理 也是根据测试进行反推的。 既然知道了原理,就有了解决的办法。

在router.afterEach() 中,判断如果为ios设备则去取 sessionStroage中的landingPage,若为空则说明当前页面即为landingPage,保存该url。
然后在需要调用jssdk的地方,判断若为ios设备,则取sessionStroage的值,否则取location.href

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//从其他页面进入列表页
router.afterEach((to, from, next) => {
//判断是否为着陆页
if ( navigator.userAgent.toLowerCase().indexOf('iphone') !== -1 && !sessionStorage.getItem('landingUrl')){
sessionStorage.setItem('landingUrl', location.href);
}

}

//然后再需要调用jssdk初始化的位置对url赋值
let url = location.href;
if (navigator.userAgent.toLowerCase().indexOf('iphone') !== -1){
url = sessionStorage.landingUrl;
}

通过以上方法即可实现 ios和安卓在 spa的hash模式下 兼容分享的问题。

页阅读量:  ・  站访问量:  ・  站访客数: