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 >
" A5 A+ M9 Q: c( [- w3 H
<header class="mui-bar mui-bar-nav white">2 K* d; b( c* f! U
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>% Q' \5 }6 ^% m! Z
<h1 class="mui-title">二维码扫描</h1>/ ?! O3 p# h, f+ l/ ?, p1 G1 f
</header># s0 a% g! o! p$ @5 w
<div class="mui-content">6 ^: g. e; m# k0 j8 K6 S9 D
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>: R- }9 E K( a9 ?& C% d! ]. J1 v( `; g* `
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
4 m9 t# o4 l9 q9 `3 i8 t+ o
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
+ M9 J% D9 f+ H' l
<div id= "bcid"></div>3 O2 D N v( Q
</div>+ q# k4 C" ]0 ]+ A* e+ ^7 H3 g
</body>
4 L& J0 p8 f% R$ R ?( P6 o
<script>) O$ o/ C# _7 L# m/ f' Z
mui.init({
) m0 S [' _6 n7 N" }( W: }
swipeBack:true //启用右滑关闭功能" \; V! u2 d# \7 P. a, V9 |, n! `
});
3 R9 F* z' c8 F1 t: O
var scan = null;% \5 j5 j, a0 T- x, F2 }+ ~
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
% s* [1 z1 t' X' q/ l
// 条码识别成功事件! c N7 _* S4 S1 Y9 f* ^
function onmarked( type, result ) {
; U8 ^5 ~8 q1 V9 w& E2 t+ t2 D
var text = '未知: ';
. a8 Q0 b7 n0 Q7 K
switch(type){5 Z* h, E1 q: I
case plus.barcode.QR:" g0 R" f6 A8 k+ U
text = 'QR: '; // 二维码
9 y8 F3 Z0 s ]5 k2 f
break;! M! L9 v& Y0 d0 S- W. |; F
case plus.barcode.EAN13:
1 V9 m: H+ H1 g6 C. h
text = 'EAN13: ';; n1 l( ^3 U% a& h! K& b. J
break;
: N- M: D7 U0 X0 e* ~( h- C
case plus.barcode.EAN8:
0 u8 j3 i. O( e) M+ z
text = 'EAN8: '; V/ w( a- f1 L0 I$ ^/ y
break;& r0 l0 v9 `9 Q! F8 W% y: }9 T3 g
}
4 ~: d! b# a1 G7 l. a+ M
alert( text+result );
! a: g7 `6 @! L8 O) C% U! [" A
}
; s6 c8 e5 _0 y; h( K) b
// 创建扫描控件
" t( z* k& I" T& v+ M" B$ O
function startRecognize() {
% U( f$ |, `2 ^8 D" f
scan = new plus.barcode.Barcode('bcid');8 k* T! h5 D9 v
scan.onmarked = onmarked; ! K( }9 |; F6 r: q3 H( C r+ \
}
7 _1 H4 ^! H. T1 Q$ t6 s
// 开始扫描* O" c9 p' x* p% z+ ]
document.getElementById("startScan").addEventListener('tap',function(){
3 t' g; J7 J" U! v# l. z# w
startRecognize();' Y' f9 w+ k% d$ H: H+ S% [
scan.start();
) t: K- j2 s; c: E- o" x
})
- p6 ], v1 |# ]8 Q1 W4 M$ b
// 取消扫描
0 o, _9 H0 f. \& ?) o* g7 X) z
document.getElementById("cancelScan").addEventListener('tap',function(){
b: J7 O" S/ ^6 s( X3 r. r; O
startRecognize();* ?, h% y6 |1 y, s2 C
scan.cancel();. S2 L) K1 O$ A( J" j
})7 f7 y: C A. d6 Q
// 开启和关闭闪光灯2 o% @8 n! a2 U2 M
document.getElementById("setFlash").addEventListener('tap',function(){: A' [) I: T8 x2 k# u* a# J
startRecognize();
& D8 C+ l7 x/ I2 V
isOpen = !isOpen;
) f# j! ]- Z0 y1 I0 s! w
if(isOpen){, F3 v4 o+ S* L/ T. M- R
scan.setFlash(true);5 h! { H: l1 ~+ j. L
}else{
3 P/ |% l' D. k+ ~/ V% w$ O( d- E% _
scan.setFlash(false);2 U) P: e R x9 r7 k
}
' s! b6 Y6 t, l, ?' d8 ^1 s
})6 i* p! ^* C" j" S* U' b
</script>
" ~2 `& F. @+ O. b4 \

复制代码

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

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

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