微信PC登录样式个性化处理详解

概述

近期做一个PC端微信扫码登录的需求，微信扫码有两种方式，一种是新开一个二维码页面，另一种是内嵌入产品网页。

第一种实现方式比较简单了，不会使用的可以看这里的开源项目 weixin_guide

两种实现方案官方详细介绍资料 戳这里直达

---

将二维码嵌入到自有产品页

下面介绍第二种实现方式将二维码嵌入到自有的产品网页

代码如下

qrcode.css 代码如下

@charset "UTF-8";
.impowerBox .qrcode {width: 150px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 150px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;} 

默认二维码大小如下图

遇到问题

你有注意到上面CSS样式二维码的大小吗？ 宽高都是设置的是150px

为啥没有生效呢！！！！二维码特别大不说,还有微信登录的title,也有扫码登录的提示嵌入到已有网页当然是不个性化的。(默认二维码大小280x280)

解决思路

怎么办呢？怎么办呢？怎么办呢？

就在不经意间点击了审查去查看样式为啥不生效就发现以下这个错误说明

href加载css样式的链接必须要使用https

但是问题又来了,怎么搭建https请求的环境呢？ 不会的可以参考 全站开启Https时代 这篇文章。

如果你觉得麻烦这里提供另外一种解决方案。

通过访问data-url解决样式问题

写一个Node.js 脚本(qrcode.js)将刚才的css资源转换为data-url。
具体代码实现为：

var fs = require('fs');
function base64_encode(file) {
 var bitmap = fs.readFileSync(file);
 return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./qrcode.css'))

Mac 电脑可以使用brew安装Node.js,命令如下

brew install node

运行node脚本node qrcode.js，复制打印出来的data-url，然后赋值给刚才的href。

稍作样式调整去掉title以及底部的提示。详细的html代码如下

最终效果图如下

广而告之

如果此文章对你有帮助请举起您的大拇指点赞:)

• IJPay 让支付触手可及。开源项目已接入微信、支付宝、银联支付。

• 极速开发微信公众号从入门到精通