pc端网站实现扫码微信授权登录

微信官方文档：微信登录功能 / 网站应用微信登录开发指南 (qq.com)

1. 生成二维码 注：在html文件中引入res.wx.qq.com/connect/zh_…

    var obj = new WxLogin({
      self_redirect: false,//true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
      id: "login_container",//第三方页面显示二维码的容器id
      appid: "",//应用唯一标识
      scope: 'snsapi_login',
      redirect_uri: encodeURIComponent(""),//重定向地址，需要进行UrlEncode。回调网址需要是在开放平台上注册的应用地址
      state: "",
      style: "",
      href: "",
    });
   

2.扫码后的回调,回调回来的时候，地址上会有code参数。通过code获取用户信息(openId)

    const cIndex = url.indexOf("?code=");
    if (cIndex != -1) {
          //微信授权
          let code = url.substring(cIndex + 6);
          code = code.substring(0, code.indexOf('&'));
          if (code) {
            const res = await toLogin({
              code: code
            });
            if (res.token) {
              //已经跟平台账号绑定了，可以直接存入登录信息，使用
            } else {
              //没有和平台账号绑定，可以进行绑定操作
              let openId = res && res.rows ? res.rows.openId : '';
              this.$router.push({
                path:'/bindOpenId',
                query:{
                  openId
                }
              })
            }
          }
         }