概述
近期做一个 PC 端微信扫码登录的需求,微信扫码有两种方式,一种是新开一个二维码页面,另一种是内嵌入产品网页.
第一种实现方式比较简单了,不会使用的可以看这里的开源项目 weixin_guide
两种实现方案官方详细介绍资料 戳这里直达
将二维码嵌入到自有产品页
下面介绍第二种实现方式将二维码嵌入到自有的产品网页
代码如下
<body>
<div id="login_container"></div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
var obj = new WxLogin({
id: "login_container",
appid: "这里添加web应用的appId",
scope: "snsapi_login",
redirect_uri: "http://xx/xx/oauth/webCallBack",
state: "6666",
style: "black",
href: "http://xx/static/CSS/qrcode.css"
});
</script>
</body>
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 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
PC扫码登录
</title>
<style type="text/css">
html { overflow: hidden; } body, div { padding: 0; margin: 0; font-size:
12px; color: #646464; border: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="login_container" style="position: absolute; top: -20px; left: -90px;height: 160px">
</div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">
</script>
<script type="text/javascript">
var obj = new WxLogin({
id: "login_container",
appid: "这里添加web应用的appId",
scope: "snsapi_login",
redirect_uri: "http://xx/xx/oauth/webCallBack",
state: "6666",
style: "black",
href: "data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDEzMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAxMzBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30gCg=="
});
</script>
</body>
</html>
最终效果图如下
来源: http://www.jianshu.com/p/588ec979e4c0