微信小程序使用第三方Npm包实现条形码,二维码详细的教程

1:在你的微信小程序项目根目录执行

npm init -y
参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值。

2:下载wxbarcode到项目中

npm i wxbarcode -S --production
此处请务必使用 –production 选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。

3:勾选开发这工具右上角详情→本地设置→使用Nmp模块.

4:点击菜单栏→工具→构建Nmp.

5:引入wxbarcode包

import wxbarcode from 'wxbarcode'
或
const wxbarcode = require('wxbarcode')

6:条形码生成

在wxbarcode包中生成条形码使用到了barcode函数，barcode的函数原型为：

barcode(id, code, width, height)
参数说明：

id: wxml文件中的 Canvas ID

code: 用于生成条形码的字符串

width: 生成的条形码宽度，单位 rpx

height: 生成的条形码高度，单位 rpx

条形码生成实例：

wxml：

<canvas canvas-id="barcode" />

js：

onLoad: function (options) {
    wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
},

7:二维码生成

在wxbarcode包中生成二维码使用到了qrcode函数，qrcode的函数原型为：

qrcode(id, code, width, height)
参数说明：

id: wxml文件中的 Canvas ID

code: 用于生成二维码的字符串

width: 生成的二维码宽度，单位 rpx

height: 生成的二维码高度，单位 rpx

二维码生成实例：

wxml：

<canvas canvas-id="qrcode" />

js：

onLoad: function (options) {
    wxbarcode.qrcode('qrcode', '1234567890123456789', 300, 300);
},