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

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

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

在vue中哪里获取code？

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

我们去请求微信网址"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 五分钟变化一次；

如果没有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 （随便填）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现微信获取用户信息的方法

    本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号才会有该字段)传给后端,记录点赞人的相关信息 微信网页授权 1.微信公众号网页授权配置,详见官网 2.关于网页授权的两种scope的区别说明 (详细见官网) -scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面,不需要用户操作 -scope=snsapi_userinfo 获取微信用户详细信息(

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

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu

  • 关于vue中watch检测到不到对象属性的变化的解决方法

    关于vue中watch检测到不到对象属性的变化的解决方法

    前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda

  • vue 授权获取微信openId操作

    1.获取url中参数code: 根据code 获取openId:调用后台接口获取openId . 参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 function getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(l

  • spring boot+vue实现JSAPI微信支付的完整步骤

    spring boot+vue实现JSAPI微信支付的完整步骤

    目录 微信支付 微信支付前的准备 后台开发 vue前端 总结 微信支付 最近公司要在微信公众号上做一个活动预报名,活动的门票等需要在微信中支付. 微信支付前的准备 微信支付需要一个微信支付商务号(https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal),请自行去商务平台申请.商务号申请完后,需要在 “微信公众号平台–>微信支付” 中接入.接入成功后还需要在 “微信公众号平台–>设置–>公众号设置–>

  • Spring Boot中的微信支付全过程(小程序)

    Spring Boot中的微信支付全过程(小程序)

    目录 前言 一.申请流程和步骤 二.注册商家 2.1商户平台 2.2商户id 三.API私钥(支付密钥) 四.商户签约微信支付产品 五.配置回调地址 六.小程序获取APPID 七.微信支付与小程序绑定 八.实战部分 8.1SpringBoot框架搭建 8.2微信支付相关接口 8.2.1小程序用户登录接口 8.2.2统一下单接口 8.2.3创建订单接口 8.2.4取消订单接口 8.2.5订单详情接口 8.2.6支付回调接口 前言 微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握

  • 详解vue中使用微信jssdk

    首先,确保你安装了weixin-js-sdk. 如果还没有安装  npm install weixin-js-sdk 在页面中 import wx from 'weixin-js-sdk'; 接下来,就需要在mounted里面进行wx.config()了. 由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数,ajax请求我这里使用的axios this.axios({ method: 'post', url: 'http://my.service.co

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • 如何在Android App中接入微信支付

    如何在Android App中接入微信支付

    本篇简单介绍Android App中接入微信支付,包括App内支付和扫码支付.分享+支付 pofei 微信支付 wechat 官方接入文档 App内支付 源码下载 主要流程: 1.微信支付平台注册账号​ 注:注册并申请成功以后,需要在API安全中设置你的API密钥 32个字符.建议使用 MD5加密 ,并且需要妥善的保存.因为无法查看. 2.生成预支付订单 3.生成签名参数 4.调起微信,完成支付 扫码支付 扫码支付使用的是微信统一下单API ,使用的是模式二,模式一 一直说URL参数错误,完全按

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

随机推荐