vue微信登录

一.引入js
index.html引入js

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

二.微信二维码容器

<template>
    <div class="try-page">
        <div v-show="tabs == 'code'" id="login_container" class="try-form"></div>
    </div>
</template>

三.配置
href为二维码base64样式,redirect_uri为回调地址

  mounted() {
    var that = this;
    var obj = new WxLogin({
      self_redirect: false,
      id: "login_container",
      appid: that.$store.state.app.appid,
      scope: "snsapi_login",
      style: "white",
      redirect_uri: that.$store.state.app.redirect_uri,
      href:
        "data:text/css;base64,LmltcG93ZXJCb3gge2xpbmUtaGVpZ2h0OjIuMn0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4MHB4O21hcmdpbi10b3A6MzBweDtib3JkZXI6MH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO2NvbG9yOiNjY2N9IAouaW1wb3dlckJveCAuc3RhdHVzIHA6bnRoLWNoaWxkKDIpe2Rpc3BsYXk6bm9uZX0=",
    });
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容