Comment personnaliser la connexion par code de numérisation PC WeChat

Cet article explique principalement comment personnaliser le style de connexion et l'analyse du code de numérisation PC WeChat. Les amis qui en ont besoin peuvent en tirer des leçons.

Scannez le code PC WeChat pour vous connecter

Récemment, il est nécessaire de scanner le code PC WeChat pour vous connecter. Il existe deux façons de scanner le code WeChat, l'une consiste à ouvrir un nouveau QR page de codes, l’autre est intégrée à la page Web du produit. Cette fois, nous prenons comme exemple le code QR intégré. Le document explique très clairement comment afficher un code QR de connexion sur la page, je n'entrerai donc pas dans les détails. L'adresse du document est : https://open.weixin. qq.com/cg ..

Résoudre le problème de la personnalisation du style du code QR WeChat

Lorsque tout est prêt, le code QR sur la page Web ressemblera initialement à ceci par défaut.

Sans oublier qu'il est très grand (la taille par défaut du code QR est de 280x280), il y a aussi un titre pour la connexion à WeChat, et il y a également des invites pour scanner le code pour connectez-vous ci-dessous.
Heureusement, WeChat a laissé une API pour nous donner la possibilité de personnaliser le style. Lors de l'instanciation d'un code QR auparavant, l'attribut href dans l'objet instance permet de définir le style.

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

Malheureusement, si vous transmettez l'adresse du fichier de style dans le href, une erreur sera signalée. Il semble que WeChat autorise uniquement l'accès aux ressources https pour des raisons de sécurité. Alors maintenant, nous utilisons l’URL de données de la deuxième solution.

Résolvez le problème de style en accédant à data-url

Écrivez un script nodejs pour convertir la ressource CSS tout à l'heure en data-url. L'implémentation spécifique du code est la suivante :

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'))

Exécutez le script de nœud, copiez l'URL des données imprimées, puis attribuez-la au href tout de suite.

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

Notez le type MIME ici, assurez-vous de renvoyer du texte/css.

Code QR personnalisé :

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment implémenter la fonction de mise à jour du tableau dans VUE

À quoi devez-vous faire attention lors de l'optimisation des projets Vue ?

Développé en utilisant une approche modulaire dans vuejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!