小程序中生成二維碼和條形碼

使用wxbarcode模塊可以很方便地生成二維碼和條形碼。

效果

安裝

$ npm install wxbarcode

使用方法

import wxbarcode from 'wxbarcode'
 
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);

條形碼

函數名：barcode

函數原型：barcode(id, code, width, height)

參數：

• id: wxml文件中的 Canvas ID
• code: 用於生成條形碼的字符串
• width: 生成的條形碼寬度，單位 rpx
• height: 生成的條形碼高度，單位 rpx

二維碼

函數名：qrcode

函數原型：qrcode(id, code, width, height)

參數：

• id: wxml文件中的 Canvas ID
• code: 用於生成二維碼的字符串
• width: 生成的二維碼寬度，單位 rpx
• height: 生成的二維碼高度，單位 rpx

小程序案例

// 頁面所在的js文件
import wxbarcode from '../../utils/qrcode/index.js';
// ...
wxbarcode.barcode('barcode', res.data.voucher_info.closure_code, 680, 150);
wxbarcode.qrcode('qrcode', res.data.voucher_info.closure_code, 340, 340);

// wxml文件
<view class='barcode'>
   <canvas canvas-id="barcode"></canvas>
</view>
<view class='qrcode'>
   <!-- <image src='/assets/images/qrcode.png'></image> -->
   <canvas canvas-id="qrcode"></canvas>
</view>

本地wxbarcode目錄結構（從github download下來的目錄結構）