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 >
) s0 r# A' p- q. ^/ o( z
<header class="mui-bar mui-bar-nav white">
, ^/ y$ p$ [8 V; o/ a6 E
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>% F/ z+ d3 C" x5 Q- b4 C; t- \
<h1 class="mui-title">二维码扫描</h1>$ Y5 H) E \% f4 v* |+ {; A0 B
</header>6 t! V! U: D6 Q; R A/ j# H9 j
<div class="mui-content">+ O5 i$ I2 J. i4 S w7 r7 s
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( L+ [. q2 G# r( Y% {7 P
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
_' c3 M# S0 A
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
& D; k2 ?9 |) j/ X' G
<div id= "bcid"></div>8 ?( P& b& ]3 s# f
</div>/ j: s! o& o5 O9 D2 |" b( e
</body>/ x D6 @* c3 {; p
<script>, G; [6 B1 X0 R+ I
mui.init({
$ k: c9 p7 u! W; D3 M0 _' x% k* O
swipeBack:true //启用右滑关闭功能
/ S& ^, u. a+ [- ?1 |
});* f3 x! C. H2 h) ~- U
var scan = null;
) K% w, t* [0 l1 l7 M5 h
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
3 o$ t z0 g; @4 X
// 条码识别成功事件
t8 H0 ?" T. z3 g1 o+ S
function onmarked( type, result ) {
' R! P, F1 n" y( r
var text = '未知: ';$ d; _0 L8 f- n8 P& a
switch(type){
6 @" d& D; m2 [. q$ `! I3 C
case plus.barcode.QR:# L! T0 b. C' N
text = 'QR: '; // 二维码( j9 X. v w$ B2 |3 A( l* i
break;
7 J4 D2 T% p* l. [7 u3 B
case plus.barcode.EAN13:: V( m+ \$ X1 U+ p
text = 'EAN13: ';
( m5 W* G" H# V2 \$ y
break;
; g* W ~9 F4 C; E2 ~4 Z$ D
case plus.barcode.EAN8:' _$ V. K7 l- |7 Z( O7 L5 F9 V0 f
text = 'EAN8: ';
9 z6 W- m4 l' |+ o8 I
break;
8 L4 u2 l; V# I. J" y/ C
}
+ O* _8 Q7 p/ b, S/ q6 W
alert( text+result );
4 H2 Z; x0 Z& n) M
}1 P1 i1 I7 [9 E
// 创建扫描控件 I6 H; u, Q; I9 m
function startRecognize() {
4 ^. ?4 a- l% h. M
scan = new plus.barcode.Barcode('bcid');
4 W$ \+ ^4 y0 g, |" _# V
scan.onmarked = onmarked; , ?& h1 Z n3 L/ T* j0 W' G
} W* q @3 E& a, W$ g
// 开始扫描: H/ M" b7 b J8 M K( l/ P: f# F
document.getElementById("startScan").addEventListener('tap',function(){
* h g+ S9 t) m% S
startRecognize();
/ z# q/ x: G8 g3 I! B- z
scan.start();0 U. M1 s6 O) L
})
# h4 g; B% L1 y. J/ q2 _
// 取消扫描
/ K: {; o4 d2 w: i8 w; E
document.getElementById("cancelScan").addEventListener('tap',function(){: _/ g" w) h, n
startRecognize();
2 ?& V& {3 _3 L6 h8 @' K
scan.cancel();2 D2 o, i" N2 D1 e, T4 Q
})
% L! G# e, [7 o, M8 O( p
// 开启和关闭闪光灯
% g: L$ `. {3 V7 }7 H$ T
document.getElementById("setFlash").addEventListener('tap',function(){
. ?) f8 u: X6 }& M/ i+ K, n
startRecognize();
4 L' l3 O$ J% Z' I, V" m
isOpen = !isOpen;
/ d2 B Q4 T4 \& d
if(isOpen){; j! S' _. Z$ ]! Q3 y1 C3 c
scan.setFlash(true);
# D% |9 w0 H: x
}else{1 g- ~ V: z- _( X/ S& T: }- p
scan.setFlash(false);
+ \2 R8 W* I4 L6 G4 k+ y, M& z
}
# p3 e2 E# T8 o5 U, p% P
})
# {4 p. g& J/ ^! l; M
</script>
$ m( A0 Z( ]# U/ {/ |$ @

复制代码

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

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

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