foreword
Since the enterprise WeChat scan code login has a fixed style and template, each company may use the original template when using it in the early stage. With the complexity of business scenarios and the optimization of subdivided scenarios, this fixed style template cannot meet the needs of enterprises. , so it is necessary to modify the template to make it more suitable for the business scenario and culture of the enterprise.
Enterprise WeChat official document address:
https://developer.work.weixin.qq.com/document/path/91022
The template style is shown in the figure below:
I don't want the logo at the top and the file description at the bottom. The upper right corner supports password input to switch login. I only want a QR code and my own text description on this page. At this time, I need to modify it. Use simple F12 to find It cannot be modified. Here are several modification methods. It should be noted that we generally use the http protocol for development. To use the official modification method, you need to use the https protocol. Here are some official methods and some partial methods. Readers offer some ideas.
Enterprise WeChat login process
Use @wecom/jssdk to initialize the enterprise WeChat login component:
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
Solution
Method 1: Official recommended practice.
Instance JS objects where WeChat login is required
//引入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 : ,//自定义样式链接，企业可根据实际需求覆盖默认样式。
});Note: You can provide relevant css style files, and fill in the link address in the href field (only supports the resource address of https protocol), and then write the style you want in your own file. like:
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none !important}
.impowerBox .status {text-align: center;}Method 2: Embed the QR code into the web page and customize the style.
The main purpose of JS WeChat login: the website hopes that users can complete the login within the website, without jumping to the WeChat domain to log in and then return, so as to improve the fluency and success rate of WeChat login.
The implementation code is as follows:
<!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>Parameter Description.
The href parameter here can customize the scan code style. One is said to introduce a css file with an https address. For example: href: "https://lws.com/test.css". Since https is not configured, there is no practice. The other One is to base64-encrypt the style code into the href parameter.
The official code below just provides a template, and you can embed the style as needed (debug it directly in the F12 console). For example, I only need the second and third lines of the following code, and then use the webmaster tool to convert it into base64 encryption.
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}Webmaster Tools: https://tool.chinaz.com/Tools/Base64.aspx
Modify the href parameter, format: href: "data:text/css;base64, base64 encrypted string"
href:data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30NCi5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30="The style is as follows, the QR code does not move, and the default title and bottom are removed.
Method 3: ifram attribute control + style occlusion (I refer to the partial method).
Get the ifame embedded in WeChat, and adjust the height of ifame.height to a suitable position (F12 is reduced to hide the text at the bottom). This cannot hide the text and logo of WeChat at the top, and you can use a blank div to cover it at this time.
The style is as follows:
One is a blank div style, and two is the QR code style of the corporate WeChat scan code. Here you need to use absolute positioning so that one covers the top text of two, and use F12 to debug.
The renderings are as follows:
You're done, I think the third method is a little simpler, and you don't need to build an https service to store static resource codes. It would be best if there is one.
The more you know, the more you don't know! Remember to pay attention to this literary programmer [Sun Mingshou Zatan]