HBuilder webApp开发(十三)二维码扫描 - cncml手绘网

<body >- G& `; r& @& o4 s+ y% {( ~. I
<header class="mui-bar mui-bar-nav white">
. d: M9 @. }) T+ O9 q7 e. b
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
9 p# |7 @" S' B( E) ~1 ?
<h1 class="mui-title">二维码扫描</h1>1 g5 G3 n7 L+ a
</header>
1 d& M$ ]0 Y8 X! j9 M. R
<div class="mui-content">4 W* M7 h3 P) I6 t/ P1 E8 ?: n# D( W
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
& a+ |- r' v/ H% @8 D
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
# ^: _9 V+ R! @! Z `/ d
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
2 D+ s' x- l+ f
<div id= "bcid"></div>
$ a* J5 l4 h; Q3 O, X/ q
</div>1 k1 }3 P: ? c1 J9 e
</body>3 a+ a) g4 `- _0 |7 y9 d* T
<script>' a5 Q. f/ p4 c9 R
mui.init({( R/ O6 t7 U0 m3 q* t1 K, S
swipeBack:true //启用右滑关闭功能
. @7 l. ~7 R! C5 ?/ l
});1 F' b6 Z5 }) x3 k
var scan = null;# x: u; ^( }/ r. D+ r, F
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
6 u$ \* L# A; }" M/ `: k0 ?
// 条码识别成功事件
; c; w$ s1 \# {* O8 @" z" Z. d
function onmarked( type, result ) {
: Z# H V7 H7 B( C
var text = '未知: ';; J: l2 @. W6 S/ l
switch(type){
% \& P0 j O3 E v' i. F, {
case plus.barcode.QR:
% p. R- ~, }, i
text = 'QR: '; // 二维码
2 B* m) f3 T4 b; p9 U! z
break;
% w5 A3 @5 x" A+ t: D
case plus.barcode.EAN13:
4 ^* V2 c6 ]( K, ^% Z7 T+ K2 Q
text = 'EAN13: ';4 m0 P, Z: U% g( ^ v
break; o$ x) A/ _2 m" ~8 A, x# a9 |7 J
case plus.barcode.EAN8:
" P t, N0 j( p U
text = 'EAN8: ';) Q5 I# A/ ^4 B9 v3 U- f2 h' z+ Q
break; F* @ x- b7 n# q
}
/ S+ P! e- Y2 K
alert( text+result );' Q2 ~; B1 N; E" c! e, M
}
# r& [5 |7 p. N( @; R2 R
// 创建扫描控件( `3 w5 e! X* ^3 a1 a
function startRecognize() {
* B: K6 O1 A5 b; A% q* v; r5 j3 k
scan = new plus.barcode.Barcode('bcid');% s; d) w2 N2 w3 \0 G0 s. K
scan.onmarked = onmarked; 9 A$ B; _: Q/ \ u( J2 E
}, p S# I# k& b* _9 C
// 开始扫描5 f3 @: N5 _0 d) D7 o
document.getElementById("startScan").addEventListener('tap',function(){% y: |( L0 u8 L9 T: d4 X
startRecognize();% ^! J7 E: s9 X4 A- n O
scan.start();
1 c" B0 C% \. L" e+ H
})$ u9 _ c* C% y. p/ B/ Z, _
// 取消扫描
5 A6 F8 W r+ Z2 K% |2 _- i; f: @
document.getElementById("cancelScan").addEventListener('tap',function(){
# R) b' _8 g0 \; G6 x
startRecognize();
5 |7 L% M$ @( V
scan.cancel();
$ P7 }' A4 n8 ^3 [3 ^
})6 f5 t# }) Y, i5 p- p0 ?
// 开启和关闭闪光灯5 @2 X7 x N b/ t% \
document.getElementById("setFlash").addEventListener('tap',function(){
# S5 m! W' V) p+ s7 r' M* ^
startRecognize();# y7 c5 \% P5 C3 L
isOpen = !isOpen;: A8 O! o) p8 h* M+ \
if(isOpen){
" c) b# `* A- g# k, V4 W
scan.setFlash(true);& E: ?% T$ O1 f' z" c7 {, k7 w
}else{; _% S L# B: y |
scan.setFlash(false);
4 q$ Q, T& M9 H2 u; M. m
}
& Y' H/ K/ q& S z [
})0 m8 T# M% _. v: @
</script>
( N( k0 R; Y* ]2 S

复制代码