Maison >Applet WeChat >Développement WeChat >Comment implémenter un style de connexion personnalisé pour l'analyse du code WeChat

Comment implémenter un style de connexion personnalisé pour l'analyse du code WeChat

一个新手
一个新手original
2017-10-26 10:09:412676parcourir

La connexion au site Web PC de l'entreprise a récemment été révisée et la connexion par code scan WeChat a été ajoutée.
Document Scannez le code QR sur WeChat pour vous connecter au document.
Après l'avoir configuré, j'ai trouvé que le style fourni avec WeChat est trop grand et que la position est incorrecte, il doit donc être ajusté.

Comment implémenter un style de connexion personnalisé pour l'analyse du code WeChat

Regardez à nouveau le document

Document WeChat

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

Le href ci-dessus, vous pouvez référencer le fichier CSS que nous avons écrit nous-mêmes.
Mais la règle officielle est que ce fichier css doit être placé sur un site internet avec le protocole https, par exemple :

Citer le css

  href: "https://www.baidu.com/qrcode.css"

Mais le le protocole de votre propre site Web n'est pas https. Solution :
Résolvez le problème de style en accédant à data-url
Écrivez un script nodejs pour convertir la ressource CSS qui vient de se faire en data-url.

Méthode spécifique :
1. Créez un nouveau dossier, mettez le fichier js converti et le fichier css que vous avez écrit vous-même

Comment implémenter un style de connexion personnalisé pour l'analyse du code WeChat

change.js

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

2. Ouvrez le terminal, entrez dans le répertoire

et exécutez

 node change.js

Comment implémenter un style de connexion personnalisé pour l'analyse du code WeChat

Le tutoriel est terminé.


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn