自定义微信登录扫码样式的解决方案（自定义微信登录扫码样式的解决方案是什么）

Pc端微信扫码登录最近需要做一个PC端微信扫码登录。扫码有两种方式，一种是打开新的二维码页面，另一种是嵌入产品网页。这次以嵌入式二维码为例，如何在页面中显示登录二维码非常清楚，我就不赘述了。

解决微信二维码样式自定义问题。一切准备就绪后，网页上的二维码默认情况下会是这样的。特别大（默认二维码大小为280x280），还有微信登录的标题，下面也有扫码登录的提示。幸运的是，微信给我们留了一个自定义样式的api。以前实例化二维码时，实例对象中的href属性允许我们设置样式。

var obj = new WxLogin（{ id:“log in _ container“，appid:““，作用域:““，重定向uri:““，状态:““，样式:““，href:“../QR code . CSS“//这是属性}）；不幸的是，在href中传递样式文件的地址会导致错误。似乎是出于安全考虑，微信只允许访问https资源。所以现在采用了第二种解决方案，data-url。

通过访问data-url编写一个nodejs来解决样式问题，脚本会将css资源转换为data-url。具体代码实现如下:

var fs = require（‘fs‘）；//将文件数据编码为base64编码字符串的函数function base64 _ encode（file）{//读取二进制数据var bitmap = fs . read file sync（file）；//将二进制数据转换为base64编码的字符串return‘data:text/CSS；base64，‘+新缓冲区（位图）。toString（‘base64‘）；} console . log（base64 _ encode‘。/QR code . CSS‘）运行节点脚本，复制打印的data-url，然后将其分配给刚才的href。

var obj = new WxLogin（{ id:“log in _ container“，appid:““，作用域:““，redirect_uri:““，状态:““，样式:““，href:“data:text/CSS；base64，lmltcg 93 zxjcb 3 gglnfyy 29 kzsb 7d lkdgg 6 idiwmhb 4 o 30 NCI 5 PBX bvd 2 vyqm 94 IC 50 axrszsb 7 zglzcgxhetogbm 9 uztt9 dq ouaw 1 WB 3 lckjvcauw 5 mby 7d lkdgg 6 idiwmhb 4 o 30 NCI 5 zdgf 0 dxnfawnvbib 7 zglzcggxhetpub 25 lf 0 klmltcg 93 zjcb 3 ggln 0 yx R1 cyb 7dg注意这里的MIME类型，确保返回text/css。自定义二维码:

相关教程:

微信登录的一些新成果

php二维码的制作和下载方法

javascript生成二维码的两种方法

以上就是自定义微信登录扫码样式的解决方案细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 教你如何自定义微信小程序的底部导航栏(如何给微信小程序添加底部导航)
• 微信如何创建自定义目录的示例（微信如何创建自定义位置）
• Win11如何自定义颜色
• 自定义微信登录扫码样式解决方案(微信扫码注册怎么做)
• 微信创建自定义目录的方法示例(微信创建自定义目录的方法示例图片)

本文由主机参考刊发，转载请注明：自定义微信登录扫码样式的解决方案（自定义微信登录扫码样式的解决方案是什么） https://zhujicankao.com/106017.html