自定义/修改微信二维码样式

最新推荐文章于 2024-06-22 12:27:53 发布

hello_kking

最新推荐文章于 2024-06-22 12:27:53 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_42760581/article/details/103977083

在项目中，通过微信二维码实现登录和注册功能时，发现微信二维码的样式无法直接用CSS修改。查阅微信开发者文档后，了解到可以自定义样式。通过在href属性中指定样式文件URL，但本地URL会报错。解决方案是使用Node.js脚本将本地URL转换为https的data URL，运行脚本获取正确的href值，然后应用到二维码样式中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写项目的时候遇到的一个需求，登录和注册都可以通过扫描微信的二维码来实现，但是在做的时候发现微信有一些它自带的样式，并且无法通过CSS直接修改。

通过查微信的开发者文档发现是支持修改的

 wxHandle () {
      var obj = new WxLogin({
        id: "",
        appid: ,
        scope: "",
        redirect_uri: '',
        state: "",
        style: "",
        href: "xxx.css"//url地址
      });
    },

在实例化对象的 href属性中写入你的样式地址（例：把已经写好的样式放入xxx.css）即可，但是如果直接输入你的本地url地址会报错，所以需要把地址转换为https的。

解决方法

通过Node.js脚本转换地址，写一个node.js脚本

var fs = require('fs');
// function to encode file data to base64 encoded string
function base64_encode(file) {
 // read binary data
 var bitmap = fs.readFileSync(file);
 // convert binary data to base64 encoded string
 return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./xxx.css'))

然后运行路径下的node.js，就会打印出href:"data:text/css;base64开头的url，把打印出来的url，放到href里面即可。