vuecli网站实现微信扫码登录

1.在public文件夹index.html引入微信登录

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

2.html部分

 <div class="mt-3 d-flex align-items-center justify-content-center">
          <div id="erwei"></div>
 </div>

js部分

<script>
export default {
  name: "Login",
  props: {},

  data() {
    return {,
      appid: "",
      redirectUrl: "",
    };
  },
  created() {
    var that = this;
    var wx = function () {
      //这里向后端请求数据
      that.appid = "";
      that.redirectUrl = "";//重定向地址
      that.abb();
    };
    wx();
  },
  mounted() {},
  methods: {
    //微信登录
    abb() {
      this.$nextTick(() => {
        var obj = new WxLogin({
          self_redirect: true,
          id: "erwei", // 这个id就是页面元素的
          appid: this.appid,
          scope: "snsapi_login", //应用授权作用域
          redirect_uri: this.redirectUrl,
          // state: this.state,//用于保持请求和回掉的状态
        });
      });
    },
  },
};
</script>