Ausführliche Erläuterung zum Anpassen des PC-WeChat-Code-Scanning-Anmeldestils

In Bezug auf die PC-WeChat-Scancode-Anmeldung wird in diesem Artikel hauptsächlich die Anpassung des PC-WeChat-Scancode-Anmeldestils und die Codeanalyse vorgestellt.

In letzter Zeit besteht eine Nachfrage nach PC-seitigem WeChat-Code-Scannen zum Anmelden. Es gibt zwei Möglichkeiten, WeChat-Code zu scannen: Eine besteht darin, eine neue QR-Codeseite zu öffnen, und die andere darin, das Produkt einzubetten Webseite. Diesmal nehmen wir den eingebetteten QR-Code als Beispiel. Das Dokument erklärt sehr deutlich, wie ein Login-QR-Code auf der Seite angezeigt wird, daher werde ich nicht näher darauf eingehen.

Wenn alles fertig ist, sieht der QR-Code auf der Webseite zunächst so aus.

ist besonders groß (Standardgröße des QR-Codes ist 280x280), es gibt auch einen WeChat-Anmeldetitel und es gibt auch Aufforderungen zum Scannen des Codes um sich unten anzumelden.
Glücklicherweise hat WeChat eine API hinterlassen, die uns die Möglichkeit gibt, den Stil anzupassen. Bei der vorherigen Instanziierung eines QR-Codes ermöglicht das href-Attribut im Instanzobjekt das Festlegen des Stils.

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

Leider wurde die Adresse der Style-Datei im href übergeben, Es wird ein Fehler gemeldet. Offenbar erlaubt WeChat aus Sicherheitsgründen nur den Zugriff auf https-Ressourcen. Jetzt verwenden wir also die Daten-URL der zweiten Lösung.

Lösen Sie das Stilproblem, indem Sie auf die Daten-URL zugreifen

Schreiben Sie ein NodeJS-Skript, um die CSS-Ressource gerade in Daten-URL zu konvertieren. Die spezifische Code-Implementierung lautet:

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

Führen Sie das Knotenskript aus und kopieren Sie das gedruckte data -url und weisen Sie es dann gerade der href zu.

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

Passen Sie auf hier Der MIME-Typ muss Text/CSS zurückgeben.

Benutzerdefinierter QR-Code:

Das Anpassen des PC-WeChat-Code-Scan-Anmeldestils ist jetzt eine sehr gute Technologie. Diese Funktion ist erforderlich für die Website-Anmeldung, also probieren Sie es bitte schnell aus.

Verwandte Empfehlungen:

Produktions- und Downloadmethode für PHP-QR-Code

Eine Fallstudie darüber, wie PHP QR-Code generiert und herunterlädt

PHP implementiert WeChat PC-QR-Code-Anmeldung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zum Anpassen des PC-WeChat-Code-Scanning-Anmeldestils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!