開發手機APP時經常需要用到掃描二維碼/條碼的功能，在使用MUI框架開發時，我們可以使用H5plus封裝好的Barcode類。Barcode模塊管理條碼掃描，提供常見的條碼（二維碼及一維碼）的掃描識別功能，可調用設備的攝像頭對條碼圖片掃描進行數據輸入。通過plus.barcode可獲取條碼碼管理對象。
具體可參照官方文檔：http://www.dcloud.io/docs/api/zh_cn/barcode.shtml
該類的主要方法：
1、通過圖片掃描條碼數據：
void plus.barcode.scan( path, successCB, errorCB,filters );
2、開始條碼識別：
void bc.start( options );
3、結束條碼識別：
void bc.cancel();
4、是否開啓閃光燈
void obj.setFlash( open );
5、條碼識別成功事件
void obj.onmarked = function ( type, code, file ) {
//loaded code
}
下面我講述下我們項目中用到的情況及一些注意事項。
1、創建Barcode對象，須指定Barcode對象的在界面中關聯div或object標籤的id號；
2、Barcode會加載在Webview的最頂層，並且無法隱藏，只有關閉Webview時Barcode纔會自動關閉；
3、可通過filters參數設置需要支持條碼類型，設置類型越少越能提高掃描效率。
如果需要使用複雜的組合，可以將Webview作爲其它Webview的子窗口，子窗口中包含Barcode，當子窗口隱藏時Barcode也會隱藏。
由於Barcode附屬於Webview上，並且只有在Webview關閉時才自動銷燬的特點，我在項目中使用一個Webview來加載Barcode，並將條碼掃描方法封裝成公共API供外部調用，
Webview中定義以下事件：
//開始掃描事件
doc.addEventListener('startScan',function(event) {
if(scan) {
startScan(event.detail.notClose);
}
});
//停止掃描事件
doc.addEventListener('endScan',function() {
if(scan) {
scan.cancel();
}
});
VarflashOpen=false;
// 開啓閃光燈事件
doc.addEventListener('setFlash',function() {
if(scan) {
flashOpen= !flashOpen;
scan.setFlash(flashOpen);
}
});並定義以下方法：
function startScan(notClose) {
_notClose = notClose;
//若是需要將結果返回文件
scan.start({
conserve: true,
filename: _filePath
});
}
functioninitScan(view) {
//var filter = [plus.barcode.CODE128, plus.barcode.EAN13];
//var scan = new plus.barcode.Barcode('divReg');
scan = new plus.barcode.Barcode(view /*, filter*/ );
scan.onmarked = onmarked;
}
functiononmarked(type, result, file) {
switch (type) {
caseplus.barcode.QR:
type = "QR";
break;
caseplus.barcode.EAN13:
type = "EAN13";
break;
caseplus.barcode.EAN8:
type = "EAN8";
break;
default:
type = "其它";
break;
}
varself = plus.webview.currentWebview();
varopener = self.opener();
scan.cancel();
mui.fire(opener, 'endScan', {
result: result,
file: file
});
//繼續掃描，不關閉掃描窗口
if (_notClose) {
setTimeout(function() {
startScan(true);
}, 1000);
} else {
self.hide();
}
}定義供外部調用的API：
function($, owner) {
var_scanWindow = null;
owner.InitScan = function(filePath) {
_scanWindow = mui.preload({
url: '/view/CommonHelper/ScanCanvas.html',
id: 'scanCanvas',
waiting: {
autoShow: true,
title: '正在加載...'
},
extras: {
filePath: filePath
}
});
};
/**
* 開始掃描
* @param {Object} isContinue 是否連續掃描
*/
owner.BeginScan = function(isContinue) {
mui.fire(_scanWindow, 'startScan', {
notClose: isContinue
});
_scanWindow.show();
};
/**
*結束掃描
*/
owner.EndScan = function() {
mui.fire(_scanWindow, 'endScan');
}
}(mui, window.BarcodeUtil = {}));
在其他頁面調用掃描時，只需要調用BarcodeUtil.InitScan()方法初始化（用於預加載Webview，改善直接openwindow帶來的加載等待操作，改善體驗），調用BarcodeUtil. BeginScan()方法開始掃描，調用BarcodeUtil.EndScan()方法結束掃描。
調用頁面須定義掃描處理事件
// 自定義掃描結束事件
window.addEventListener('endScan',owner.EndScan);在該事件中處理掃描結果。
掃描的方法就此完成了，其實只不過直接調用官方提供的API，使用的時候注意一些東西便是。H5 plus提供的接口還是很方便的。
