For the function introduction of wechat scanning code login, please read the official document [Development Guide for website Application wechat Login]

According to official documents, we know that there are two ways to log in by scanning code on wechat

One is to jump to a large black TWO-DIMENSIONAL code interface for scanning code login:

(See blog: PHP realizes skipping wechat scan code login website)

The other is the TWO-DIMENSIONAL code embedded in the page, so you can customize some styles, such as the size of the two-dimensional code, whether there is a title, etc., the default effect is as follows:

(The official document says well, 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 login and then returning, to improve the smoothness and success rate of wechat login)

The implementation code is as follows:

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > XMLNS = "http://www.w3.org/1999/xhtml" < HTML > < head > < title > embedded - WeChat scan code login < / title > <! <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> </head> <body> <! <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>Copy the code

Parameter description (from official documentation) :

The href argument here allows you to customize the scan style, a CSS file that supposedly introduces an HTTPS address for example: href: “lws.com/test.css”, provided by…

The official document gives the following style code:

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

We base64 encrypt the style code using webmaster tools:

Href: “data:text/ CSS; Base64,base64 encrypted string”

href:"data:text/css; base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJve CAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlb nRlcjt9"Copy the code

The qr code is smaller and the default title is removed: