Detailed explanation of customizing PC WeChat code scanning login style

Regarding PC WeChat scan code login, this article mainly introduces how to customize the PC WeChat scan code login style and code analysis. I hope it can help everyone.

Recently, there is a demand for PC-side WeChat code scanning to log in. There are two ways to scan WeChat code, one is to open a new QR code page, and the other is to embed the 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.

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

is extremely large (the default QR code size is 280x280), there is also a title for WeChat login, and there is also a prompt 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.

var obj = new WxLogin({
      id:"login_container", 
      appid: "", 
      scope: "", 
      redirect_uri: "",
      state: "",
      style: "",
      href: "../qrcode.css"//就是这个属性
      });

##Unfortunately, when 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.

Solving style problems by accessing data-url

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

var fs = require('fs');
// function to encode file data to base64 encoded string
function 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 and copy the printed data-url , and then assign it to the href just now.

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

Note the MIME here Type, must return text/css.

Customized QR code:

Customizing the PC WeChat code scanning login style is a very good technology, now This function is required for website login, so please try it quickly.

Related recommendations:

How to generate and download QR codes in php

A case study on how php generates and downloads QR codes

PHP implements WeChat PC QR code login

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