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 >
) d8 }6 R. A6 J. Q/ Z" X
<header class="mui-bar mui-bar-nav white">
- h- Q$ W; d/ e1 Y! A
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
( l& X4 G7 B8 W' @! y8 S
<h1 class="mui-title">二维码扫描</h1>1 a- C2 c2 k* c& G9 I+ J, O) F
</header>8 S0 ], |( u. ^, ~& T+ ^4 ^
<div class="mui-content">
- w. C) w: ?3 E4 S; n
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
! n+ S* D3 v9 q
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
) W) T- t) y6 ]: O
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>' I% A5 n$ ~$ n8 D% ~/ a2 j8 D$ ^
<div id= "bcid"></div>
: ^; ~ _0 f& `
</div>
# `5 z4 q" z. Z' k
</body>8 S& v; X# i/ U, L: ]) U7 {
<script>
8 R, g& A0 n$ |. `+ V
mui.init({
1 `, j: b B$ I, @7 b4 \+ o
swipeBack:true //启用右滑关闭功能
9 g$ M+ \1 p7 [" H2 C# y
});
0 S) N a; n6 F& \5 R- [
var scan = null;
4 C3 e* z/ i) q( j& K, y
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
( X7 ] j, h- B$ J
// 条码识别成功事件
4 Q) M' W* \" R& v/ i
function onmarked( type, result ) {
2 f) v/ x* o6 }) }
var text = '未知: ';2 n8 S9 Z. J7 d0 J. J
switch(type){
; W1 g: j# g/ `5 [' Z
case plus.barcode.QR:) Z5 N7 u; V; [; N, j. E) I
text = 'QR: '; // 二维码; z' f) K* x7 x- Q8 l
break;0 E1 l8 [0 M. }! s! E$ {
case plus.barcode.EAN13:
6 L1 X+ f& h6 ~$ _
text = 'EAN13: ';' j8 r6 x$ p5 n
break;
& s+ t7 J# g" ?: k! Y7 R' K q
case plus.barcode.EAN8:
; O0 v% q6 j& U- G3 H
text = 'EAN8: ';
) [: o n0 z& J, g- G" M6 |0 \
break;
}/ J& Z0 Y* f: K2 V+ p
alert( text+result );
* W3 @% w* u6 r9 [/ E
}: b- S6 o3 D! I# t' M) D$ ~
// 创建扫描控件
& x% M& O: W$ I: F" n& X
function startRecognize() {7 z" B+ w: d2 [/ O2 W. r: l
scan = new plus.barcode.Barcode('bcid');
+ r# g* }1 p* E) q# t
scan.onmarked = onmarked; 1 d/ r8 Y- O* q; _& K
}
& ~9 x' Q; L/ `8 K+ ^" o
// 开始扫描
. e/ q% P9 @0 ?6 i) f
document.getElementById("startScan").addEventListener('tap',function(){0 V5 R; O) T5 p7 [' H6 x( K
startRecognize();
- v3 t- m0 D0 N: k2 N6 Y1 M
scan.start();
9 P! R: S7 M) f7 s+ m
})
! Z4 ?/ m) {& m* ^! c" e
// 取消扫描
0 d1 N7 C+ i$ O
document.getElementById("cancelScan").addEventListener('tap',function(){6 c+ I' F. o1 K2 P N! b
startRecognize();
0 R9 P k* t& T# T4 r' k* L- _, v' h
scan.cancel();6 b# T$ z. d4 b& I; @2 P5 q
})
$ o/ U4 L' i; ?( t c! t, c
// 开启和关闭闪光灯
* G' \) z2 ^( Q6 n7 V0 [5 g8 H4 ~
document.getElementById("setFlash").addEventListener('tap',function(){
: C: u! r; Y2 L) K* U* H
startRecognize();
7 A* t0 z+ C. p. h6 W% Y* C
isOpen = !isOpen;7 [0 u% B% j) h8 d. S. B: V
if(isOpen){
. I% Q8 c. Z0 L5 X5 [+ i( c$ X* T8 K
scan.setFlash(true);1 L$ ~: f y% P! C
}else{- h* F* r3 C* I% A) P
scan.setFlash(false);
' B/ l5 Z* D9 I g7 A% I
}
% C* j' o* B) x' {/ j
})
6 [$ i( d1 K5 p* Q
</script>8 O: X0 z+ M" v/ _3 d

复制代码

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

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

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

浏览过的版块