집 > 기사 > 위챗 애플릿 > 미니 프로그램의 캔버스를 사용하여 QR 코드를 그리는 방법은 무엇입니까?

미니 프로그램의 캔버스를 사용하여 QR 코드를 그리는 방법은 무엇입니까?

青灯夜游앞으로: 2022-01-06 10:11:055993검색

WeChat 애플릿에서 QR 코드를 생성하는 방법은 무엇입니까? 다음 글에서는 미니 프로그램의 캔버스 기능을 활용하여 QR 코드를 그리는 방법을 소개하겠습니다.

WeChat 미니 프로그램 사업에서 QR 코드를 표시해야 하는 몇 가지 시나리오가 있습니다. 정적 QR코드는 로컬에 직접 저장하고 사진을 이용해 표시할 수 있지만, 사용자 관련 정보를 기반으로 동적 QR코드를 생성하는 데에는 적합하지 않습니다. 이 기사에서는 미니 프로그램의 캔버스 기능을 사용하여 QR 코드를 그리는 방법을 소개합니다.

1 방법 1: `wx-qr`

WeChat 개발자 도구를 열어

1.1 DEMO를 직접 생성하여

미니 프로그램의 캔버스를 사용하여 QR 코드를 그리는 방법은 무엇입니까?

배경 이미지 포함

을 확인하세요.

로고 포함

로고+배경 이미지 포함

1.2 설치

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

# 通过 yarn 安装
yarn add wx-qr

1.3

컴포넌트 사용 먼저 개발한 애플릿의 루트 디렉터리인 app.json 또는 필요한 xxx로 이동합니다. json에서 참조되는 구성 요소를 사용합니다. app.json 或需要使用该组件的 xxx.json 中引用组件

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

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

之后就可以在 wxml

(참고: wx-xxx로 시작하는 구성 요소 이름을 지정하지 마십시오. 그러면 WeChat 애플릿이 태그를 구문 분석하지 못할 수 있습니다.)

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

그런 다음 wxml

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

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

물론 다양한 구성도 지원할 수 있습니다. 자세한 내용은 github

또는

Code Cloud

문서를 참조하세요.

2. 방법 2: 캔버스 드로잉과 결합된 QRCode.js 기반

2.0 QR 코드의 일부

Positioning 패턴

Position 감지 패턴은 다음과 같은 위치 지정 패턴입니다. 두 번째 QR 코드의 직사각형 크기를 표시하십시오. 이 세 가지 위치 지정 패턴은 흰색 가장자리를 가지며 위치 감지 패턴용 구분 기호라고 합니다. 4개가 아닌 3개가 있는 이유는 3개가 직사각형을 표시할 수 있다는 의미입니다.

타이밍 패턴은 위치 지정에도 사용됩니다. 그 이유는 QR코드의 크기가 40개이기 때문입니다. 크기가 너무 크면 표준선이 있어야 하고, 그렇지 않으면 비뚤어지게 스캔될 수 있습니다.

정렬 패턴 버전 2 이상(버전 2 포함)의 QR 코드에만 이 항목이 필요하며 위치 지정에도 사용됩니다.

기능적 데이터

형식 정보는 모든 크기로 존재하며 일부 형식화된 데이터를 저장하는 데 사용됩니다.

버전 정보 >= 버전 7 이상인 경우 일부 버전 정보를 저장하려면 3 x 6 영역 2개를 예약해야 합니다.

데이터 코드 및 오류 수정 코드

위 이외의 나머지 위치에는 데이터 코드 데이터 코드와 오류 수정 코드 오류 수정 코드가 저장됩니다.

2.1 QR 코드 데이터 생성 라이브러리 소개

qrcode.js를 미니 프로그램의 해당 디렉토리에 복사하세요.

2.2 미니 프로그램에서 캔버스 태그를 생성하고 캔버스의 길이와 너비를 설정합니다.

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

2.3 캔버스 인스턴스 및 컨텍스트 가져오기

// 二维码的颜色
const colorDark = &#39;#000&#39;;
// 获取二维码的大小，因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 일부 변수를 정의하고 그림을 그립니다. QR 코드 영역

의 데이터 코드 중

QRCodeModel

은 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 完毕