在vue中获取微信支付code及code被占用问题的解决方法


Posted in Javascript onApril 16, 2019

这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦。这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案;

总体分两步
1)跳到微信支付链接,它会自动拼接上code
2)获取本网址,截取code;

在vue中哪里获取code?

在路由钩子函数beforeEach获取。(如果想了解beforeEach的用法,请关注我下一篇博客)。

在vue中获取微信支付code及code被占用问题的解决方法

我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appid +"&redirect_uri=" + spa +
"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";

它会自动带上code ,我们在去截取到code,把code 传给后端,后端便可以拿到opinid.

如果是微信登录,我们会去请求后台验证接口验证是否登录,拿到登录返回信息,保存本地或者vuex;

如果是微信支付,我们同样去请求后台接口,此时code可能提示被占用,我们需要在beforeEach 中重新获取一遍code,官方文档说code 五分钟变化一次;

在vue中获取微信支付code及code被占用问题的解决方法

如果没有if条件的判断,它会反复跳正在登录中(包括登录的code获取也是,谁知道请留言告知一下),window.localStorage.getItem('realCode') 是定义在支付页面。

这样拿到code整个流程就通了。但是我们去获取code后,有时会用手机返回键,它又会跳到微信获取code的那个网址,这样就很烦了,只好在mounted钩子函数监听物理返回键,跳到指定的页面;虽然问题暂时解决了,但是体验感觉不是很好,有种闪屏的感觉;

其中遇到的坑有:支付一闪而过

1)原因找了很多,像目录是否配置正确,如:http://element.eleme.io/ 需写成http://element.eleme.io/#/zh-CN/component/

2) 签名错误 这个没办法了。是后台的方法写错了,排查了好久;

还有一个坑就是请求网址的转义问题:

redirect_uri 回调地址中需要把特殊符号转义掉,如果实在不知道可以百度在线转义,把网址复制进去就可以了;

redirect_uri的前缀http://不能省略

response_type=code (请求带回来的code)

scope=snsapi_base snsapi_base只能获取access_token和openID (静默授权); snsapi_userinfo可以获取更详细的用户资料,

比如头像、昵称、性别等(需要点击授权)

state=123 (随便填)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JavaScript实现星级评分
Jan 12 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
快速处理vue渲染前的显示问题
Mar 05 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 #Javascript
理理Vue细节(推荐)
Apr 16 #Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python输入错误后删除的方法
2019/10/12 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
python 下划线的不同用法
2020/10/24 Python
Python的logging模块基本用法
2020/12/24 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
C++是不是类型安全的
2014/02/18 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
军训自我鉴定200字
2014/02/13 职场文书
高中同学会活动方案
2014/08/14 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书