So passen Sie die PC WeChat-Scancode-Anmeldung an

In diesem Artikel wird hauptsächlich beschrieben, wie Sie den PC-WeChat-Scancode-Anmeldestil und die Codeanalyse anpassen können. Freunde, die ihn benötigen, können daraus lernen.

PC-WeChat-Code scannen, um sich anzumelden

In letzter Zeit besteht die Notwendigkeit, den PC-WeChat-Code zu scannen, um sich anzumelden. Es gibt zwei Möglichkeiten, WeChat-Code zu scannen: Eine besteht darin, einen neuen QR zu öffnen Die andere ist eine Codeseite, die andere ist in die Produktwebseite eingebettet. 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 gehe ich nicht auf Details ein. Die Dokumentadresse lautet: https://open.weixin. qq.com/cg ..

Lösung des Problems der Anpassung des WeChat-QR-Codestils

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

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.

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

Leider wird ein Fehler gemeldet, wenn Sie die Adresse der Style-Datei in 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:

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, kopieren Sie die gedruckte Daten-URL und weisen Sie sie 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
      });

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

Maßgeschneiderter QR-Code:

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie die Array-Update-Funktion in VUE

Worauf sollten Sie bei der Optimierung von Vue-Projekten achten?

Entwickelt mit modularem Ansatz in Vuejs

Das obige ist der detaillierte Inhalt vonSo passen Sie die PC WeChat-Scancode-Anmeldung an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!