前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信PC登录样式个性化处理详解

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

作者头像
Javen
发布2018-08-21 11:32:19
1.5K0
发布2018-08-21 11:32:19
举报
文章被收录于专栏:酷玩时刻

概述

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

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

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


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

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

代码如下

代码语言:javascript
复制
<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 代码如下

代码语言:javascript
复制
@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。 具体代码实现为:

代码语言:javascript
复制
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,命令如下

代码语言:javascript
复制
brew install node

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

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

代码语言:javascript
复制
<!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>

最终效果图如下

广而告之

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.01.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 将二维码嵌入到自有产品页
  • 遇到问题
  • 解决思路
  • 通过访问data-url解决样式问题
  • 广而告之
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档