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 >
- F9 ^; `: F" p, v7 U
<header class="mui-bar mui-bar-nav white">
& j7 F0 K I9 e7 m; G5 }5 i
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
7 H7 N+ ]5 h! k2 O1 D: H+ D
<h1 class="mui-title">二维码扫描</h1>' B% _% q5 |, k9 I3 D2 Q& E
</header>4 s% A- W' ^: a1 z `7 p1 q1 K% o, F
<div class="mui-content">* \. Y) J9 m& W; s7 n" V5 T
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
0 s( K# \6 P* I U1 I- n) T
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>7 p5 h* |2 |; A+ ^& @; j
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
9 V5 z' j+ {% X( J
<div id= "bcid"></div>
, T' j& |; B A" f( w
</div>8 j) @, h& z1 Y/ H! C
</body>% s' Y# m) q ^. r2 e7 r
<script>0 a% M" C3 `0 O* h; M3 M
mui.init({
( D6 {# O5 u. N5 X7 {
swipeBack:true //启用右滑关闭功能
9 j! n+ B7 ^5 ^$ y. F+ g& E/ |
});4 j+ J4 b5 K; v) ?9 r" B
var scan = null;
; t# _$ z- w5 X" W5 ~/ K! b/ M% a( q
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
6 n6 a, A4 D; n& O
// 条码识别成功事件' H4 B- s) e& Z
function onmarked( type, result ) {0 E/ B; Y+ s0 m
var text = '未知: ';
. Y# e) e) e5 h4 N$ B8 O, a E
switch(type){8 }2 a9 Y9 t# f' W
case plus.barcode.QR:
1 Y& E* v7 A9 R' H7 L3 ?% p7 U' U
text = 'QR: '; // 二维码+ [+ e- B' ]$ K$ A! ]6 G
break;
$ @- ?& ^% K# I. H" a! D2 o6 o
case plus.barcode.EAN13:7 y2 b8 `' c( J. D" E8 @
text = 'EAN13: ';. f8 X3 T4 q, O( i* @
break;
6 C: J+ s6 @7 G, y0 o! p0 u1 U
case plus.barcode.EAN8:, g0 k5 c0 ~6 n/ A& d( N
text = 'EAN8: ';# @! a. D6 k! ~- K, v! E7 H/ J
break;
8 U6 o8 L e. P# {7 B$ u
}
2 ?8 H+ c! P/ s2 o t1 |
alert( text+result );" X$ K4 P, E* ^6 l, q" T9 F4 L
}) s6 j. |% |9 N9 h3 B; e3 d
// 创建扫描控件
( w9 ]9 d2 a* l- S# l6 M/ i1 K
function startRecognize() {; b, C: x: [9 T
scan = new plus.barcode.Barcode('bcid');, e. q) V8 o: t
scan.onmarked = onmarked; ) ~* B8 F* d; T! ]
}6 u9 l+ ]; C2 N' O* R& R8 c
// 开始扫描
* i( i7 b% g" J
document.getElementById("startScan").addEventListener('tap',function(){& x' U2 Y0 ?( X" `2 s
startRecognize();1 P" ?. k) `" z/ v/ g F. G4 G
scan.start();8 F0 S! r: c2 C1 f
})/ S1 p, `. K, E) l
// 取消扫描
1 ]' |8 k& Z8 E8 B# R$ L
document.getElementById("cancelScan").addEventListener('tap',function(){. Q$ Z, b" p: S! b7 C( W( T6 U
startRecognize();9 \1 ^1 p# G* d" p3 z9 i
scan.cancel();
# |# p2 }2 G) I0 z( @$ x
})6 o! W4 D4 G4 A- P8 E' u
// 开启和关闭闪光灯
1 a; e f- [- a; b# a' d( Q/ r
document.getElementById("setFlash").addEventListener('tap',function(){
; h7 \7 S" H: }2 R, {
startRecognize();5 I U6 v7 P4 \9 c2 L5 a
isOpen = !isOpen;
# {. V4 u7 N+ O" n" I0 J
if(isOpen){ z) A; w9 r: c8 z' f& U, Q' H
scan.setFlash(true);( o3 Q/ N: z7 l4 j W3 H& c6 o
}else{. o6 a$ s; W2 q! r- Y
scan.setFlash(false);
$ e' J% l' q" |7 h$ [& [' p2 G
}
% c2 q$ c7 \+ ]; q5 w: H( T+ k" X. l
})
# u% w- r& K6 ]4 r- V& {# D
</script>% }$ b8 W( i( n, t! Z* m, a) K

复制代码

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

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

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