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

概述

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

最终效果图如下

广而告之

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据之美

玩转 SHELL 脚本之:Shell 命令 Buffer 知多少?

1、问题: 下午有同学问了这么一个问题: tail -n +$(tail -n1 /root/tmp/n) -F /root/tmp/ip.txt 2>...

51660
来自专栏做全栈攻城狮

零基础学.NET电脑编程-多线程讲解 多线程软件设计 程序员

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉电脑编程软件开发C#技术。达到程序员的级别,可以进入公司进行软件编程开发。总目录:http...

14450
来自专栏从零开始学自动化测试

selenium+python自动化81-报告优化

一、 优化html报告 为了满足小伙伴的各种变态需求,为了装逼提示逼格,为了让报告更加高大上,测试报告做了以下优化: - 测试报告中文显示,优化一些断言失败...

48950
来自专栏phodal

编辑-发布-开发分离:git作为NoSQL数据库

动态网页是下一个要解决的难题。我们从数据库中读取数据,再用动态去渲染出一个静态页面,并且缓存服务器来缓存这个页面。既然我们都可以用Varnish、Squid这样...

221100
来自专栏晓晨的专栏

如何高效的编写与同步博客(二)- 快速发布到多个渠道

13930
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

7.扫码登录开发者工具,选择小程序,新建个项目,勾选【建立普通快速启动模板】,点击确定。

30320
来自专栏phodal

如何设计完善的构建系统,为日常开发提速一倍

在搭建开发环境的构建系统时,我们关注二点: 提高效率,对于大部分事务的自动化,如自动编译代码、自动重启服务。 代码质量,编码完成时,我们则转而关注于代码的质量。...

21370
来自专栏腾讯移动品质中心TMQ的专栏

iOS 逻辑自动化测试实践

在本文中,以iOS手机管家为例子,逻辑自动化测试的范围选定为 ObjectController 文件夹中的类,此文件夹中的类文件均为与 UI 无关的业务逻辑类。

67310
来自专栏24K纯开源

在Adobe Html5 Extension的使用Nodejs的问题

    之前为一个客户开发过一个基于Adobe Premiere的Html5扩展。原本是在Adobe Premiere Pro 2015下面进行调试开发的。一切...

9620
来自专栏北京马哥教育

setup.py即将下岗,PEP 518 说明继任者

33670

扫码关注云+社区

领取腾讯云代金券