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);
  }
})

• window.entryUrl这个是什么鬼？这个是本身定义的全局属性，就是为了获取IOS第一次进入页面的时候存储起来的，若是IOS的签名的路径不是第一次进入的页面，那么就必定会失败，因此这个路由第一次进入就要储存起来
• 为何要写在router.afterEach，由于页面进入了再去作申请和签名，若是在beforeEach，会致使页面申请签名的时候仍是上一个页面，可是到了新页面却没有注册签名，或者由于签名的路径不一样，致使invalid signature
• 为何安卓的时候要增长一个延时器，由于安卓会存在一些状况，就是即使签名成功，可是仍是会唤不起功能，这个貌似是一个比较稳妥的解决办法，

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

• 有同窗疑惑这个encodeURIComponent是干吗用的，其实具体很简单，就是由于咱们在微信分享的时候，会自动给咱们带上参数(记得告诉后端的伙伴要decodeURIComponent),切记只要带参数就必定要转码！

  对于IOS系统会自动增长以下参数：
  朋友圈 from=timeline&isappinstalled=0
  微信群 from=groupmessage&isappinstalled=0
  好友分享 from=singlemessage&isappinstalled=0
  
  对于安卓系统会自动添加以下参数：
  朋友圈 from=timeline
  微信群 from=groupmessage
  好友分享 from=singlemessage

• 而后就直接去请求签名，写法就不深究，getWeChat是封装的axios，只是为了统一管理才这么写，你们能够写成正常的请求axios('xxxx.com/get-wx',obj).then()这样的写法，同样的效果

到了这一步就基本上是请求签名成功，可是有同窗疑惑，那么IOS每次分享的时候会不会是进去的第一个路由，个人回答是会的(须要稍加处理)

• 重点关注再与这个link，须要在每次分享的时候记录当前的路由，若是直接读location.href在IOS端的时候会是第一次进入的页面。安卓则没有问题，因此我统一采用我记录的这个参数，这个参数能够直接在方法传递过来，路由afterEach的to.fullpage，而后再加上本身的域名就OK了

最后写几句话，但愿你们都能顺便解决一下BUG，也但愿能对你们有所帮助，若是遇到一些其余的问题，欢迎评论区留言，只要有时间就会及时跟你们交流探讨！