I haven't written the column "HBuilder webApp App Development" for a long time . For the past two days this week, I have nothing to do with arrogance, so I wrote this QR code scanning demo against the official document barcode .
When I was doing native development before, I wrote about QR code scanning, identifying QR codes in pictures, and QR code generation. For details, see these:
"[iOS] Native QR Code and Barcode Scanning under AVFoundation Architecture"
"[iOS] CoreImage Native QR Code Generation (1)"
"[iOS] CoreImage Native QR Code Generation (2) A Method Generate QR code with logo"
When I was making H5 APP, I also wrote "HBuilder webApp development (11) QR code generation" before .
Both native development and H5 development have been written, and it is found that the amount of development code in H5 will be less, but this depends on whether the project is native development or H5 development. The overall feeling is that it is not difficult to scan and generate QR codes. Read the documents carefully, clarify your ideas, modify the official Demo, and then test it.
Go directly to the code, and the comments are all in the code.
<body >
<header class="mui-bar mui-bar-nav white">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">二维码扫描</h1>
</header>
<div class="mui-content">
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
<div id= "bcid"></div>
</div>
</body>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
var scan = null;
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
// 条码识别成功事件
function onmarked( type, result ) {
var text = '未知: ';
switch(type){
case plus.barcode.QR:
text = 'QR: '; // 二维码
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert( text+result );
}
// 创建扫描控件
function startRecognize() {
scan = new plus.barcode.Barcode('bcid');
scan.onmarked = onmarked;
}
// 开始扫描
document.getElementById("startScan").addEventListener('tap',function(){
startRecognize();
scan.start();
})
// 取消扫描
document.getElementById("cancelScan").addEventListener('tap',function(){
startRecognize();
scan.cancel();
})
// 开启和关闭闪光灯
document.getElementById("setFlash").addEventListener('tap',function(){
startRecognize();
isOpen = !isOpen;
if(isOpen){
scan.setFlash(true);
}else{
scan.setFlash(false);
}
})
</script>The renderings are not on the list, which is basically the same as the renderings in the aforementioned article.
Code download address: please click me!