在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继承之为什么要继承
Nov 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
原生js实现滑块区间组件
Jan 20 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Mac下安装vue
2018/04/11 Javascript
详解vue组件基础
2018/05/04 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python uuid模块使用实例
2015/04/08 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python实现飞行棋游戏
2020/02/05 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
给老师的道歉信
2014/01/11 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
导游词300字
2015/02/13 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
python本地文件服务器实例教程
2021/05/02 Python
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技