问题描述
vue项目在微信公众号通过js-sdk调用扫一扫,安卓可以正常使用,ios则报非法签名,刷新页面后才可以成功调用。
解决过程
1、通过百度得知,在vue项目中,push的跳转不能被写入ios微信浏览器的地址栏,需要将push跳转改为window.loaction.href
跳转 ,window.loaction.href
跳转才能改变地址栏的变化,才能签名成功。
2、更改跳转方式后,仍然没有解决问题。通过微信右上角复制的页面链接和使用location.href
获取的链接对比,发现二者并不一致。location.href
获取的链接多了一个参数:VNK=1933df22
,这个参数是因为使用了vue-navigation
插件自动加上的。
3、最后的解决方式如下,通过在beforeRouteEnter
中判断进入的路由和当前location.search
是否都含有VNK
参数,如果不一致,则重写地址栏
// 在需要调wxapi的页面写
beforeRouteEnter(to,from,next) {
const { VNK } = to.query;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS && location.search.indexOf(VNK) < 0) { // 微信分享静态页面
// 此处不可使用location.replace
location.assign(to.fullPath)
} else {
next();
}
},