网页微信扫码登入

有两种处理方式
一种是后端去处理微信登入 我们只需要他的网页链接用来打开小窗口，可以用接口的形式去获取这个wx的网页扫码链接 这个链接我们用window.open 去打开这个链接就行了

可以做个判断  如果已经wx扫码弹框了 就关闭弹框重新开一个
 if (this.newWindow != null) {
        this.newWindow.close();
      }

   webWx(obj).then((res) => {
        let url = res.data;
        const screenWidth = window.screen.width;
        const screenHeight = window.screen.height;
        const width = 600;
        const height = 600;
        const left = (screenWidth - width) / 2;
        const top = (screenHeight - height) / 2;
        const target = "_blank";
        const features = `width=${width},height=${height},left=${left},top=${top}`;
        this.newWindow = window.open(url, target, features);
        // 这里就可以监听小窗口里  是否有传值给我们
        window.addEventListener("message", this.listenerMessageFn);
      });

设置小窗口居中 扫码成功后小窗口里 后端需要返回一个html页面 这个html页面的功能只有一个 就是跳转到我们用来接收后台消息的页面，并且把需要回填的数据放在地址栏里 我们自己去接收

//  后端返回的html页面会跳转到我们这个前端的页面 比如页面名就叫wxLogin 页 
//  去接收后端给我们的参数值
// 然后把数据用postMessage传给login页  只能是同源的页面才可以传值  同一个前缀地址名
<template>
  <div>
    wxlogin
  </div>
</template>

<script>
export default {
  mounted(){
    let obj = {
        status:this.$route.query.status,
        token:this.$route.query.oken,
        result:this.$route.query.result
    }
    let url 
    const isProduction = process.env.NODE_ENV === 'production'
    if(isProduction){
        url = window.location.origin
    }else{
      url = 'http://192.168.0.xxx:80xx'
    }
    window.opener.postMessage(obj, url +'/login');
  }
}

 listenerMessageFn(event) {
      // 确保数据来自于窗口扫码页面
      if (event.source === this.newWindow) {
        const data = event.data; // 扫码页面发送的数据
        // 关闭扫码页面
        this.newWindow.close();
        if (data.result) {
        //  result值 是json字符串这个也是后端传给我们的  根据里面的值去做登入的操作
          let result = JSON.parse(data.result)
        }
        if (data.status == "0") {
          // 失败状态 需要注册绑定微信 显示绑定页面
          this.isShowWxRegister = true;
          ELEMENT.Message.warning("微信未绑定,请绑定微信");
          // 不管失败还是成功  都要取消监听 
          window.removeEventListener("message", this.listenerMessageFn);
        } else if (data.status == "1") {
          // 成功状态
          window.removeEventListener("message", this.listenerMessageFn);
          setToken(data.hycooby_token);
          this.$store.commit("user/SET_TOKEN", data.hycooby_token);
          this.$store.commit("user/SET_LOGIN_STATUS", true);
          this.$store.commit("userdata/SET_TIMEZONE");
          this.$router.push("/teacher");
          ELEMENT.Message.success("登入成功");
        }
      }
    },

第二种 就是 前端来做微信登入 这个可以嵌入到页面中 就是提供一个div 里面就是wx去添加一个ifname

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
这个是官网的地址
里面有具体的操作

引入 wx的 sdk
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

实例化 具体的参数 还需去官网查询  bilibili上也有好多这样的视频  是前端去实现微信二维码登入
 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

redirect_uri 就是你要跳转的地址 是wx去做跳转的操作 扫码完成后，跳回来的链接上会带上code
一般来说 收到code 后 就请求自己的接口 用这个code 传给后端 后端在返回token 然后登入页面