详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
背景
手机型号：
型号：iphone7/iphonexsmax
版本：ios10.3.1/ios12.1
微信版本：WeChat6.7.3
问题还原：
Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalidsignature)，导致API调用失败。
问题根源
Vue-Router进行路由切换的时候，总是会操作浏览器的历史记录，从而响应页面URL变化。
在JSSDK文档页面有这么一句话:
同一个url仅需调用一次，对于变化url的SPA的webapp可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现webapp的页面会导致签名失败，此问题会在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方法
functionisIos(){
constu=navigator.userAgent;
returnu.indexOf("iPhone")>-1||u.indexOf("MacOS")>-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
}
}
...
关键点在于设置更新微信签名URL判断的地方：首次进入应用页面的时候肯定会触发更新，若是IOS且签名URL已经设置过了，那么就不需要更新设置了，只要不退出或刷新应用，缓存永远都会是首次进入页面URL。
2.路由守卫内触发更新签名URL
importstoreform"@/stores"
//获取真实有效微信签名URL
functiongetWechatSignUrl(to){
if(isIos()){
returnwindow.location.href;
}else{
//此处$appHost需要自行处理
return$appHost+to.fullPath
}
}
...
$router.beforeEach((to,from,next)=>{
store.commit("setWechatSignUrl",getWechatSignUrl(to));
})
...
在路由守卫内更新签名URL，保证IOS是使用当前页面URL，Android是使用目标路由完整地址再加上域名
3.使用签名URL调用JSSDKAPI
在使用JSSDKAPI的页面通过vuex取出缓存的微信签名URL，然后进行签名。
比如：
importstoreform"@/stores"
...
{
methods:{
initWechatShareConfig(){
constthat=this;
constwxSignUrl=store.getters['getWechatSignUrl'];
constwxShareConfigs={
//微信分享配置
}
//初始化微信分享
$wechat.share(wxSignUrl,wxShareConfigs);
}
}
}
...
$wechat.share是根据JSSDK文档二次封装的分享方法，内部是根据wxSignUrl先进行签名，然后再调用分享API
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。