How to customize PC WeChat scan code login

This article mainly introduces how to customize the PC WeChat scan code login style and code analysis. Friends who need it can learn from it.

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 QR code page, and the other is to open a new QR code page. One is embedded within 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. The document address is: https://open.weixin.qq.com/cg. ..

Solving the problem of customizing the WeChat QR code style

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

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.

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

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.

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, 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
      });

Pay attention to the MIME type here, text/css must be returned.

Customized QR code:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the array update function in VUE

What should you pay attention to when optimizing Vue projects?

Developed using modular approach in vuejs

The above is the detailed content of How to customize PC WeChat scan code login. For more information, please follow other related articles on the PHP Chinese website!