首先了解微信扫码登录的流程和详解，详见微信扫码登录，这边仅是vue前端相关流程
一.创建微信登录按钮及方法，配置相关参数
1.创建微信登录按钮
<!--微信授权登录按钮-->
<img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信扫码登录</a>
2.配置登录相关参数，跳转微信登录二维码授权页面
// 跳转微信登录二维码授权页面
handLoginByWx() {
// 重定向地址重定到当前页面，在路径获取code
const hrefUrl = window.location.href
// 判断是否已存在code
if (!this.code) {
// 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
window.location.href = `
https://open.weixin.qq.com/connect/qrconnect
?appid=APPID
&redirect_uri=${encodeURIComponent(hrefUrl)}
&response_type=code
&scope=snsapi_login
`
}
}
3.进行扫码授权确认
手机扫码二维码确认授权
4.回调
由于vue这边有路由守卫，故相关获取回调返回的code值在路由守卫中进行处理
// 为微信授权登录重定向地址服务
var temp = (to.path).split('&')
var pram = temp[1]
var item = pram.split('=')
var code = item[1]
// 重定向到微信登录页面并且将code值带上
next({
path: '/login',
query: { 'code': code }
})
5.登录页监听地址是否存在code
登录页面监听是否获取到微信授权返回的code值，若存在则调用后台提供的接口将code返回给后端