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 >
0 O7 s& W) L) t& O
<header class="mui-bar mui-bar-nav white">( t3 E2 D* l X: A5 p- P" g, }' f; c
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> _2 q% G8 w |+ K" h! P Y
<h1 class="mui-title">二维码扫描</h1>
# b- W# `) a7 r w
</header>- J7 e0 K* e" Z: d& A5 \5 U9 w
<div class="mui-content">
" l+ T% y$ z3 a# C7 o$ B9 C
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>$ E, ?' Y3 }6 I- g3 R
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>7 w% Y; d |! _* E
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
1 Q; Z; |( ~4 A! F
<div id= "bcid"></div>2 G( z( N2 [0 Q8 a
</div>
, d. H8 K0 W( ^% Q
</body>; \8 A: N. G1 b5 H" O
<script>7 P0 r) q4 ~% V% W
mui.init({
! n6 \/ j8 g8 Z6 M. ]
swipeBack:true //启用右滑关闭功能& P8 v4 w: D& x9 k4 v8 b' _, o
});
X; O; B( z5 d3 o
var scan = null;
: K6 c# W) E& I9 K6 {! J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭! u0 k* B7 S; _7 d: L) z) e# c5 f
// 条码识别成功事件
( O6 w0 J+ t6 Y X& T& k
function onmarked( type, result ) {" o& ?9 ~7 |/ s: b8 Q [+ G+ W
var text = '未知: ';
% a: Z8 W! M) ]# d
switch(type){
$ \% ^' d0 r9 a8 Z* _
case plus.barcode.QR:
5 u8 R6 V9 D+ |: R0 a# t s
text = 'QR: '; // 二维码) a1 |! G! K# q' O8 S5 J I2 C
break;
# X7 ^" B6 c' S' n% `
case plus.barcode.EAN13:6 D: r% \; J; c
text = 'EAN13: ';
$ L0 r( A1 e+ f4 ]* ]
break;
$ g9 o- \; s I( g+ R5 }5 z
case plus.barcode.EAN8:) p; S( k1 k+ P6 h7 x( S
text = 'EAN8: ';
$ o/ I9 K% z, w& M0 F6 t
break;" I4 k, J6 A4 y7 i
}
0 u3 f& K" f9 A# Q7 {3 ^
alert( text+result );
! Z3 R8 P E+ B) X5 Y: z# G7 g
}; `9 S5 E1 m9 C7 {) W
// 创建扫描控件& M! Z% g# l3 e
function startRecognize() {3 |. d7 i- [# z6 G- V9 [1 j
scan = new plus.barcode.Barcode('bcid');& b- O, V8 F- h- d) r1 s
scan.onmarked = onmarked;
' L9 }; V9 {" Y! e. _: `" }
}: ~5 L5 p8 M7 A4 S7 i) B* U
// 开始扫描1 b% Q; _7 L, c: X: w
document.getElementById("startScan").addEventListener('tap',function(){9 j8 e3 ^ N* g3 Z( @0 l
startRecognize();3 @( f- M# Y& ^( ^3 y
scan.start();
. O" [ h0 U$ u6 q: v: }7 U
})% U% `6 Q4 V( [) f
// 取消扫描
( \8 O6 a6 T9 a# k; z/ v0 D
document.getElementById("cancelScan").addEventListener('tap',function(){6 I! F0 O) A: D5 Z* \& F3 I& H
startRecognize();- S' I# e! {0 }* h$ n/ j+ r; q
scan.cancel();* S( I: z |3 j: n# d" F
})
( G; V& ^$ @; r6 L8 H8 r9 T
// 开启和关闭闪光灯0 N6 O4 u, T0 v2 W: w' M j* p
document.getElementById("setFlash").addEventListener('tap',function(){2 `" u. y- m2 f8 ^- A/ {
startRecognize();9 e/ C( s$ p: l2 `
isOpen = !isOpen;
6 G0 e& n& ]/ U8 L# k# ]
if(isOpen){
! [- J2 D$ g. h
scan.setFlash(true);
; U# }" q1 H4 g/ o6 v
}else{7 X* a7 v9 I3 ?! F4 y
scan.setFlash(false);
% c w$ p6 o O$ g6 ]' P4 d- r
}+ W* X) q& {9 H
})
( ?* ^0 \. ^! b3 X% J
</script>9 I7 ~- s c4 d9 f. t

复制代码

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

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

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