web端微信扫码登录

1、添加容器

<div id="qrCode" />

2、微信开放平台配置

开放平台

3、生成二维码并监听路由

  mounted() {
    let url = "http://192.168.124.15:8080";
    const env = process.env.VUE_APP_BASE_API;
    if (env.includes("top")) {
      url = "https://";
    } else if (env.includes(".com")) {
      url = "https://";
    }

    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
    const wxElement = document.body.appendChild(s);
    wxElement.onload = function () {
      new WxLogin({
        self_redirect: false,
        id: "qrCode", // 需要显示的容器id
        appid: "",
        scope: "snsapi_login", // 网页默认即可
        redirect_uri: encodeURIComponent(url + "/yth/home/login"), // 授权成功后回调的url
        state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
        style: "white", // 提供"black"、"white"可选。二维码的样式
      });
    };
  },
  //监听路由可以检测返回的code
  watch: {
    $route: {
      handler: function (route) {
        this.loginForm.wechat_code = route.query.code || "";
        this.loginForm.login_type = "wechat";
        if (this.loginForm.wechat_code) {
          this.loginLoading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              if (res.code === 0) {
                this.factory = res.data.company;
                this.editorVisible = true;
                this.titlenmame = res.data.company;
                this.key = res.data.company[0].key;
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
              this.loginLoading = false;
            })
            .catch(() => {
              this.loginLoading = false;
            });
        }
      },
      immediate: true,
    },
  },