自定义微信扫码登录样式的实现方法

一个新手

发布： 2017-10-26 10:09:41

原创

3173人浏览过

最近公司pc端网站登录改版，新增加微信扫码登录。
文档微信扫码登录文档。
设置好后发现，微信自带的样式，码太大了，位置也不对，需要调整。

自定义微信扫码登录样式的实现方法

再看文档

微信文档 var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href: "../qrcode.css"//就是这个属性 });

上方的href，就可以引用咱们自己写的css文件。
但是官方规定，这个css文件，必须放在https协议的网站上，例如：

引用css
  href: "https://www.baidu.com/qrcode.css"
登录后复制

但是自家网站协议不是https。解决之道：
通过访问data-url解决样式问题
写一个nodejs脚本，将刚才的css资源转换为data-url。

具体方法:
1.新建文件夹，放入转换的js文件以及你自己写的css文件

自定义微信扫码登录样式的实现方法

Ex驾校预约小程序

传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

查看详情

change.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('./qrcode.css'))

登录后复制

2.打开终端,进入目录