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 >
* ~5 B6 V0 c8 n Z/ k$ c
<header class="mui-bar mui-bar-nav white">1 N; z+ b N$ G& i5 `5 ?" L
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+ F# z3 ~& f7 @
<h1 class="mui-title">二维码扫描</h1>* ~8 q& ^+ ]9 I+ |' G% `+ H
</header>
( d- s6 o1 Q) h2 r; Z" K5 y' A u
<div class="mui-content">) V. M% _# Z$ _4 R6 M
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>' D6 n/ U: }0 q! k1 M5 q! F
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>: g; R* l# K5 }# f
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
3 {) M, N9 k2 a% f$ O
<div id= "bcid"></div>! d5 ?% ~8 p+ s) ]* U
</div>
% K" P! `5 {% d ^
</body>7 k' J+ ?1 C# ^; ]# p* `6 f t8 O
<script>8 ]* R1 o2 b$ ]8 t
mui.init({" C7 @; ~6 M+ B5 L$ H( |& V u
swipeBack:true //启用右滑关闭功能
8 z- j" ?8 t' i
});
- p8 l/ m! S/ ?! c" ]/ @! l
var scan = null;
0 w6 C! D: W3 b
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭3 y7 d) z! A Q A2 U. h
// 条码识别成功事件
1 z5 Q" K: |3 X4 _5 x
function onmarked( type, result ) {7 H& ?: G( f, R+ T2 j* S
var text = '未知: ';
& g8 S" B; _) ^! A9 h( q& v
switch(type){
t& f5 O: C, t
case plus.barcode.QR:
. U1 ^( ]. S- _( C5 _1 l7 B
text = 'QR: '; // 二维码2 R+ T+ i+ J4 Z' Q0 n& C. Y5 G
break;
, q' \" o9 v5 j' y$ f$ L7 Q+ r
case plus.barcode.EAN13:; Q G& I& w% w3 o* _
text = 'EAN13: ';# F/ y) X, c$ F6 v( I$ n
break;0 c- B- X( t& v
case plus.barcode.EAN8:
6 r5 l" c! a) F8 `
text = 'EAN8: ';' L( T$ W; I! _) \8 @1 Y% Y
break;0 U& c! Z c6 \4 P* a
}$ w- D( O# `9 p! `. y0 d; g
alert( text+result );
$ Q( b3 l4 Y4 _( G
}0 i1 E+ T7 e% v
// 创建扫描控件
1 Z3 w% h5 U0 U$ ~0 @" P$ U1 F
function startRecognize() {
6 J- J) U- k6 k! m$ W3 a% c
scan = new plus.barcode.Barcode('bcid');
% R! ?! W( o" X5 y9 {% f
scan.onmarked = onmarked; + d, ^9 O8 H6 K. i5 X
}
5 l$ Q1 @- h8 W4 O4 V5 _# R) Q, `
// 开始扫描1 t# h/ Z* t: p1 ~! ?* B9 }
document.getElementById("startScan").addEventListener('tap',function(){, d" P! j0 I7 |- i
startRecognize();
5 K6 f+ ]7 N0 g9 I' ~* Z; V2 y4 P/ Q
scan.start();
! E# e) @5 t/ ^+ k/ j5 j
})
; t; d. G7 w- _
// 取消扫描3 \+ I0 W5 b4 \9 p; T& b
document.getElementById("cancelScan").addEventListener('tap',function(){
; i. E+ i" m4 x
startRecognize();$ A% F* Y1 j1 Q# B4 u; \5 {# g+ Q$ n
scan.cancel();
0 f( A& e' P; D* g3 Y
})
. e+ a( J# V, p' t
// 开启和关闭闪光灯
2 k/ O7 D' a2 l' c4 E
document.getElementById("setFlash").addEventListener('tap',function(){
" y, [6 H* R3 \
startRecognize();& `. r- r% i; ^; Z6 O1 M1 }
isOpen = !isOpen;! g3 g2 t: W. r& i
if(isOpen){5 c3 f% ]6 l% e! M
scan.setFlash(true);) s T6 t& q+ O4 z. L! U/ M$ G) A
}else{
. L" `# c' I/ \% p/ Y( l7 ~
scan.setFlash(false); \! x: C& F: X+ E& q; Y
}
) O4 C& X- [1 }
})* y! z" m! G( ` `8 I
</script>
; E; O& N6 L% D1 V. y) X5 l

复制代码

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

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

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