Explication détaillée de la personnalisation du style de connexion par analyse de code PC WeChat

Concernant la connexion par code de numérisation PC WeChat, cet article présente principalement comment personnaliser le style de connexion par code de numérisation PC WeChat et l'analyse du code. J'espère que cela pourra aider tout le monde.

Récemment, il y a une demande pour l'analyse du code WeChat côté PC pour se connecter. Il existe deux façons de scanner le code WeChat, l'une consiste à ouvrir une nouvelle page de code QR et l'autre à intégrer le produit. page web. Cette fois, nous prenons comme exemple le QR code intégré. Le document explique très clairement comment afficher un QR code de connexion sur la page, je n'entrerai donc pas dans les détails.

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

est particulièrement grand (la taille par défaut du code QR est de 280x280), il y a aussi un titre de connexion WeChat, et il y a aussi des invites pour scanner le code pour vous connecter 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, en passant 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 :

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 et copiez le fichier imprimé. data -url, puis attribuez-le 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
      });

Faites attention ici Le type MIME doit renvoyer text/css.

Code QR personnalisé :

La personnalisation du style de connexion par numérisation de code PC WeChat est désormais une très bonne technologie. Cette fonction est requise. pour la connexion au site Web, alors essayez-le rapidement.

Recommandations associées :

Méthode de production et de téléchargement du code QR php

Une étude de cas sur la façon dont php génère le code QR et le télécharge

PHP implémente la connexion par code QR WeChat PC

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!