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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
layui原生表单验证的实例
Sep 09 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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 如何利用phpexcel导入数据库
2013/08/24 PHP
php开启openssl的方法
2014/05/15 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
JS常用算法实现代码
2016/11/14 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
社区党建工作汇报材料
2014/10/27 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL