描述下问题就是vue单页面应用接入JS-SDK实现分享等功能(history模式副带的页面刷新问题和iOS、Android获取url方式不同的兼容问题)、做好微信的配置后,开始测试的时候发现除第一次进入的页面外iOS都签名失败,Android却每次都能正确签名。签名失败会导致非常尴尬的问题,分享出去就像这样:
因为有指定不同页面的分享,所以采用vue-router的history模式(如果使用hash模式,分享出去的地址微信会自动处理掉#后边的部分,这样分享出去的都是同一个页面,不能指定某个页面)。再看如何配置微信分享功能,官方是这样说的:
- vue-router切换的时候 都是操作的浏览器历史记录,真实URL为第一次刚进入时的URL。每次路由变化时都重新请求下签名,签名的URL 用第一次进入时的URL。
而history模式每次跳转利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,所以在每次路由url变化时都要重新调用一次api去注入实时的配置信息。
- 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)
我做了个简单的实验 ,在微信ios手机中有
A: http://www.xx.com、B: http://www.xx.com/B 两个页面
主页面是A页面,就一个按钮负责跳转b页面
<router-link to="/B">跳转B页面</>
点击A页面的按钮跳到B页面
获取当前B页面的window.location.href是http://www.xx.com/B
但是用微信自带的复制链接功能复制当前页面的链接还是http://www.xx.com
所以配置里面的link一定要与你页面url一致!
根据查阅的信息据说因为这些问题几年都无法解决,所以小程序应运而生,彻底解决了已上问题
解决问题的方法
1、beforeRouteEnter解决办法参考
或者用 vue-router 的beforeEach
vue组件中添加。
beforeRouteEnter(to, from, next) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS && to.path !== location.pathname) {
location.assign(to.fullPath) // 此处不可使用location.replace
} else {
next()
}
}
上面的方式等于刷新了页面,但是在我的项目中需要有跳转链接的统计埋点事件,所以我刷新页面会影响我统计不到我的埋点,所以我选择了下面的方式,我到现在我都没有理解后端做了什么配置,在某个项目,是可以的,我现在的项目却没有实现,大致问了下他们的解决办法就是
在你和后端同学对接的时候,获取jsSDK这个接口拿签名串的时候,编码encodeURIComponent(当前页面的链接),给他们,他们做了一个处理就是:
if(我们是否传了当前页面的链接){
用我们是传了当前页面的链接解码后作为验签的url
}else if(当前的请求是否有reffer){
用reffer作为验签的url
}else{
用域名作为验签的url
}
然后在把验签的url返回给我们方便我们查看是否一致
但是这样解决的话,还是会有问题,就是微信ios版复制当前的链接,永远是进单页面应用的第一个链接地址
这个办法在我的项目中没有实现,所以我最终采用下面的方式,最后完美解决,就留一个小bug,微信ios版复制当前的链接永远是进单页面应用的第一个链接地址
IOS:微信IOS版,微信安卓版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的 Android:微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
请求签名的url跟当前页面的url(location.href)对比明明是一样的!
解决方案:ios记录进入的第一个页面的链接window.entryUrl = location.href.split('#')[0]
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let iosURL=''
if (isiOS) {
iosURL='?referer='+encodeURIComponent(window.entryUrl)
}
继续分享的坑之旅,用第一个进入的url解决了ios上述的问题,发现又大量爆发了微信分享失效的问题,但是我抓包,开启debug模式,居然微信配置的config是ok,分享朋友debug模式也是报ok,说明我应该是可以的,but,事实是残酷的,屡次失败,我必须得找到原因,不然老大不高兴了,然后我就找,一个重大发现出来了,就是我的我打开的链接地址https://xxx.com,就是第一个页面ok,后面的也是ok,但是显示就是有问题的,但是https://xxx.com/带了斜杠的居然没有问题。我就问公众号的小哥哥,你入口的地址是不是填的https://xxx.com,果不其然
接下来,又有新的问题了,后退页面的时候config虽然配置了,但是他会用后退前的最后一个页面的分享文案