微信扫码登录功能

首先了解微信扫码登录的流程和详解，详见微信扫码登录，这边仅是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 }
      })