HBuilder webApp开发(十三)二维码扫描

admin · 发表于 2018-10-31 02:06:18

好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
《【iOS】CoreImage原生二维码生成（一）》
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
直接上代码，注释都在代码里面了。

<body >( z0 Q. p% f' B" Z2 [
<header class="mui-bar mui-bar-nav white">& b4 b: }$ n* b5 `. o
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>7 O( p- W' k9 H" E/ l( L! G
<h1 class="mui-title">二维码扫描</h1>1 K @* Q1 ]7 o7 w
</header>
* k5 [$ C4 P" F) t# H' w. n3 P$ L+ _
<div class="mui-content">1 J# P# r, G1 o* } f- s& P
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>% t. M- }) u$ r1 d
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
; V9 m; D" _/ L# T; R" i5 ~2 g
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>* ^& F1 ^+ ?$ [
<div id= "bcid"></div>
7 g% j8 A0 b$ M7 D8 H0 ?
</div>- V9 u5 A" O& j/ C5 A; t1 `6 @
</body># q3 j0 U& A% _
<script>
! @% [2 V M' X/ T
mui.init({
( {4 d3 |3 H; A$ c }# P( o
swipeBack:true //启用右滑关闭功能3 b% I* m3 v( V0 _
});
?4 C% F4 X% M6 S/ z; X
var scan = null;- A7 I+ @3 B- T. U
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
6 F* V6 m' I% D
// 条码识别成功事件
3 U: a8 n# ]: i! V7 r+ T% M
function onmarked( type, result ) {$ y: n4 b7 p k5 v
var text = '未知: ';7 K/ o1 l; @, _4 l: j/ L2 ]
switch(type){
% a# K+ D* l* |
case plus.barcode.QR:* {5 P; [% q: q; i9 j
text = 'QR: '; // 二维码
6 D* B4 y$ q( T. O
break;
1 t5 n# i- r0 L# K
case plus.barcode.EAN13:5 S! y C8 z8 ?( d9 W: n5 O2 ]
text = 'EAN13: ';& z* f9 c. J v: Q+ _7 P0 ^
break;" |. D0 k6 Y9 _+ [& [7 i' T* T
case plus.barcode.EAN8:! p) Q* z4 U/ U7 g
text = 'EAN8: ';
$ |5 t4 B0 e9 m( K# C+ ?
break;
( W. a: X3 o. k
}+ F" O* I. o& g+ b/ ~+ L
alert( text+result );
4 X, Z' t' a+ ?8 Q2 U" u+ Q
}; Z8 t. C) _* j2 s) C _
// 创建扫描控件2 E, H4 P9 {: O: ?6 W- a
function startRecognize() {
0 ?9 D8 W$ R2 u1 j% G/ S W& f! ?
scan = new plus.barcode.Barcode('bcid');& ^, x$ ~8 u' W7 r/ d, W8 q+ C# J
scan.onmarked = onmarked;
. p3 f! E% g a- h/ V- y* Q
}
) N2 ^8 N2 k( B7 `5 Z' b
// 开始扫描
" i* [& @& Z9 E) ]7 Q2 C w
document.getElementById("startScan").addEventListener('tap',function(){+ o- h; _/ N$ S! I0 f! R
startRecognize();' ?* p$ ~8 b5 Y+ ?
scan.start();( h! X9 Y2 u! y. u' y q# d
})
; p% g5 d2 w( R7 |) z
// 取消扫描
8 D' b% ~/ G' u' i' k
document.getElementById("cancelScan").addEventListener('tap',function(){5 b3 C4 S9 k0 D- p/ w# s
startRecognize();
e5 m+ E3 ^ E8 o `1 ^, S4 m
scan.cancel();
! f. q2 Z* a# _' T; z' H' B9 y0 n
})
$ K1 ?" U2 L8 W$ J
// 开启和关闭闪光灯5 t$ ]+ y; y* F, n
document.getElementById("setFlash").addEventListener('tap',function(){
% ]' N9 `5 `1 K; [# N) _* s
startRecognize();
- Q' m) Y2 [- V
isOpen = !isOpen;2 ?, ~9 q* {7 }* g
if(isOpen){% t4 k% I% n$ i6 D
scan.setFlash(true);/ B) f6 @( v" r5 n6 H; W
}else{
; R% V: V4 N9 }# c
scan.setFlash(false);2 r- H0 R. ~) H/ {& I) ?
}
/ b8 O5 z" l1 x, t& ]' ?
})
- h8 y: p% u! W4 W! X, w8 D: P
</script>
+ D% E5 ^3 W8 }9 Q9 E' L

复制代码

效果图什么的就不上了，和前面提到的文章中的效果图基本一样。

帐号		自动登录	找回密码
密码			立即注册

[HBuilder] HBuilder webApp开发(十三)二维码扫描