Vue SPA应用微信开发踩坑记录

解决难点

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参数，再跳回分享页