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) { // IOSif (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
- 为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法,
看完路由模式了,就来进入逻辑部门,来看看如何处理
有同学疑惑这个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()这样的写法,一样的效果
到了这一步就基本上是请求签名成功,但是有同学疑惑,那么IOS每次分享的时候会不会是进去的第一个路由,我的回答是会的(需要稍加处理)
- 重点关注再与这个link,需要在每次分享的时候记录当前的路由,如果直接读location.href在IOS端的时候会是第一次进入的页面。安卓则没有问题,所以我统一采用我记录的这个参数,这个参数可以直接在方法传递过来,路由afterEach的to.fullpage,然后再加上自己的域名就OK了
最后写几句话,希望大家都能顺便解决一下BUG,也希望能对大家有所帮助,如果遇到一些其他的问题,欢迎评论区留言,只要有时间就会及时跟大家交流探讨!
VUE解决微信签名,SPA微信invalid signature问题,完美处理相关推荐
- 微信公众号config:invalid signature签名失效
做微信公众号项目时,在调用SDK的时候,经常会出现config:invalid signature签名失效的问题,下面来介绍一下出现问题的原因以及解决方法. 出现的原因,我只从前端方面做一下介绍,如果 ...
- uni-app+uniCloud开发微信公众号H5网页如何使用云函数计算jssdk的签名,以及invalid signature 和 realUrl的问题
前天突然接到一个小活儿,客户的要求很简单,但要求快速上线 这时候uniCloud的优势就出来了,不用考虑服务器的事儿,直接走前端托管即可 但中间遇到的坑是真的多 下边一个个来说 首先,uni-app本 ...
- php微信签名_PHP微信接口签名算法
一.参数说明 二.安全规范 1.签名算法 签名生成的通用步骤如下: 第一步,设所有发送或者接收到的数据为集合M,将集合M内非空参数值的参数按照参数名ASCII码从小到大排序(字典序),使用URL键值对 ...
- ios不行安卓可以 微信签名_微信支付-支付验证签名失败(iOS)
在项目中添加微信支付,iOS端的所有东西都已经按照文档搞好了,可就是跳转到微信的时候显示"支付验证签名失败",可是安卓端的都没有问题,就很郁闷了. 后来在对文档的时候发现... 6 ...
- android 微信签名,Android微信签名知识的总结
前言 最近遇到一个项目的应用要上微信登录,大家都知道微信登录是需要开放平台上申请的,在微信开发平台创建移动应用后,需要填写: 需要填写的内容 问题 这里的应用签名是keystore的证书的md5,但是 ...
- vue 解决:Syntax Error: ValidationError: Invalid options object. Sass
一.首先是node版本跟node-sass.sass-loader版本的冲突 本人的node版本 16.14.0 解决: 1.先把node_modules和package-lock.json 删除, ...
- C# 微信JS-SDK之config接口注入权限验证invalid signature签名错误
文章目录 1.开发环境 2.我的代码 3.问题描述 4.问题分析 5.问题根源 6.解决办法 记一次使用微信JS-SDK分享接口,config接口注入权限验证失败, 提示invalid signatu ...
- vue3实现微信公众号一次性订阅消息+ios和Android的63002 config:invalid signature问题
微信开放文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23 微信 JS 接口签 ...
- 【微信支付】微信端的手机网页支付 开发流程
-----------------------------------------------------------------------------------------------1.微信 ...
最新文章
- /lib64/libc.so.6: version `GLIBC_2.14' not found问题
- C#实现快速重命名JPEG文件
- Xilinx FPGA,“加速”视频质量提升
- 2018.3.24 struct
- java调用js查询mongo_mongodb操作之使用javaScript实现多表关联查询
- java 数据结构_Java数据结构学习方法
- selenium API(二)
- swift中高阶函数map、flatMap、filter、reduce
- 在UITextView显示HTML,以及NSAttributedString乱码问题解决 swift
- vim中替换字符串的方法有哪些
- 微信小程序发送模板消息详细教程
- Java生成简单的验证码图片
- python 黎曼猜想_黎曼猜想简析
- 大数据实训整体解决方案
- Android应用安全
- Java基础系列28-常用api之包装类
- 手把手教你自制555芯片
- HTTP和URL详细分析
- 水仙花数(c语言程序实现)
- 音乐app用户推荐系统构建_一款专门给用户推荐动听音乐的音乐期刊类的应用。画面极简优美...
热门文章
- PHP开发中,让var_dump调试函数输出更美观 ^_^#
- POJ1276Cash Machine
- 翻译-高质量JavaScript代码书写基本要点(转载)
- Moss/Sharepoint 一些很重要的API备忘
- ROS_Kinetic ubuntu 16.04
- 使用VS2010调试技巧让C指针无处遁形
- FFmpeg中可执行文件ffplay用法汇总
- 设计模式之建造者模式(生成器模式、Builder)摘录
- 【Qt】Qt编码风格、命名约定
- 【Qt】通过QtCreator源码学习Qt(十一):Utils::Icon,根据不同主题、不同状态变换图标