Comment utiliser le canevas du mini programme pour dessiner des codes QR ?

Comment générer un code QR dans l'applet WeChat ? L'article suivant vous présentera comment dessiner des codes QR en utilisant la capacité de canevas du mini programme. J'espère qu'il vous sera utile !

Dans le secteur des mini-programmes WeChat, il y aura certains scénarios dans lesquels les codes QR devront être affichés. Les codes QR statiques peuvent être stockés directement localement et affichés à l'aide d'images, mais ils ne conviennent pas pour générer des codes QR dynamiques basés sur des informations relatives à l'utilisateur. Cet article explique comment dessiner des codes QR en utilisant la capacité de canevas du mini-programme.

1 Méthode 1 : Générez directement la wx-qr

1.1 DEMO via

Ouvrez les outils de développement WeChat pour afficher

y compris l'image d'arrière-plan

Avec logo

Avec logo + image de fond

1.2 Installez

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

# 通过 yarn 安装
yarn add wx-qr

1.3 Utilisez le composant

Tout d'abord, allez dans le répertoire racine de l'applet que vous avez développé app.json ou xxx là où vous en avez besoin pour utiliser le composant. Composants référencés dans json app.json 或需要使用该组件的 xxx.json 中引用组件

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

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

之后就可以在 wxml

(Remarque : veuillez ne pas nommer les composants commençant par wx-xxx, ce qui pourrait empêcher l'applet WeChat d'analyser les balises)

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

Ensuite, vous pouvez utiliser wxml

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

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

Bien sûr, il peut également prendre en charge de nombreuses configurations. Pour plus de détails, consultez la documentation github

ou

Code Cloud

.

2. Méthode 2 : basée sur QRCode.js combiné avec un dessin sur toile

2.0 Composants du code QR

• Modèle de positionnement

• Le modèle de détection de position est un modèle de positionnement, utilisé pour marquer le second La taille rectangulaire du code QR. Ces trois modèles de positionnement ont des bords blancs et sont appelés séparateurs pour modèles de détection de position. La raison pour laquelle il y en a trois au lieu de quatre signifie que trois peuvent marquer un rectangle.

• Les modèles de timing sont également utilisés pour le positionnement. La raison en est qu'il existe 40 tailles de codes QR. Si la taille est trop grande, il doit y avoir une ligne standard, sinon elle risque d'être scannée de travers.

Modèles d'alignement Seuls les codes QR de la version 2 et supérieure (y compris la version 2) nécessitent ce élément, qui est également utilisé pour le positionnement.

• Données fonctionnelles

• Les informations de format existent dans toutes les tailles et sont utilisées pour stocker certaines données formatées.

Informations sur la version >= Version 7 ou supérieure, vous devez réserver deux zones 3 x 6 pour stocker certaines informations de version.

• Code de données et code de correction d'erreur

À l'exception des emplacements ci-dessus, les emplacements restants stockent le code de données du code de données et le code de correction d'erreur du code de correction d'erreur.

2.1 Présentation de la bibliothèque de génération de données de code QR

Copiez

qrcode.js dans le répertoire correspondant de votre mini programme.

2.2 Créez une balise de canevas dans le mini programme et définissez la longueur et la largeur du canevas

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);
  })

2.3 Obtenez l'instance et le contexte du canevas

// 二维码的颜色
const colorDark = '#000';
// 获取二维码的大小，因css设置的为750rpx，将其转为px
const rawViewportSize = getPxFromRpx(750);
// 二维码容错率{ L: 1, M: 0, Q: 3, H: 2 }
const correctLevel = 0;
// 创建二维码实例对象，并添加数据进行生成
const qrCode = new QRCodeModel(-1, correctLevel);
qrCode.addData(url);
qrCode.make();

// 每个方向的二维码数量
const nCount = qrCode.moduleCount;
// 计算每个二维码方块的大小
const nSize = getRoundNum(rawViewportSize / nCount, 3)
// 每块二维码点的大小比例
const dataScale = 1;
// 计算出dataScale不为1时，每个点的偏移值
const dataXyOffset = (1 - dataScale) * 0.5;
// 循环行列绘制数据码区
for (let row = 0; row < nCount; row++) {
  for (let col = 0; col < nCount; col++) {
    // row 和 col 处的模块是否是黑色区
    const bIsDark = qrCode.isDark(row, col);
    // 是否是二维码的图案定位标识区 Position Detection Pattern（如本模块，是三个顶点位置处的大方块）
    const isBlkPosCtr = (col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8);
    // 是否是Timing Patterns，也是用于协助定位扫描的
    const isTiming = (row == 6 && col >= 8 && col <= nCount - 8) || (col == 6 && row >= 8 && row <= nCount - 8);
    // 如果是这些区域 则不进行绘制
    let isProtected = isBlkPosCtr || isTiming;
    // 计算每个点的绘制位置（left，top）
    const nLeft = col * nSize + (isProtected ? 0 : dataXyOffset * nSize);
    const nTop = row * nSize + (isProtected ? 0 : dataXyOffset * nSize);
    // 描边色、线宽、填充色配置
    ctx.strokeStyle = colorDark;
    ctx.lineWidth = 0.5;
    ctx.fillStyle = bIsDark ? colorDark : "rgba(255, 255, 255, 0.6)";
    // 如果不是标识区，则进行绘制
    if (!isProtected) {
      ctx.fillRect(
        nLeft,
        nTop,
        (isProtected ? (isBlkPosCtr ? 1 : 1) : dataScale) * nSize,
        (isProtected ? (isBlkPosCtr ? 1 : 1) : dataScale) * nSize
      );
    }
  }
}

2.4 Définissez quelques variables et dessinez le code de données de la zone du code QR

parmi lequel

QRCodeModel

est importé de qrCode.js

// 绘制Position Detection Pattern
ctx.fillStyle = colorDark;
ctx.fillRect(0, 0, 7 * nSize, nSize);
ctx.fillRect((nCount - 7) * nSize, 0, 7 * nSize, nSize);
ctx.fillRect(0, 6 * nSize, 7 * nSize, nSize);
ctx.fillRect((nCount - 7) * nSize, 6 * nSize, 7 * nSize, nSize);
ctx.fillRect(0, (nCount - 7) * nSize, 7 * nSize, nSize);
ctx.fillRect(0, (nCount - 7 + 6) * nSize, 7 * nSize, nSize);
ctx.fillRect(0, 0, nSize, 7 * nSize);
ctx.fillRect(6 * nSize, 0, nSize, 7 * nSize);
ctx.fillRect((nCount - 7) * nSize, 0, nSize, 7 * nSize);
ctx.fillRect((nCount - 7 + 6) * nSize, 0, nSize, 7 * nSize);
ctx.fillRect(0, (nCount - 7) * nSize, nSize, 7 * nSize);
ctx.fillRect(6 * nSize, (nCount - 7) * nSize, nSize, 7 * nSize);
ctx.fillRect(2 * nSize, 2 * nSize, 3 * nSize, 3 * nSize);
ctx.fillRect((nCount - 7 + 2) * nSize, 2 * nSize, 3 * nSize, 3 * nSize);
ctx.fillRect(2 * nSize, (nCount - 7 + 2) * nSize, 3 * nSize, 3 * nSize);
// 绘制Position Detection Pattern 完毕

// 绘制Timing Patterns
const timingScale = 1;
const timingXyOffset = (1 - timingScale) * 0.5;
for (let i = 0; i < nCount - 8; i += 2) {
  _drawDot(ctx, 8 + i, 6, nSize, timingXyOffset, timingScale);
  _drawDot(ctx, 6, 8 + i, nSize, timingXyOffset, timingScale);
}
// 绘制Timing Patterns 完毕

A ce moment, la zone de code de données du code QR a été dessinée :

2.5 Dessinez la zone de reconnaissance graphique

rrreee À ce stade, un simple code QR a été dessiné avec succès ~

Pour plus de détails sur le code, veuillez consulter l'extrait de code de l'applet WeChat

https://developers. weixin.qq.com/s/WHJj73mX7bwv

This Le code fournit simplement une simple logique de génération de code QR. Si vous avez besoin d'une fonction d'affichage de code QR plus complexe, il est recommandé d'utiliser

wx-qr ou de vous référer au code spécifique à l'intérieur. Bienvenue pour soulever des problèmes et des étoiles ~~

[Recommandations d'apprentissage associées : 🎜Tutoriel de développement de mini-programmes🎜]🎜

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!