Wie verwende ich die Leinwand des Miniprogramms zum Zeichnen von QR-Codes?

Wie erstelle ich einen QR-Code im WeChat-Applet? Der folgende Artikel stellt Ihnen vor, wie Sie QR-Codes mit der Canvas-Funktion des Miniprogramms zeichnen. Ich hoffe, er wird Ihnen hilfreich sein!

Im WeChat-Miniprogrammgeschäft wird es einige Szenarien geben, in denen QR-Codes angezeigt werden müssen. Statische QR-Codes können direkt lokal gespeichert und anhand von Bildern angezeigt werden, sie eignen sich jedoch nicht zur Generierung dynamischer QR-Codes auf Basis benutzerbezogener Informationen. In diesem Artikel wird erläutert, wie Sie QR-Codes mithilfe der Canvas-Funktion des Miniprogramms zeichnen.

1 Methode 1: Generieren Sie direkt wx-qr

1.1 DEMO über

Öffnen Sie die WeChat-Entwicklertools, um

einschließlich Hintergrundbild anzuzeigen

Mit Logo

Mit Logo+Hintergrundbild

1.2 Installieren

# 通过 npm 安装
npm i wx-qr -S

# 通过 yarn 安装
yarn add wx-qr

1.3 Verwenden Sie die Komponente

Gehen Sie zunächst in das Stammverzeichnis des von Ihnen entwickelten Applets app.json oder xxx, wo Sie es benötigen um die Komponente zu verwenden. Komponenten, auf die in json verwiesen wird app.json 或需要使用该组件的 xxx.json 中引用组件

（注意：请不要将组件命名为 wx-xxx 开头，可能会导致微信小程序解析 tag 失败 ）

{
  "usingComponents": {
    "qr-container": "wx-qr"
  }
}

之后就可以在 wxml

(Hinweis: Bitte benennen Sie keine Komponenten, die mit wx-xxx beginnen, da dies dazu führen kann, dass das WeChat-Applet Tags nicht analysieren kann)

<qr-container text="{{qrTxt}}" size="750"></qr-container>

Dann können Sie wxml verwenden verwenden

Page({
    data: {
        qrTxt: 'https://github.com/liuxdi/wx-qr',
    },
});

<canvas id="qr" type="2d" style="height: 750rpx;width: 750rpx;"></canvas>

Natürlich können auch viele Konfigurationen unterstützt werden. Weitere Informationen finden Sie in der Dokumentation zu github

oder

Code Cloud

.

2. Methode 2: Basierend auf QRCode.js kombiniert mit Leinwandzeichnung.

2.0 Komponenten des QR-Codes die zweite Die rechteckige Größe des QR-Codes. Diese drei Positionierungsmuster haben weiße Kanten und werden als Trennzeichen für Positionserkennungsmuster bezeichnet. Der Grund, warum es drei statt vier sind, bedeutet, dass drei ein Rechteck markieren können.

Timing-Muster werden auch zur Positionierung verwendet. Der Grund dafür ist, dass es 40 Größen von QR-Codes gibt. Wenn die Größe zu groß ist, muss eine Standardlinie vorhanden sein, da sie sonst möglicherweise schief gescannt wird.

• Ausrichtungsmuster Nur QR-Codes der Version 2 und höher (einschließlich Version 2) erfordern dieses Zeug, das auch zur Positionierung verwendet wird.

• Funktionsdaten

• Formatinformationen gibt es in allen Größen und werden zum Speichern einiger formatierter Daten verwendet.

Versionsinformationen >= Version 7 oder höher, Sie müssen zwei 3 x 6 Bereiche reservieren, um einige Versionsinformationen zu speichern.

• Datencode und Fehlerkorrekturcode

Mit Ausnahme der oben genannten Stellen speichern die übrigen Stellen den Datencode-Datencode und den Fehlerkorrekturcode-Fehlerkorrekturcode.

2.1 Einführung in die QR-Code-Datengenerierungsbibliothek

Kopieren Sie

qrcode.js

in das entsprechende Verzeichnis Ihres Miniprogramms.

2.2 Erstellen Sie ein Canvas-Tag im Miniprogramm und legen Sie die Länge und Breite der Leinwand fest Datencode des QR-Code-Bereichs

, darunter QRCodeModel

aus qrCode.js importiert

const query = this.createSelectorQuery();
let dpr = wx.getSystemInfoSync().pixelRatio;
query.select('#qr').fields({ node: true, size: true, id: true })
  .exec((res) => {
    let { node: canvas, height, width } = res[0];
    let ctx = canvas.getContext('2d');
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr);
  })

Zu diesem Zeitpunkt wurde der Datencodebereich des QR-Codes gezeichnet:

2.5 Zeichnen Sie den grafischen Identifikationsbereich. weixin.qq.com/s/WHJj73mX7bwv

Dieser Code stellt lediglich eine einfache Logik zur QR-Code-Generierung bereit. Wenn Sie eine komplexere QR-Code-Anzeigefunktion benötigen, wird empfohlen,

wx-qr zu verwenden oder auf den darin enthaltenen spezifischen Code zu verweisen. Willkommen, um Probleme und Sterne anzusprechen~~[Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung

]

Das obige ist der detaillierte Inhalt vonWie verwende ich die Leinwand des Miniprogramms zum Zeichnen von QR-Codes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!