主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
最近需要做一个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二维码的两种方法
这就是自定义微信登录扫码样式的解决方案的细节。请多关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 教你如何自定义微信小程序的底部导航栏(如何给微信小程序添加底部导航)
- 自定义微信登录扫码样式的解决方案(自定义微信登录扫码样式的解决方案是什么)
- 微信如何创建自定义目录的示例(微信如何创建自定义位置)
- Win11如何自定义颜色
- 微信创建自定义目录的方法示例(微信创建自定义目录的方法示例图片)
本文由主机参考刊发,转载请注明:自定义微信登录扫码样式解决方案(微信扫码注册怎么做) https://zhujicankao.com/81178.html
评论前必须登录!
注册