Solution to customizing WeChat login code scanning style

PC WeChat scan code login

Recently there is a demand for PC WeChat scan code login. There are two ways to scan WeChat code. One is to open a new one. QR code page, the other is embedded product web page. This time we take the embedded QR code as an example. The document explains very clearly how to display a login QR code on the page, so I won’t go into details.

Solving the problem of customizing the WeChat QR code style

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

Not to mention it is very large (default QR code size is 280x280), there is also a title for WeChat login, and there are also prompts to scan the code to log in below.
Fortunately, WeChat has 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.

<span style="font-size: 16px;"> var obj = new WxLogin({<br>                        id:"login_container", <br>                        appid: "", <br>                        scope: "", <br>                        redirect_uri: "",<br>                        state: "",<br>                        style: "",<br>                        href: "../qrcode.css"//就是这个属性<br>                       });<br></span>

Unfortunately, if you pass in the address of the style file in href, an error will be reported. It seems that WeChat only allows access to https resources for security reasons. So now we use the second solution data-url.

Solve the style problem by accessing data-url

Write a nodejs script to convert the css resource just now into data-url. The specific code implementation is:

<span style="font-size: 16px;">var fs = require('fs');<br><br>// function to encode file data to base64 encoded string<br>function base64_encode(file) {<br>    // read binary data<br>    var bitmap = fs.readFileSync(file);<br>    // convert binary data to base64 encoded string<br>    return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');<br>}<br><br>console.log(base64_encode('./qrcode.css'))<br></span>

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

<span style="font-size: 16px;"> var obj = new WxLogin({<br>                        id:"login_container", <br>                        appid: "", <br>                        scope: "", <br>                        redirect_uri: "",<br>                        state: "",<br>                        style: "",<br>                                           href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf<br>Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url<br>                       });<br></span>

Note the MIME type here, text/css must be returned.
Customized QR code:

Related tutorials:

Some new features for WeChat login Get

php QR code production and download method

Two methods of javascript generating QR code

The above is the detailed content of Solution to customizing WeChat login code scanning style. For more information, please follow other related articles on the PHP Chinese website!