解决了单页应用中非入口页配置jssdk时invalid signature报错问题。如果非单页应用或者入口页报错,本文不适用。
项目背景:
IOS环境,vuecli开发的单页应用。
业务逻辑为:A页面->B页面->C页面。需要在C页面调用微信jssdk。
因为业务关系,路由守卫方式并不合适。
解决方法:
目标:xxx.com/#/b -> xxx.com/#/c
页面跳转时使用 window.location.href 或 window.location.replace 方式进行跳转。
但是由于#之前的地址没有改变,所以就算使用页面跳转的方式浏览器也并不会真正的刷新,所以需要拼接一个随机字符串进行强制刷新:
结果:xxx.com/#/b -> xxx.com/?random=123456#/c
代码实现:
// 页面b的methods
// 页面跳转方法
toC() {
// 获取设备信息并判断是否是ios
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
// ios系统就拼接随机字符串
window.location.replace("/?random=" + this.randomNum(10000, 99999) + "#/c");
} else {
window.location.replace("/#/c");
}
},
// 随机字符串生成方法
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(
Math.random() * (maxNum - minNum + 1) + minNum,
10
);
break;
default:
return 0;
break;
}
},