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 >1 Q- a# L$ f& x+ M/ x1 [! f# h# |1 C: B( x
<header class="mui-bar mui-bar-nav white">
! c: d; w' N3 b$ B6 j7 O$ f% \
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
* _" p I, v/ j8 i
<h1 class="mui-title">二维码扫描</h1>
2 _) ]+ Q4 i& A1 E% F
</header>
$ S3 x# t+ Q7 z; o2 F5 C
<div class="mui-content">
# R) y% ]% F- }9 b- u
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
9 z& V/ }9 O+ w) S' O) R: G- b( \
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
/ ~* Q7 p8 d; e, b- h; d3 [' R
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>% ~3 q$ U" v3 ?/ Q9 B
<div id= "bcid"></div>+ S* _2 `2 W! X
</div>
% j/ E) e! N8 m; x; J& {
</body>/ f) p, p3 U6 l, v
<script>
* ?$ g0 t8 J6 e6 |$ E
mui.init({+ o2 p' B& E5 V9 s c; P F
swipeBack:true //启用右滑关闭功能+ R" t. V/ R9 _0 F+ V, L7 [- s
});
8 h* o1 X, N' e* e$ Y# [( y
var scan = null;
7 ~) A& V. Q8 _/ m8 Q. t
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
1 J) @: v- J" S' O5 v! [( |& }) U
// 条码识别成功事件
8 v- ]5 q6 G. ?. O, a( Y- j' n
function onmarked( type, result ) {% [- H0 u, s/ r
var text = '未知: ';
% S* Y! L. I3 m8 T1 {1 V
switch(type){
$ s5 t6 v( E- s3 @
case plus.barcode.QR:
& T0 K5 s* \ G1 E' s2 Y8 C
text = 'QR: '; // 二维码. ^! O% s5 V; b1 j4 i& \
break;
/ s$ V' o$ u8 |; T8 C6 n+ p
case plus.barcode.EAN13:
/ w3 w6 n& S! H3 m3 Y- x: M
text = 'EAN13: ';
; \- p2 N' X) S* z/ F/ v
break;
7 y7 n2 P* {' H# w
case plus.barcode.EAN8:
" O* e/ S# Q' s
text = 'EAN8: ';
5 n- Y' K/ b! |' @9 |
break;8 I/ h- V: a+ E
}( X: W3 B$ Z) b4 V3 |6 k
alert( text+result );- o9 ?" h8 x8 S- Q1 {
}' A X$ o% v' z0 t' u% N) m5 y
// 创建扫描控件
# p: t5 t1 A) u
function startRecognize() {
. ?; Z- t8 d" k$ A+ t5 L
scan = new plus.barcode.Barcode('bcid');
& C# \. s6 } u1 D- N3 y; q
scan.onmarked = onmarked;
- P" T1 \. x- K) C. Y' e" I, Y
}
% B c Q `" ~, E
// 开始扫描
' T! i: M9 o. {9 |9 S8 M/ Z6 \
document.getElementById("startScan").addEventListener('tap',function(){
- z4 F9 K1 Z1 N0 }0 b3 |" `
startRecognize();$ a+ L8 l, }9 \# d: Y1 c
scan.start();6 h0 L* ?$ a" n2 f' a
})6 t4 p9 u2 e4 [
// 取消扫描7 e; n. i( j7 s N, k
document.getElementById("cancelScan").addEventListener('tap',function(){
; n) h' d5 e+ Y }$ W) w5 I7 U
startRecognize();
) A5 v. u; u: U# }5 O
scan.cancel();
- k+ ]- f4 o2 |, M+ J1 i3 b
})
, k, d1 M; \4 P( x& H$ L6 @
// 开启和关闭闪光灯
m5 p5 w Z; ]- C3 H6 O) E: f0 a
document.getElementById("setFlash").addEventListener('tap',function(){( X. H3 _! ?6 s3 x
startRecognize();
* Y( `/ L% l" m4 e( }
isOpen = !isOpen;
% f; H: Z4 t, A* z! G
if(isOpen){: M5 i. p2 E, |/ `5 y5 l& G6 q
scan.setFlash(true);
0 [5 @7 P" C9 X( c2 Y; [
}else{
/ I$ `! K; |. N
scan.setFlash(false);* L2 A3 ?5 f: n
}
/ ~/ Q; V" s! o) O3 w
})9 f. w; D, L4 g! [9 G
</script>
) ]* |( ]! d8 Z' \

复制代码

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

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

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