Vue 内嵌微信登录二维码及修改默认样式

1. index.html 引入微信官方提供的js文件

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

2.需要内嵌二维码的页面中

// template 代码
        <div id="wxcode">
        </div>

// methods 代码
    createWxQrcode() {
      // 生成微信登录二维码
      var obj = new WxLogin({
        self_redirect: true,
        id: "wxcode", // 页面显示二维码的容器id
        appid: "wxbdc5610cc59c1631", // 微信官方提供的测试id
        scope: "snsapi_login",
        redirect_uri: encodeURI("https://passport.yhd.com"), // 微信官方中的测试地址
        state: "bind",
        style: "black",
        href: "",
      });
    }

// mounted中挂载
  mounted() {
    this.createWxQrcode();
  },

 3.修改默认样式，微信登录和底部文字都是默认和二维码一起生成的。

步骤：

 >样式css代码转为Base64，转换网站：base64解码 base64编码 在线base64解码/编码工具 (ip138.com)
>转换后的编码放入，obj中的href选项. href格式： 'data:text/css;base64, 转换后的代码'

 

    createWxQrcode() {
      // 生成微信登录二维码
      var href = 'data:text/css;base64,LmltcG93ZXJCb3gge2Rpc3BsYXk6IGZsZXg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMycHg7IGhlaWdodDogMjMycHh9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQ=='
      var obj = new WxLogin({
        self_redirect: true,
        id: "wxcode",
        appid: "wxbdc5610cc59c1631",
        scope: "snsapi_login",
        redirect_uri: encodeURI("https://passport.yhd.com"),
        state: "bind",
        style: "black",
        href: href, // 这里修改微信二维码默认样式
      });
    },

改了一半的截图：

下面的提示字可用这行代码转为Base64去除： .impowerBox .info {display: none;}

最终结果：

 微信官方文档地址：准备工作 | 微信开放文档 (qq.com)