vue PC端微信扫码登录

我用的element，要是在弹窗里面使用，还是用自定义弹窗比较好，据说用官方的el-dialog会出不来。上代码：

1. 在index.html页面里面引入对应的脚本

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2. 只需要在弹窗里面给一个装二维码的div就好了，即（login_container）用来显示动态生成的二维码

<template>
	<div class="qr-code">
	  <div id="login_container"></div>
	</div>
</template>

3. 初始化一下方法

getWXQRCode() {
  let redirectUri = encodeURIComponent(window.location.href);
  var obj = new WxLogin({
    self_redirect: false, // 这个为true的时候是直接在扫码的区域展现页面，我不需要，所以直接写false
    id: "login_container", // 我在上面定义的id名称
    appid: "xxxxxxx", // 申请的网站应用appid
    scope: "snsapi_login", // 网页授权，目前网页只有这一种方式，静默授权
    redirect_uri: redirectUri, // 申请网站应用时填写的回调域名，这里对应即可
    state: Math.random(), // 简单的随机数+Session用来校验，
    style: "", // black、white两种可以选择，二维码样式（默认black）
    href: "", // 自定义样式链接，只能使用https链接或者base64编码的地址(修改二维码的样式，要经过base64位转码，地址为（https://the-x.cn/base64/）)
  });
},

这些都弄完发到服务器上就可以自动出现动态的二维码了，可惜不能在本地调，只能多发几次慢慢调就行了。

4. 接下来就是拿到返回路径的参数；当使用微信客户端扫码后在手机端点击确认时，会更新地址，并且会在地址上带参数code和state，直接取code传给后端，后端通过传过去的code生成返回参数给前端即可完成登录；代码如下：

getWechatCallbackInfo(code) {
  // 授权成功后重新获取URL地址，并去掉参数留下纯地址（要是不去掉下次获取的参数会直再次加上）
  let callbackUrl = window.location.href,
      callbackUrlLength = callbackUrl.indexOf("?"),
      newUrl = callbackUrl.substring(0, callbackUrlLength);
  if(code) {
    const PCScanParams = {
      wechatCode: code
    }
    postWechatLogin(PCScanParams).then(result => {
      console.log(result)
      window.location.replace(newUrl) // 先将拿到的地址替换然后过一秒后再重新载入页面
      setTimeout(() => {
        window.location.reload();
      }, 1000)
    })
  }
}

OK，以上简单的登录流程就完成了。