Maison > Applet WeChat > Développement de mini-programmes > Comment générer un code QR avec un mini programme

Comment générer un code QR avec un mini programme

coldplay.xixi
Libérer: 2020-08-14 14:30:53
original
8937 Les gens l'ont consulté

Comment générer un code QR par mini-programme : commencez par créer un canevas dessiné dans le fichier wxml ; puis copiez [weapp.qrcode.min.js] dans le projet ; enfin, appelez [drawQrcode()] pour dessiner ; Code QR.

Comment générer un code QR avec un mini programme

Comment générer un code QR par mini programme :

1. Créer une balise de toile

Tout d’abord, créez le canevas pour dessiner dans le fichier wxml et définissez la largeur, la hauteur et le canvasId. Étant donné que le mini-programme ne dispose pas d'API pour créer dynamiquement des étiquettes, cette étape ne peut être omise.

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
Copier après la connexion

2. Appelez la méthode de dessin

Étant donné que l'applet WeChat ne prend pas en charge l'introduction des packages NPM, vous pouvez copier weapp.qrcode.min.js dans le répertoire dist du projet.

Si votre applet utilise un framework qui prend en charge l'introduction de packages NPM, tel que wepy, vous pouvez également installer directement le package weapp-qrcode NPM.

npm install weapp-qrcode --save
Copier après la connexion

Après avoir introduit le fichier js, appelez drawQrcode() pour dessiner le code 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;
}
Copier après la connexion

Description de l'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;
Copier après la connexion

Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes WeChat

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal