微信小程序中生成二維碼工具：weapp.qrcode.js

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：118

前言

在(zài)近期的(de)小程序開發中，有一個(gè)離線生成二維碼的(de)需求。當時(shí)想到(dào)了(le／liǎo)一些優秀的(de)前端開源庫 jquery-qrcode 和(hé / huò) node-qrcode，由于(yú)小程序中沒有DOM的(de)概念，這(zhè)些庫在(zài)小程序中并不(bù)适用。

所以(yǐ)，針對微信小程序的(de)特點，封裝了(le／liǎo) weapp.qrcode.js ，用于(yú)在(zài)小程序中快速生成二維碼。效果如下圖：

下面來(lái)介紹一下使用方法：

使用

創建canvas标簽

先在(zài) wxml 文件中，創建繪制的(de) canvas，并定義好 width, height, canvasId 。由于(yú)小程序沒有動态創建标簽的(de)api，所以(yǐ)這(zhè)一步不(bù)能省略。

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

調用繪制方法

由于(yú)微信小程序不(bù)支持引入NPM包，可以(yǐ)将dist目錄下，weapp.qrcode.min.js 拷貝至項目中。

如果你的(de)小程序使用了(le／liǎo)支持引入NPM包的(de)框架，如 wepy , 也(yě)可以(yǐ)直接安裝 weapp-qrcode NPM包。

npm install weapp-qrcode --save

引入 js 文件後，調用 drawQrcode() 繪制二維碼。

import drawQrcode from 'weapp-qrcode'
// 或者，将 dist 目錄下，weapp.qrcode.min.js 複制到(dào)項目目錄中
// import drawQrcode from '../../utils/weapp.qrcode.min.js'

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
}