微信小程序實現條形碼,二維碼生成和微信小程序掃碼

一：條形碼,二維碼生成

在微信小程序中生成條形碼和二維碼須要使用到wxbarcode的npm包，wxbarcode的npm包地址：https://www.npmjs.com/package...

1：安裝wxbarcode

npm i wxbarcode -S --production

在微信小程序項目中使用npm包參考：https://www.wj0511.com/site/d...

2：條形碼和二維碼生成

(1)引入wxbarcode包

在你須要生成條形碼和二維碼頁面的js中引入exbarcode包

import wxbarcode from 'wxbarcode'

或：

const wxbarcode = require('wxbarcode')

(2)條形碼生成

在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);
},

根據如上可實現條形碼生成：

(3)二維碼生成

在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);
},

根據如上可實現二維碼生成：

二：微信小程序掃碼

微信小程序掃碼使用到了微信自帶的API：wx.scanCode(Object object)

wx.scanCode的參數：

onlyFromCamera：是否只能從相機掃碼,不容許從相冊選擇圖片,默認爲false

scanType：掃碼類型,默認爲['barCode', 'qrCode'],參數能夠爲數組也能夠爲字符串,可選參數:barCode(一維碼),qrCode(二維碼),datamatrix(Data Matrix 碼),pdf417(PDF417 條碼 )

success：接口調用成功的回調函數,回調成功參數：result(所掃碼的內容),scanType(所掃碼的類型),charSet(所掃碼的字符集),path(當所掃的碼爲當前小程序二維碼時，會返回此字段，內容爲二維碼攜帶的 path),rawData(原始數據，base64編碼)

fail：接口調用失敗的回調函數

complete：接口調用結束的回調函數（調用成功、失敗都會執行）

實例：

// 容許從相機和相冊掃碼
wx.scanCode({
success(res) {
//掃碼成功執行
console.log(res)
},
fail(res) {
//掃碼失敗執行
console.log(res)
},
complete(res) {
//掃碼結束執行
console.log(res)
}
})

若是你只容許拍照掃碼的話你能夠增長以下參數：

onlyFromCamera: true,根據如上就能夠實現微信小程序掃碼