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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
js自制图片放大镜功能
Jan 24 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
小程序click-scroll组件设计
Jun 18 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保存信息到当前Session的方法
2015/03/16 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
中职生自荐信
2013/10/13 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
离婚协议书怎么写
2015/01/26 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang