vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > VUE 微信签名及SPA微信invalid signature

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

作者:大提子

这篇文章主要介绍了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);
 }
})
看完路由模式了,就来进入逻辑部门,来看看如何处理

有同学疑惑这个encodeURIComponent是干嘛用的,其实具体很简单,就是因为我们在微信分享的时候,会自动给我们带上参数(记得告诉后端的伙伴要decodeURIComponent),切记只要带参数就一定要转码!

对于IOS系统会自动增加如下参数:

对于安卓系统会自动添加如下参数:

然后就直接去请求签名,写法就不深究,getWeChat是封装的axios,只是为了统一管理才这么写,大家可以写成正常的请求axios('xxxx.com/get-wx',obj).then()这样的写法,一样的效果

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

重点关注再与这个link,需要在每次分享的时候记录当前的路由,如果直接读location.href在IOS端的时候会是第一次进入的页面。安卓则没有问题,所以我统一采用我记录的这个参数,这个参数可以直接在方法传递过来,路由afterEach的to.fullpage,然后再加上自己的域名就OK了最后写几句话,希望大家都能顺便解决一下BUG,也希望能对大家有所帮助,如果遇到一些其他的问题,欢迎评论区留言,只要有时间就会及时跟大家交流探讨!也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文