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 相关文章推荐
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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学习之数据类型之间的转换介绍
2011/06/09 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
网页自动跳转代码收集
2009/09/27 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python正则表达式使用范例分享
2016/12/04 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
自荐信模版
2013/10/24 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
2014年检验科工作总结
2014/11/22 职场文书
旷课检讨书范文
2015/01/27 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
公司人力资源管理制度
2015/08/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS