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

Javen

发布于 2018-08-21 11:32:19

1.5K0

发布于 2018-08-21 11:32:19

文章被收录于专栏：酷玩时刻

概述

近期做一个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>

最终效果图如下