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

前端小菜鸟，因为项目要对接微信的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); }})

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