获取vue中的微信支付码及码被占用问题的解决方案

这个地方坑多，网上也没有详细的文档，新手在这里写很痛苦。在这里我只介绍我的解决方案，虽然不是最好的，但是可行；

分为两步：1)跳转到微信支付链接，会自动拼接代码2)获取该网站并拦截代码；

在哪里可以获得vue中的代码？

在每个之前进入路由钩子函数。如果你想知道beforeEach的用法，请关注我的下一篇博客。

我们问问微信网站‘https://open . weixin . QQ.com/connect/oauth 2/authorize？appid=' appid ' redirect _ uri=' spa ' response _ type=code scope=snsapi _ base state=123 #微信_ redirect '；

它会自动带来代码，我们会截取代码，把代码传到后端，后端会得到opinid。

如果是微信登录，我们会要求后台验证界面验证是否登录，获取登录返回信息，保存本地或vuex；

如果是微信支付，我们也要求后台接口。此时，代码可能会提示被占用。我们需要在每次之前再次输入代码。官方文件说代码每五分钟更改一次；

如果没有判断If条件，会反复跳转登录(包括登录的代码获取，请留言通知知道的人)，支付页面定义window.localstorage.getitem('真实代码')。

这样，当你得到代码时，整个过程都会经历。但是我们拿到代码后，有时候会用手机返回按钮，它会跳转到微信拿到代码的网站，很烦。我们要听挂载钩子功能中的物理返回按钮，跳转到指定页面；虽然暂时解决了问题，但是体验不是很好，有一种闪屏的感觉；

遇到的坑是：付款闪过

1)原因很多，比如目录配置是否正确，比如http://element.eleme.io/应该写成http://element.eleme.io/#/zh-CN/component/

2)签名错误。我们对此无能为力。是后台方法写错了，查了很久；

另一个坑是请求URL的转义问题：

需要从redirect_uri回调地址中转义特殊符号。如果你真的不知道百度可以逃网，就把网址抄进去；

不能省略重定向uri的前缀http://

response _ type=代码(请求返回的代码)

Scope=snsapi_base snsapi_base只能获取access_token和openID(静默授权)；Snsapi_userinfo可以获得更详细的用户信息，

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

状态=123(只需填写)

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