自定义微信登录扫码样式解决方案(微信扫码注册怎么做)

最近需要做一个PC端的微信扫码登录。微信扫码有两种方式，一是打开新的二维码页面，二是嵌入商品页面。以嵌入式二维码为例。如何在页面中显示一个登录二维码，文档中已经很清楚了，这里就不赘述了。

解决自定义微信二维码样式的问题。一切就绪后，网页上的二维码默认是这样的。特别大(默认二维码大小280x280)，微信登录的标题。下面还有扫码登录的提示。好在微信留了个api给我们自定义风格的机会。当实例化一个二维码之前，实例对象中的href属性允许设置样式。

var obj = new WxLogin({ id: ；登录容器 ，appid: ；"，范围: "，redirect _ uri: ；"，状态: "，风格: "，href: ；../QR code . CSS ；//就是这个属性})；不幸的是，当样式文件的地址被传递到href中时，将会报告一个错误。似乎微信只是出于安全考虑才允许访问https资源。所以现在采用了第二种方案，data-url。

通过访问data-url解决风格问题。写一个nodejs，脚本会把刚才的css资源转换成data-url。具体代码实现如下:

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

var obj = new WxLogin({ id: ；登录容器 ，appid: ；"，范围: "，redirect _ uri: ；"，状态: "，风格: "，href: ；数据:text/CSS；base64，lmltcg 93 zxjcb 3 gglnfyy 29 kzsb 7d 2 lkdgg 6 idiwmhb 4 o 30 NCI 5 PBB xbv D2 vyqm 94 IC 50 axrszsb 7 zglzcgxhetogbm 9 uztt 9 dquoaw 5 mby 7d 2 lkdgg 6 idiwmhb 4 o 30 NCI 5 zdgf 0 dxnfawnvbib 7 zglzzzgxhetpub 25 lf Q0 klmltcg 93 zjcb 3 ggl nn 0 yx R1 cyb 7dg//data -URL })；注意这里的MIME类型，一定要返回text/css。自定义二维码:

相关教程:

微信登录的一些新收获

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

生成javascript二维码的两种方法

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

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

• 帝国cms如何解决截图黑边问题（帝国cmsping插件）
• 帝国cms如何解决一次只能上传20个文件的问题（帝国CMS有几千万数据）
• 如何解决帝国cms后台无法登录的问题（帝国cms移动终端）
• WordPress登录失败？这五个步骤帮你解决！（wordpress登录门户）
• 解决wordpress中的常见错误:页面加载缓慢的分析和解决方案（为什么WordPress如此卡死）

本文由主机参考刊发，转载请注明：自定义微信登录扫码样式解决方案(微信扫码注册怎么做) https://zhujicankao.com/81178.html