原来工作18年的企业大佬都是这样自定义企业微信扫码登录的样式

前言

由于企业微信扫码登录都是固定样式和模板,每个公司在前期使用的时候可能会使用原样的模版,随着业务场景的复杂及细分场景优化,这个固定样式的模版满足不了企业的需求,所以需要对模版进行改造,使它更加贴合企业业务场景及文化。

企业微信官方文档地址:

https://developer.work.weixin.qq.com/document/path/91022

模板样式如下图所示:

d661450d09231ae6bd29ef40ff067aea.jpeg

我不想要顶部的logo和底部的文件描述,右上角是支持密码输入切换登录的,这个页面我只想要一个二维码和我自己的文字描述,这个时候就需要改造,使用简单的F12发现是不能修改的,这里提供几种修改的办法,需要注意的是一般我们开发是使用的http协议,使用官方的修改方法需要使用https协议,这里提供一些官方的做法及一些偏门的做法,给读者提供一些思路。

企业微信登录流程

102370782096cf5bbb79e03442d77d39.jpeg

使用 @wecom/jssdk 初始化企业微信登录组件:

https://developer.work.weixin.qq.com/document/path/98152#1-%E4%BD%BF%E7%94%A8-codeac9ac01d02e3f9ecb09b9610dcdcf2ed-%E5%88%9D%E5%A7%8B%E5%8C%96%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95%E7%BB%84%E4%BB%B6

解决办法

方法一:官方推荐做法。

在需要使用微信登录的地方实例JS对象

//引入js文件
import '../assets/api/wwLogin-1.0.0.js';
window.WwLogin({
id : wx_reg,  //企业页面显示二维码的容器id
appid : ,//企业微信的CorpID,在企业微信管理端查看
agentid : ,//授权方的网页应用ID,在具体的网页应用中查看
redirect_uri :,//重定向地址,需要进行UrlEncode
state : ,//用于保持请求和回调的状态,授权请求后原样带回给企业。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议企业带上该参数,可设置为简单的随机数加session进行校
href : ,//自定义样式链接,企业可根据实际需求覆盖默认样式。
});

注:可以提供相关css样式文件,并把链接地址填入href字段(只支持https协议的资源地址),然后在自己的文件中写入你想要的样式即可。如:

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none  !important}
.impowerBox .status {text-align: center;}

方法二:二维码内嵌到网页中,自定义样式。

JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。

实现代码如下:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>内嵌式 - 微信扫码登录</title>
<!-- 引入微信扫码登录js文件 -->
<script type=text/javascript src=http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js></script>
</head>
<body>
<!-- 放置二维码的div -->
<div id=login_container></div>
</body>
<script type=text/javascript>
var obj = new WxLogin({
self_redirect:true,
id:login_container,
appid: wxbdc5610cc59c1631,
scope: snsapi_login,
redirect_uri: encodeURIComponent(http://+window.location.host+/...),
state: Math.ceil(Math.random()*1000),
style: black,
href: 
});
</script>
</html>

参数说明。

5600b85c34d4c2fee93c7c613dbb46ae.jpeg

这里的href参数可以自定义扫码样式,一种据说是引入一个https地址的css文件例如:href: "https://lws.com/test.css",由于没有配置https所以没有实践,另一种是把样式代码进行base64加密放到href参数中。

下面的官方代码只是提供模板,大家可以根据需要嵌入样式(直接F12控制台调试好),比如我只需要下面代码的第二行和第三行,然后使用站长工具转换成base64加密。

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

站长工具:https://tool.chinaz.com/Tools/Base64.aspx

7d8f8a9e37db2283b06b8cd14df88a26.jpeg

修改href参数,格式:href: "data:text/css;base64,base64加密后的字符串"

href:data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30NCi5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30="

样式如下,二维码不动,默认的标题和底部去掉了。

ed997b6dd4015b7fec12612a8cc5ce0b.jpeg

方法三:ifram属性控制+样式遮挡(我指的偏门方法)。

f8e9eaecb7f8c9298b00d4a439c314a6.jpeg

获取到企业微信嵌入的ifame,把ifame.height高度调整到合适位置(F12调小至能隐藏底部文字),这个不能隐藏顶部的企业微信字样和logo,这个时候可以使用空白的div遮挡。

样式如下:

a5a6d84519a1431f08bde96c71f863f3.jpeg

one是空白div样式,,two是企业微信扫码的二维码样式,这里需要使用绝对定位,使one遮挡住two的顶部文字,使用F12调试好。

效果图如下:

fc9504a25b6642784c15dec569f03135.jpeg

大功告成,我觉得第三种方式简单一点,不用搭建https服务存放静态资源代码,如果有那就最好不过了。

你知道的越多,你不知道的越多!记得关注这个文绉绉的程序员【孙叫兽杂谈】

猜你喜欢

转载自blog.csdn.net/weixin_41937552/article/details/131526485