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 >: |8 K9 W. j4 G; V
<header class="mui-bar mui-bar-nav white">
# x" q4 p; P1 j, f$ z/ f2 ]8 g- ~, y
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
! }3 N' u! U# B) c1 D5 A
<h1 class="mui-title">二维码扫描</h1>
' ~1 x& \$ J; ]' _! b7 S9 E+ k4 v
</header>! K0 |% j5 l/ _' \
<div class="mui-content"># s0 {4 \8 a7 V" _, \
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
7 y, `" ]! a. y( }
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>2 a" T6 D/ o. h- U/ A& f+ {# b& U
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
I# N9 a! @9 D; U
<div id= "bcid"></div>
( ~6 R0 W2 D9 z$ H2 g/ C2 E, G6 G
</div>
4 |* U ?! Y0 S: U
</body>
; r2 \2 E2 l1 V3 j. L/ {; r3 d
<script>
, O. o4 t$ b2 t2 h
mui.init({
+ W4 Y: P9 d0 g5 s% w0 }, Z
swipeBack:true //启用右滑关闭功能
# J0 U0 N/ a# x
});$ ^! \$ o2 H' P3 ?+ v5 d0 \8 v9 `
var scan = null;
% d7 R8 t9 Q+ o9 ?
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
. c3 M X$ m4 O% \
// 条码识别成功事件! s. d! w- B1 S: d- `, ^
function onmarked( type, result ) {
. q/ a! N4 [0 G" ^. T7 d/ U# g" w
var text = '未知: ';
$ w {* L1 C% [' c
switch(type){. o5 `; }6 C; C& R n) K6 F j* ]
case plus.barcode.QR:
% U8 j: g& {5 l7 C. ]
text = 'QR: '; // 二维码
( Y' z) t% v; [+ ?' a* A
break;
! L* z1 y1 Q' y+ v: c2 Y, H, P
case plus.barcode.EAN13:
$ l$ c2 s# `+ c/ t! X1 j8 d9 q
text = 'EAN13: ';
# L& b- z. C1 a! H \/ W
break;6 O( t% F2 I! _) P2 n
case plus.barcode.EAN8:9 T: T# ? G' K% u0 ?
text = 'EAN8: ';
5 Y! c' W( S ]# K/ M
break;' @5 G! |( Y8 ^( X3 I2 b! G
}3 Y+ a9 K* r" m6 ]4 @
alert( text+result );% O( n0 P8 j: ^: m5 z
}
- u3 D/ r9 q5 ^* ~6 l
// 创建扫描控件
X9 X, c2 H. ]- X5 |2 v% x
function startRecognize() {
& W" |7 J# _0 G1 O( i
scan = new plus.barcode.Barcode('bcid');# p/ x+ T8 ^3 _( x9 T6 Q2 ]8 y7 i' {
scan.onmarked = onmarked;
5 Q' n2 |- ?' O6 ~; g
}
$ o& o$ k' c# [- [. [/ P) e
// 开始扫描+ X; G" l& ]6 g! h! n8 n0 P6 t
document.getElementById("startScan").addEventListener('tap',function(){
3 ]( e: Y& z4 o: L( Y$ t
startRecognize();
( p2 K# X) L% G1 w2 v
scan.start();4 [1 k& Y4 h# C: w
})1 s& S D+ C) F+ K2 f% ?/ W: j
// 取消扫描; |. \2 ^5 x P' j" p
document.getElementById("cancelScan").addEventListener('tap',function(){0 m" R# c8 J2 }, a
startRecognize();
, b' K& W) B l: i* _! t: s
scan.cancel();
, a( m8 V1 p- d, k
})
0 y$ p( t% p7 y% x! _ S# E
// 开启和关闭闪光灯# L! [& X' ] a' H/ J/ ^5 _
document.getElementById("setFlash").addEventListener('tap',function(){
4 q1 v( V) H1 l( ^
startRecognize();1 `3 V5 i0 B. E- C6 n, [- o" s1 z
isOpen = !isOpen;
$ c% a! D2 U/ r8 ]7 G
if(isOpen){
- ^$ Z; I3 `2 ~+ p5 n6 y# v+ R
scan.setFlash(true);. Q% n, ~; {4 [& I% z* _* Z
}else{0 ^7 @7 }' b+ e; ~& B
scan.setFlash(false);
* @, Q5 X' e( g7 I
}$ f# T, p4 J3 J. n w+ _
})
+ Q. t( s7 c' W
</script>6 p- A3 w9 Z2 U/ h

复制代码

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

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

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