Lösung zum Anpassen des WeChat-Anmeldecode-Scanstils

PC-WeChat-Scancode zum Anmelden

In letzter Zeit besteht eine Nachfrage nach PC-WeChat-Scancode zum Anmelden. Es gibt zwei Möglichkeiten, WeChat-Code zu scannen um eine neue QR-Codeseite zu öffnen, die andere ist eine eingebettete Produktwebseite. 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.

Lösung des Problems der Anpassung des WeChat-QR-Code-Stils

Wenn alles fertig ist, sieht der anfängliche Standard-QR-Code auf der Webseite so aus Das .

Ganz zu schweigen davon, dass er sehr groß ist (Standardgröße des QR-Codes ist 280 x 280), es gibt auch einen Titel für die WeChat-Anmeldung und es gibt auch Aufforderungen, den Code zu scannen Melden Sie sich unten an.
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.

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

Leider wird ein Fehler gemeldet, wenn Sie die Adresse der Style-Datei im href übergeben. 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:

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

Führen Sie das Knotenskript aus, kopieren Sie die gedruckte Daten-URL und weisen Sie sie dann gerade der href zu.

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

Achten Sie hier auf den MIME-Typ und geben Sie unbedingt Text/CSS zurück.
Benutzerdefinierter QR-Code:

Verwandte Tutorials:

Einige neue Funktionen für die WeChat-Anmeldung

So erstellen und laden Sie PHP-QR-Code herunter

Zwei Methoden zur Javascript-Generierung von QR-Code

Das obige ist der detaillierte Inhalt vonLösung zum Anpassen des WeChat-Anmeldecode-Scanstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!