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 >7 H' M5 r8 U" ?3 ?; }
<header class="mui-bar mui-bar-nav white">$ z3 m. k* k6 ` R
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
5 j0 _8 N+ v* }
<h1 class="mui-title">二维码扫描</h1>2 C( o) P1 f) ^# T
</header>
/ V; E& @; O. c0 }! ]
<div class="mui-content">. U/ E/ [7 V' }& X' @; g" j1 ]
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>+ {9 a8 F! B, l, J0 U5 S
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
% D7 Q7 O1 h, q. \, V4 ~7 c$ l
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
7 K8 T/ B3 G! v9 M4 U2 D7 P2 n
<div id= "bcid"></div>' E% l- m3 x! U$ M$ ^
</div>
- \$ q4 V; `" I8 _* l6 f: ?9 }3 \
</body>
% s* R0 m- A! U4 ^5 l
<script> M$ y# _: O3 i
mui.init({
9 s4 O4 R) v7 ~" a
swipeBack:true //启用右滑关闭功能. l$ v1 T3 q) R4 G1 a
});
! m5 k4 G0 _6 U7 P& U; E
var scan = null;
+ p3 M0 B# L/ ` z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
* O6 D$ U& N1 W; P/ c+ \
// 条码识别成功事件
6 [: @; J0 l" I% f
function onmarked( type, result ) {
; c! s( a8 a1 R) t' X
var text = '未知: ';
0 D! `: X: U" `0 g) X
switch(type){
0 ~/ r4 R3 X6 w8 Z! t
case plus.barcode.QR:' a; F# Y7 U8 _ N+ M
text = 'QR: '; // 二维码/ }+ N; t1 _+ g( `8 X( G
break;
' ?( f. `6 n( D! A. y+ f3 m
case plus.barcode.EAN13:
0 d; K6 r9 s/ S
text = 'EAN13: ';
break;$ i/ x2 y m9 J6 b& r
case plus.barcode.EAN8:
' {7 t' o/ U" [' i: l3 m: y
text = 'EAN8: ';
& b( {' q- ]4 D2 o( {
break;
% L/ I% G& P& G3 W/ X6 O7 M) v
}
2 s8 R% y' o4 S4 D5 k: t6 C$ J7 m# _
alert( text+result );5 d9 E* h* c1 C& {* T+ p' l6 T% k
}
/ x) ?4 k1 w" V/ t/ | o+ r, R
// 创建扫描控件
4 k$ [2 T- F3 h# ~( [
function startRecognize() {2 j% G( k! K; ?- |& t/ T2 O
scan = new plus.barcode.Barcode('bcid');
4 q4 ~/ a, o R; @$ z$ C- {! y3 A
scan.onmarked = onmarked; " r% c6 R- b0 y/ _, S
}
. A+ N$ ~) ~7 i0 ]' w# Z6 m
// 开始扫描( s6 g2 M; y, q V5 D$ K
document.getElementById("startScan").addEventListener('tap',function(){
3 j6 k( Y. ^9 n, B8 C7 x7 r. I% P
startRecognize();0 i$ F; `( j9 R9 O q
scan.start();! I% p! g2 O$ x$ k
})) Q( B3 J; D% ]/ v/ E5 f( Y
// 取消扫描
, j% W; t7 I: m1 L* X
document.getElementById("cancelScan").addEventListener('tap',function(){# B. M5 M2 F+ U1 @9 q( c
startRecognize();
% M% z5 G& \1 ?) n' R
scan.cancel();% X" h1 s7 Z7 d, d
})8 D$ u2 T: o/ T. _' ~5 Y& ^
// 开启和关闭闪光灯
9 ], y, j& `3 j
document.getElementById("setFlash").addEventListener('tap',function(){# i0 u4 O7 C, ~9 X' P/ g! A: v
startRecognize();; q/ y# H `* ]* e9 B
isOpen = !isOpen;& p2 j0 R, O0 v: I! X
if(isOpen){2 U, I- a- ^5 `( p7 c% V# G: Y
scan.setFlash(true);$ r7 H( f4 O* E- B- O( q7 Y2 U
}else{$ K% A5 Y& E$ V0 {
scan.setFlash(false);" l2 p8 S' G8 s& h2 B- W
}
) o7 y! p6 T7 w1 j: ^, F
}) b6 k" s, L) t" o; X$ I q
</script>
* W& z6 {. W# B7 A' m! E2 Q* H1 f0 ]

复制代码

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

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

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