ミニプログラムでQRコードを生成する方法-ミニプログラム開発-php.cn

ホームページ

WeChat アプレット

ミニプログラム開発

ミニプログラムでQRコードを生成する方法

coldplay.xixi

Aug 14, 2020 pm 02:30 PM

QRコードアプレット

小さなプログラムから QR コードを生成する方法: まず、wxml ファイルに描画キャンバスを作成し、次に [weapp.qrcode.min.js] をプロジェクトにコピーし、最後に [drawQrcode()] を呼び出します。 QRコードを描画します。

ミニプログラムでQRコードを生成する方法

ミニプログラムによる QR コード生成方法:

1. キャンバスタグの作成

まず、wxmlファイルに描画用のキャンバスを作成し、width、height、canvasIdを定義します。ミニプログラムにはラベルを動的に作成するための API がないため、この手順は省略できません。

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

2. 描画メソッドを呼び出す

WeChat アプレットは NPM パッケージの導入をサポートしていないため、dist ディレクトリにある weapp.qrcode.min.js をプロジェクトにコピーできます。

アプレットが wepy などの NPM パッケージの導入をサポートするフレームワークを使用している場合は、weapp-qrcode NPM パッケージを直接インストールすることもできます。

npm install weapp-qrcode --save

js ファイルを導入した後、drawQrcode() を呼び出して QR コードを描画します。

import drawQrcode from &#39;weapp-qrcode&#39;
// 或者，将 dist 目录下，weapp.qrcode.min.js 复制到项目目录中
// import drawQrcode from &#39;../../utils/weapp.qrcode.min.js&#39;
drawQrcode({
  width: 200,
  height: 200,
  canvasId: &#39;myQrcode&#39;,
  text: &#39;https://github.com/yingye&#39;
}

API の説明

参数  说明  示例
width   必须，二维码宽度，与canvas的width保持一致  200
height  必须，二维码高度，与canvas的height保持一致 200
canvasId    必须，绘制的canvasId  &#39;myQrcode&#39;
text    必须，二维码内容    &#39;https://github.com/yingye&#39;
typeNumber  非必须，二维码的计算模式，默认值-1  8
correctLevel    非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }    1
background  非必须，二维码背景颜色，默认值白色   &#39;#ffffff&#39;
foreground  非必须，二维码前景色，默认值黑色    &#39;#000000&#39;