Vue.js - PC端微信网页授权流程 - 前端需要做些什么

首先参考微信开放平台的网站应用微信登录开发指南；

准备工作
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。
在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

获取到appid之后，使用微信二维码登录有两种方式，

第一种是跳转到开放平台域名下的二维码登录页面，用户进行扫码登录，

第二种是将二维码内嵌到应用网站，用户进行扫码登录。

1、跳转到开放平台域名下的二维码登录页面的方式：

// 点击按钮跳转点击按钮跳转
window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect'

redirect_uri为回调链接，由后端提供给前端

2、将二维码内嵌到应用网站的方式：

步骤1：在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：

var obj = new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "", 
  scope: "", 
  redirect_uri: "",
  state: "",
  style: "",
  href: ""
});

redirect_uri为回调链接，由后端提供给前端

引入远程js的方法：

mounted () {
  const wxJs = document.createElement('script')
  wxJs.type = 'text/javascript'
  wxJs.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  document.body.appendChild(wxJs)
},
beforeRouteLeave (to, from, next) {
  document.body.removeChild(wxJs)
  next()
}

tips：用户扫码授权后，进入回调页面，由后端完成与微信开放平台间的数据请求后，重定向回到前端页面链接，链接后面带上参数，然后前端截取链接后面的参数，请求后端接口，进行登录操作，例子如下：

beforeRouteEnter (to, from, next) {
  next(vm => {
    if (JSON.stringify(vm.$route.query) === '{}') {
      console.log('没有参数')
    } else {
      // 使用this.$route.query截取链接后面的参数，请求后端接口
      vm.pWxLogin()
    }
  })
},