详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

背景

手机型号：

型号：iphone 7 / iphone xs max
版本：ios 10.3.1 / ios 12.1
微信版本：WeChat 6.7.3

问题还原：

Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalid signature)，导致API调用失败。

问题根源

Vue-Router进行路由切换的时候，总是会操作浏览器的历史记录，从而响应页面URL变化。

在JSSDK文档页面有这么一句话:

同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复

但根据多次测试情况来看，情况恰好相反，在Android下直接使用 window.location.href 得出的URL进行签名是完全没问题(可能已升级至Android6.2以上版本)，在IOS上就不行了。

这是因为在IOS上，无论路由切换到哪个页面，实际真正有效的的签名URL是【第一次进入应用时的URL】。

比如进入应用首页是: https://m.app.com，需要使用JSSDK的页面A是：https://m.app.com/product1/123，无论从首页进入到A页面之前，中间跳转过多少次路由，最终签名有效的URL还是首页URL。

解决方案

方案一

直接粗暴处理方式:

在进入需要使用JSSDK页面(B)的前一个页面(A)，即 A > B，直接使用 window.location.href 或 window.open 打开B页面，此时因为B页面是直接刷新方式进入，所以当前B页面URL无论IOS或Android都是可以直接拿来签名的。

这种方式处理缺点也很明显，如页面刷新抖动太厉害不够平滑过渡，再比如B页面需要从vuex中取出缓存信息，如果这些缓存信息不是通过vuex保存在localstorage的话，取出来的肯定都是空的。

方案二

思路：既然IOS仅可使用第一次进入应用的URL来签名，那么在vuex上缓存一个微信签名URL，IOS保存第一次进入应用的URL，Android则缓存为每个页面的URL。签名时，直接从缓存拿出签名URL来处理。

// 全局判断是否IOS方法function isIos(){ const u = navigator.userAgent; return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;}

1. 定义vuex缓存

...{ state: {  wechatSignUrl: "" },  mutations: {  setWechatSignUrl(state, wxSignUrl) {   // 关键点   // IOS仅记录第一次进入页面时的URL   // IOS微信切换路由实际URL不变，只能使用第一进入页面的URL进行签名   if (isIos() && state.wxSignUrl !== '') {    return;   }   state.wxSignUrl = wxSignUrl;  } },  getters: {  getWechatSignUrl: (state) => state.wxSignUrl }}...