Solution pour personnaliser le style d'analyse du code de connexion WeChat

Code de numérisation PC WeChat pour se connecter

Récemment, il y a une demande pour que le code de numérisation PC WeChat se connecte. Il existe deux façons de scanner le code WeChat. pour en ouvrir une nouvelle page de code QR, l'autre est la page Web du produit intégrée. 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.

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

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

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.

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

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 à l'url de données

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

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

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

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

Faites attention au type MIME ici, assurez-vous de renvoyer du texte/css.
Code QR personnalisé :

Tutoriels associés :

Quelques nouvelles fonctionnalités pour la connexion WeChat Obtenir

Comment produire et télécharger un code QR php

Deux méthodes de génération de code QR javascript

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!