Maison  >  Article  >  Applet WeChat  >  Comment générer un code QR avec un mini programme

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

coldplay.xixi
coldplay.xixioriginal
2020-08-14 14:30:138844parcourir

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>

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

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

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;

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!

Déclaration:
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