Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve custom PC WeChat scan code login style, Xiaobian thinks it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.

In the near future, there are two ways to do a PC-side WeChat code scanning login. One is to open a new QR code page, and the other is to embed the product webpage. This time, take embedded two-dimensional code as an example, how to display a landing two-dimensional code in the page, the document is very clear, so I won't repeat it.

When everything is ready, the QR code on the web page will initially look like this.

Especially large (default QR code size 280x280), there are WeChat login title, below also scan code login prompt.

Fortunately, WeChat left an api to give us the opportunity to customize the style. When instantiating a QR code before, the href attribute in the instance object allows setting the style.

var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href: "../ qrcode.css"//is this property });

Unfortunately, passing in the address of the style file in href results in an error. It seems that WeChat only allows access to https resources for security reasons. The second solution is data-url.

Resolve style issues by accessing data-url

Write a nodejs script that converts the css resource into a data-url. The specific code implementation is:

var fs = require('fs');// function to encode file data to base64 encoded stringfunction base64_encode(file) { // read binary data var bitmap = fs.readFileSync(file); // convert binary data to base64 encoded string return _'data:text/css;base64,'+new Buffer(bitmap).toString('base64');}console.log(base64_encode('./ qrcode.css'))

Run the node script, copy the printed data-url, and assign it to the previous href.

var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href:_"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lfQ0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url });

Note the MIME type here, be sure to return text/css.

Custom two-dimensional code:

About "how to realize custom PC WeChat code scanning login style" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.