Barcode模块管理条码扫描识别
Barcode模块管理条码扫描识别(一维码和二维码)
支持常见的一维码(如EAN13码)及二维码(如QR码), 通过调用设备的摄像头对条码进行扫描识别, 扫描到条码后进行解码并返回码数据内容及码类型
一.常量
- QR: QR二维码, 数值为0
- EAN13: ENA条形码标准版, 数值为1
- EAN8: ENA条形码简版, 数值为2
- AZTEC: Aztec二维码, 数值为3
- DATAMATRIX: Data Matrix二维码, 数值为4
- UPCA: UPC条形码标准版, 数值为5
- UPCE: UPC条形码缩短版, 数值为6
- CODABAR: Codabar条形码, 数值为7
- CODE39: Code3条形码, 数值为8
- CODE93: Code93条形码, 数值为9
- CODE128: CODE128条形码, 数值为10
- ITF: ITF条形码, 数值为11
- MAXICODE: MaxiCode二维码, 数值为12
- PDF417: PDF417二维条码, 数值为13
- RSS14: RSS 14条形码组合码, 数值为14
- RSSEXPANDED: 扩展式RSS条形组合码, 数值为15
二.方法
2.1 scan: 扫码识别图片中的条码
输入图片文件进行扫码识别, 成功扫描到条码(一维码或二维码)后通过successCallback回调返回, 失败则通过errorCallback回调返回
void plus.barcode.scan(path,successCB,errorCB,filters,autoDecodeCharset);
2.1.1参数
- path: (String) 要扫码的图片路径
- successCB: 扫码识别成功回调函数
- errorCB: (可选)扫码识别失败回调函数
- fiters:(array)(可选)条码类型过滤器(设置支持的条码类型越多, 扫描识别速度可能将会降低)
- autoDecodeCharset: (Boolean) (必选) 自动解码字符集. 默认值false
- false - 将二维码解码数据当做utf-8字符集处理, 对于非utf-8字符集数据可能会出现乱码
- true - 自动检测二维码解码数据, 兼容处理utf-8、GBK、Big5编码格式的字符
// 从图片中扫码识别
function scanImg() {
plus.barcode.scan( '_www/barcode.png', function(type,result) {
console.log("Scan success:("+type+")"+result);
}, function(e){
console.log("Scan failed: "+JSON.stringify(e));
} );
}
2.2 create: 创建扫码识别控件对象
创建扫码识别控件并不会显示在页面中, 需要电泳plus.webview.Webview窗口对象的append方法将其添加到Webview窗口中才能显示. 需要设置styles参数的top/left/width/height属性指定扫码识别控件的位置及大小, 否则可能无法正确显示
2.2.1参数
-
id:(String)扫码识别空间的标识
可用于通过plus.barcode.getBarcodeById()方法查找已经创建的扫码识别控件对象
-
filters: (Array[Number])(可选)条码类型过滤器
-
styles:(BarcodeStyles)(可选)扫码识别控件样式
-
autoDecodeCharset:(Boolean)(必选)自动解码字符集
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
barcode: null, //创建扫一扫对象
result: '', //扫描结果
flash: false,
};
},
onShow() {
// 页面展示时，重新启动扫描检测
if (this.barcode) {
this.barcode.start()
}
},
onLoad() {
plus.navigator.setFullscreen(true); //全屏
let currentWebview = this.$scope.$getAppWebview();
console.error(currentWebview)
this.createBarcode(currentWebview)
},
methods: {
createBarcode(currentWebview) {
if (!this.barcode) {
this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: `0px`,
left: '0px',
height: `100%`,
width: '100%',
position: 'absolute',
background: '#FFCC00',
frameColor: '#FFCC33',
scanbarColor: '#FFCC33',
});
console.log(this.barcode)
this.barcode.onmarked = this.onmarked;
this.barcode.setFlash(this.flash);
//注意扫码区域需为正方形，否则影响扫码识别率
currentWebview.append(this.barcode);
}
this.barcode.start()
},
// 扫码成功回调
onmarked(type, result) {
console.log('条码类型：' + type);
console.log('条码内容：' + result);
uni.navigateBack({
delta: 1
})
// 业务代码
// 核对扫描结果
// 判断是否是正确的格式
// 不正确则跳转到 错误页面
}
}
}
</script>
<style lang="scss">
</style>
2.3 getBarcodeById: 查找扫码识别控件对象
根据指定的id(标识)查找扫码控件对象, 可跨页面进行查找
2.3.1 参数
- id: (String)(必选) 扫码识别控制的标识.
var barcode = null;
// 创建扫码控件
function createBarcode() {
if(!barcode){
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top:'100px',
left:'0px',
width: '100%',
height: '500px',
position: 'static'
});
barcode.onmarked = function(type, result){
console.log('Success: type='+type+', result='+result);
};
plus.webview.currentWebview().append(barcode);
}
barcode.start();
}
// 查找扫码控件
function findBarcode() {
var b = plus.barcode.getBarcodeById('barcode');
if(b){
console.log('find success!');
} else {
console.log('find failed!');
}
}
2.4 Barcode 扫码识别控件对象
可通过plus.barcode.create创建, 也可通过new plus.barcode.Barcode构造(仅在5+APP中使用)创建. 扫码识别控件将使用设备的摄像头预览扫描内容, 在控件中显示扫描基准框等用户交互元素.
2.4.1 方法
-
cancel: 取消扫码识别
结束对摄像头捕获图片数据进行条码识别操作, 同时关闭摄像头的视频捕捉. 结束后可调用start方法重新开始识别.
-
close: 关闭条码识别控件
释放控件占用系统资源, 调用close方法后控件对象将不可使用.
-
setFlash: 操作闪光灯
void obj.setFlash(open);- 说明
设置扫码识别控件在扫码时是否开启摄像头的闪光灯, 默认值为不开启闪光灯
- 参数
open: (Boolean)是否开启闪光灯
可取值true或false, true表示打开闪光灯, false表示关闭闪光灯
-
setStyle: 设置扫码识别控件的样式
void bc.setStyle(styles);- 说明
用于动态更新扫码识别控件的显示样式参数
- 参数
styles: (BarcodeStyles)要更新的样式参数
- 实例
var barcode = null; // 创建Barcode扫码控件 function createBarcode() { if(!barcode){ barcode = plus.barcode.create('barcode', [plus.barcode.QR], { top:'100px', left:'0px', width: '100%', height: '500px', position: 'static' }); plus.webview.currentWebview().append(barcode); } barcode.start(); } // 更新Barcode扫码控件 function updateBarcode() { barcode.setStyle({ top:'200px' // 调整扫码控件的位置 }); } -
start: 开始扫码识别
-
说明:
调用设备的摄像头在控件中预览, 并获取捕获数据进行扫码识别, 当识别出条形码(二维码)数据时触发onmarked事件返回扫码结果.
-
参数:
optons: (BarcodeOptions)(可选)扫码识别的参数
通过此参数可设置是否获取扫码成功的条码截图等.
-
2.4.2 事件
-
onmarked: 扫码识别成功事件
void bc.onmarked = function(type,code,file){ }-
说明: BarcodeSuccessCallback类型
扫码识别控件成功识别到条码(二维码)数据时触发的事件, 并返回扫码结果.
-
-
onerror: 扫码识别错误事件
-
说明: BarcodeErrorCallback类型
扫码识别控件在扫码过成功发生错误时触发的事件, 并返回错误信息
-
2.4.3 BarcodeStyles Barcode扫码控件样式
interface plus.barcode.BarcodeStyles{
attribute String background;
attribute String frameColor;
attribute String scanbarColor;
attribute String top;
attribure String left;
attribure String width;
attribure String height;
attribure String position;
}
-
说明:
设置Barcode扫码控件的样式, 如扫码框、扫码条的颜色等
-
属性:
- background: (String类型)条码识别控件背景颜色, 默认红色
- frameColor: 扫码框颜色, 默认红色
- scanbarColor: 扫码条颜色, 默认红色
- top: Barcode扫码控件左上角的垂直偏移量
- left: Barcode扫码控件左上角的水平偏移量
- width: Barcode扫码控件的宽度
- height: Barcode扫码控件的高度
- position: Barcode扫码控件在Webview窗口的布局模式