VUE解决微信签名及SPA微信invalid signature问题(完美处理)

2020-06-13 10:36:04易采站长站整理

前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大家有所收获,能够解决问题,如果解决不到,请麻烦在评论区留言,本文综合了所有的回答,才调试出来坑

需求: 使用微信的功能

原因:

1. 项目基于vue,在微信上的web应用

2. 要使用上传功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位….

3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以)

签名

1. 流程详细请看文档,反正能力有限,没看出什么名堂,总结一句话,要使用先签名

2. 开启填坑之路,由于微信使用会区分IOS和安卓系列,不同系列产生不一样的问题

(公司项目第一版的时候就给微信大坑过,所以本次重构的时候,就格外注意这一点)

安利一个在微信下能检测内核的判断:window.__wxjs_is_wkwebview(是否为webview内核),如果是的情况下就变成true

因为SPA应用下,会有一定的问题,路由采用的是history模式(不带#号)。因为在页面每次进入到路由之后才去获取签名授权,所以将方法公用写在路由的模块下


router.afterEach((to, from) => { // 伸手党福利
// window.__wxjs_is_wkwebview
// true 时 为 IOS 设备
// false时 为 安卓 设备
if (window.__wxjs_is_wkwebview) { // IOS
if (window.entryUrl == '' || window.entryUrl == undefined) {
var url = `${FRONT_BASE}${to.fullPath}`
window.entryUrl = url // 将后面的参数去除
}
getWxAuth(to.fullPath,"ios")
}else { // 安卓
setTimeout(function () {
getWxAuth(to.fullPath,"android")
}, 500);
}
})

window.entryUrl这个是什么鬼?这个是自己定义的全局属性,就是为了获取IOS第一次进入页面的时候存储起来的,如果IOS的签名的路径不是第一次进入的页面,那么就一定会失败,所以这个路由第一次进入就要储存起来
为什么要写在router.afterEach,因为页面进入了再去做申请和签名,如果在beforeEach,会导致页面申请签名的时候还是上一个页面,但是到了新页面却没有注册签名,或者因为签名的路径不同,导致invalid signature
为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法,

看完路由模式了,就来进入逻辑部门,来看看如何处理