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 >+ z9 @; M0 b, C3 l0 ]+ h; h: P' O# a: Z
<header class="mui-bar mui-bar-nav white">) E, J5 b% y+ W* q5 _& F- a- l; Y5 d+ B
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- F* D" i; l6 ]$ A$ i
<h1 class="mui-title">二维码扫描</h1>: ]1 O, m+ ?+ |" ]! W7 L
</header>
; J. n/ J* X( S8 [+ b
<div class="mui-content">0 K' e8 E* J; {- f7 f
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>6 F" n; S0 M! X
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
" s" X& d# F9 z0 f: _
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button> K9 E* R8 }5 U1 l9 b
<div id= "bcid"></div>& i. q2 q4 k! w0 d; ?; V7 a
</div>7 R! ]3 o: |* v! I
</body>+ Z+ F0 y* r+ i+ p7 U* x
<script>
7 t) c3 O# ?2 Y1 K- \% |# y0 u& y2 |
mui.init({3 j- V0 d# f8 S1 }. k* q
swipeBack:true //启用右滑关闭功能. b T6 ?5 L/ I9 v' m
});) B+ b( w, d% Y2 s2 Y7 v
var scan = null;
( x$ [+ f! P$ g
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭4 l" I5 J0 C. d2 Y9 [
// 条码识别成功事件0 h7 _) |: C, U# j" G, s
function onmarked( type, result ) {* _3 e1 F! a' [
var text = '未知: ';& m* e0 w) U. }1 W: Z8 d
switch(type){+ ]6 y# g0 a3 U
case plus.barcode.QR:" h4 O9 ?+ M# }, ?$ B& P
text = 'QR: '; // 二维码. p+ z( X* h- {, o- \' w/ Y, B. e
break;
- z: n' a0 f1 U& y
case plus.barcode.EAN13:3 }( V- }# P" @. q8 e& D- h( q4 A$ h. C
text = 'EAN13: ';" Q7 t0 O* e" s J/ ?2 B9 {" n
break;
" v$ O; M6 t) }( Y9 a) ?* F
case plus.barcode.EAN8:# U6 K2 S/ R% O, m
text = 'EAN8: ';
! ~- j% M6 b5 {6 n* h9 k0 @
break;+ v4 B) x5 {6 Q5 X
}
+ f1 c# b% {: Q) D2 h4 B
alert( text+result );
" ?# m0 P) i' f% F9 u" s: Z
}
3 M. D0 w$ V8 x; J8 }+ C/ E. M
// 创建扫描控件
) K2 q4 b# h. p, k% B B" W
function startRecognize() {
. S0 Q+ T, _& J& n, A9 j1 n
scan = new plus.barcode.Barcode('bcid');
3 w# s+ |# |: _+ R0 g6 p8 J0 \
scan.onmarked = onmarked;
E$ p7 I7 P0 S& @8 K8 {4 `
}, d: z$ R9 U ?) M6 R5 s9 n1 b
// 开始扫描2 s: x5 E4 X: s" \) g y7 g( r
document.getElementById("startScan").addEventListener('tap',function(){
* t+ R( P1 z7 t9 ]+ F- }6 _. V
startRecognize();
7 _3 H$ `3 s. j
scan.start();
: s6 V& M/ [6 G/ w4 t1 O
})0 }: F; h9 ?$ n5 i
// 取消扫描
# V3 [8 I2 h9 L5 I2 x
document.getElementById("cancelScan").addEventListener('tap',function(){4 t: q. w5 I# Z* h
startRecognize();
' z, R0 d" }! z h8 d; Q$ y1 N
scan.cancel();' p; A; H3 S; B: N
})
$ ]" R1 y) H- U/ Q. `- K
// 开启和关闭闪光灯) n$ o/ q; }2 P8 }6 y$ o: [1 k* j/ Y
document.getElementById("setFlash").addEventListener('tap',function(){( t& T: m/ V% W8 L9 Y* f
startRecognize();% B' K; @7 [+ R, e" s3 H. U5 N; W3 `/ ?
isOpen = !isOpen;' ]; ?3 ^8 r7 k
if(isOpen){5 a7 I1 ?3 T% F& ]" |% b* C
scan.setFlash(true);9 t8 [6 s1 j/ [# n5 v% Y
}else{: r3 P Q) O6 d- n( S: e5 Q
scan.setFlash(false);7 a- _5 ?- u) {0 R; a
}
3 C1 F5 a" R e6 n
})
$ X1 C& X4 ]$ z, R* @/ o
</script>
( o1 {+ s; R8 n% _. j/ T8 o3 Z! f8 z

复制代码

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

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

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