微信扫码登录自定义样式

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

微信扫码登录现在几乎是每个网站必备的登录方式.
网站应用微信登录开发指南

官方文档中介绍了两种登录方式：1、url跳转；2、内嵌

url跳转

url跳转至一个新页面，效果如下：

内嵌

页面内嵌代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌-微信登陆</title>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<div id="login_container"></div>
<script>
    var obj = new WxLogin({
        self_redirect:false,
        id:"login_container",
        appid: "wxbdc5610cc59c1631",
        scope: "snsapi_login",
        redirect_uri: "https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do",
        state: Math.ceil(Math.random()*1000),
        style: "black",
        href: ""
    });
</script>
</body>
</html>

官方参数说明：

内嵌效果如下：

自定义样式

href链接写好的css样式（必须是https），http不会响应

内嵌

1
2
3
4
5
6
7
8
9
10
var obj = new WxLogin({
        self_redirect:false,
        id:"login_container",
        appid: "wxbdc5610cc59c1631",
        scope: "snsapi_login",
        redirect_uri: "https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do",
        state: Math.ceil(Math.random()*1000),
        style: "black",
        href: "https://lifuzhen.github.io/create-react-app-antd-less/src/assets/wechatLogin.min.css"
    });

wechatLogin.min.css:

1
@charset "utf-8";.impowerBox .qrcode{width:180px;border:0;margin-top:13px}.impowerBox .title{display:none}.impowerBox .info{width:160px}.status_icon{display:none}.impowerBox .status{text-align:center}.wrp_code{width:206px;background-color:#fff;border:1px solid #e5e5e5;height:206px;margin:0 auto;border-radius:4px}.panelContent .info{display:none}

url跳转的链接（可直接打开）

1
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&href=https://lifuzhen.github.io/create-react-app-antd-less/src/assets/wechatLogin.min.css&state=b3dbfa5773c25b9e942465253b5af6ee#wechat_redirect

将微信的title和info都隐藏掉了，也改变了二维码的大小。效果如下：

也可以转换成base64

内嵌

转换css：

代码：

1
2
3
4
5
6
7
8
9
10
var obj = new WxLogin({
        self_redirect:false,
        id:"login_container",
        appid: "wxbdc5610cc59c1631",
        scope: "snsapi_login",
        redirect_uri: "https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do",
        href:'data:text/css;base64,QGNoYXJzZXQgInV0Zi04IjsuaW1wb3dlckJveCAucXJjb2Rle3dpZHRoOjE4MHB4O2JvcmRlcjowO21hcmdpbi10b3A6MTNweH0uaW1wb3dlckJveCAudGl0bGV7ZGlzcGxheTpub25lfS5pbXBvd2VyQm94IC5pbmZve3dpZHRoOjE2MHB4fS5zdGF0dXNfaWNvbntkaXNwbGF5Om5vbmV9LmltcG93ZXJCb3ggLnN0YXR1c3t0ZXh0LWFsaWduOmNlbnRlcn0ud3JwX2NvZGV7d2lkdGg6MjA2cHg7YmFja2dyb3VuZC1jb2xvcjojZmZmO2JvcmRlcjoxcHggc29saWQgI2U1ZTVlNTtoZWlnaHQ6MjA2cHg7bWFyZ2luOjAgYXV0bztib3JkZXItcmFkaXVzOjRweH0ucGFuZWxDb250ZW50IC5pbmZve2Rpc3BsYXk6bm9uZX0=',
        state: Math.ceil(Math.random()*1000),
        style: "black",
    });

url跳转的链接（可直接打开）

1
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&href=data:text/css;base64,QGNoYXJzZXQgInV0Zi04IjsuaW1wb3dlckJveCAucXJjb2Rle3dpZHRoOjE4MHB4O2JvcmRlcjowO21hcmdpbi10b3A6MTNweH0uaW1wb3dlckJveCAudGl0bGV7ZGlzcGxheTpub25lfS5pbXBvd2VyQm94IC5pbmZve3dpZHRoOjE2MHB4fS5zdGF0dXNfaWNvbntkaXNwbGF5Om5vbmV9LmltcG93ZXJCb3ggLnN0YXR1c3t0ZXh0LWFsaWduOmNlbnRlcn0ud3JwX2NvZGV7d2lkdGg6MjA2cHg7YmFja2dyb3VuZC1jb2xvcjojZmZmO2JvcmRlcjoxcHggc29saWQgI2U1ZTVlNTtoZWlnaHQ6MjA2cHg7bWFyZ2luOjAgYXV0bztib3JkZXItcmFkaXVzOjRweH0ucGFuZWxDb250ZW50IC5pbmZve2Rpc3BsYXk6bm9uZX0=&state=b3dbfa5773c25b9e942465253b5af6ee#wechat_redirect

效果如下：