微信二维码登录样式修改

Question

我在vue3+vite项目，微信二维码登录中遇到一个问题，
就是生成的二维码特别大，我这里不知道怎么更改其样式
这是我的代码，如果我想更改里面的样式应该怎么做呢

<template>
  <div>
    <div @click="back" class="back">返回</div>
    <div id="codes"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const back = () => {
  router.push({
    path: '/login'
  })
};

// 实例微信js对象
const setWxerwma = () => {
  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  // s.src = '/assets/wxLogin.js'
  const wxElement = document.body.appendChild(s)
  wxElement.onload = function () {
    var obj = new WxLogin({
      id: 'codes',// 需要显示的容器id
      appid: '唯一ID',
      scope: 'snsapi_login',
      redirect_uri: '地址',
      state: Math.ceil(Math.random() * 1000000),
      style: 'black',// 提供"black"、"white"可选。二维码的样式
      href: ''// 外部css文件url，需要https
    })
  }
}

onMounted(() => {
  console.log('二维码界面');
  console.log(window.location.href);
  setWxerwma()
})
onUnmounted(() => {
  // 清除动态创建的脚本
  const wxScript = document.getElementById('wxScript');
  if (wxScript) {
    wxScript.parentNode.removeChild(wxScript);
  }
});
</script>

Answer 1

@CHARSET "utf-8";
.impowerBox .qrcode { width: 180px; margin-top: 15px; border: 1px solid #E2E2E2;}
 
 
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<div id="for_weixin_login" style="position:fixed;right:0;top:80px;"></div>
<script>
var obj = new WxLogin({
                              id:"for_weixin_login", 
                              appid: "wxccrfdcf461bddv5b", 
                              scope: "snsapi_login", 
                              redirect_uri: "https://www.2ciyun.com/weixincallback.php",
                              state: "<{$state}>",
                              style: "",
                              href: "https://www.2ciyun.com/css/weixin.css"
                            });
</script>

来源：

微信扫描二维码登录网站---href设置二维码大小_wxlogin如何改变大小-CSDN博客 文章浏览阅读1.4w次，点赞4次，收藏7次。苦逼之人，必有苦逼之处：来段代码提提神微信文档中的参数说明是：href中挑一个自定义的样式链接；我那个擦啊 ；样式啥的文件都给弄好了 ；结果微信这个二维码死活没有效果。百度出来的解决方案少之又少；终于有人写了一行小字。herf要在公网上。就是说本地测试的时候。这个herf不能填本地的路径。人家是一个公网的路径。自定义微信css代码：@CHARSET_wxlogin如何改变大小 https://blog.csdn.net/u010235716/article/details/50763791