解决难点
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的网址,但由于单页应用的路由特殊,其中涉及到的iOS和Android的微信客户端浏览器内核的差异性导致的兼容问题
JS-SDK签名
官网所述的是
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需要调用一次,对于变化url的SPA的web app可在每次url变化时进行调用
vue中路由history和hash两种模式;在history模式下,理想的设计方案是,当进入到需要用到JS-SDK组件时,获取以下当前url(也就是通过location.href.split('# “)[0]获得到的地址)传递到服务端进行签名,应该就没问题了,但是IOS获取的URL并不是调用微信JS的时候所在页面的地址,而是进入到网站第一个页面的地址。
请观察如下表格:
注意history模式下的IOS设备坑点
浅坑 - 微信分享
如果使用hash模式,分享出去的地址,微信会自动处理掉#后边的部分,会干扰对hash的正常解析,从而影响页面跳转。
例如我的分享链接为
var shareUrl = 'https://www.xxx.com/#/product?id=7'
安卓显示正常
var shareUrl = 'https://www.xxx.com/#/product?id=7'
但是在IOS中,页面的URl后的值被截取掉了,页面因为无法获取值而无法显示
var shareUrl = 'https://www.xxx.com/?from=timeline#/product?id=7'
解决方案
- 检测分享页是否有场景值,有就干掉重新加载页面
- static文件夹下新建一个中间页,中间页过滤掉没用的URL参数,再跳回分享页