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


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

需求: 使用微信的功能

原因:

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

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

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

签名

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

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

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

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

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

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

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
  • 为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法,
看完路由模式了,就来进入逻辑部门,来看看如何处理

VUE解决微信签名及SPA微信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()这样的写法,一样的效果

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

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

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

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

Javascript 相关文章推荐
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 #Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 #Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
You might like
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php以post形式发送xml的方法
2014/11/04 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP7变量处理机制修改
2021/03/09 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python dlib人脸识别代码实例
2019/04/04 Python
python通过http下载文件的方法详解
2019/07/26 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
TCP/IP的分层模型
2013/10/27 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS