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 y, Z) G/ g! }" r0 r/ Q9 M
<header class="mui-bar mui-bar-nav white">
/ a$ F, l( V; _8 m A2 S
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
3 N* A1 M7 y9 L8 ~$ w
<h1 class="mui-title">二维码扫描</h1>4 N! v5 Q; S2 x" r
</header>3 e9 s/ A. \: f% W0 p( _
<div class="mui-content"> @3 r _" p2 H& }
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>: F4 G/ y- [/ a/ f% _0 d7 {, \
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>. T! ]* F, y, H' t! Y
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
. h! @0 a2 F$ F/ a
<div id= "bcid"></div>$ B3 F+ s, B- E) T/ p4 O
</div>
# z* W7 r! ?& x* @
</body>2 z! S5 {; g1 k
<script>
2 _' _- P' {. ~2 x. n
mui.init({
: e6 T" t0 l+ V4 I5 O
swipeBack:true //启用右滑关闭功能8 C3 T' X W" u
});
/ s3 c% }1 O% q2 E5 q* U
var scan = null;
' @! n, k! T, e) ?: ~7 u
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
7 a7 y+ \$ |0 L' A0 p
// 条码识别成功事件
( u$ f% G3 q4 T1 J$ Y
function onmarked( type, result ) {
) y- P$ l6 _; a& h; F1 m' _" L' z2 }
var text = '未知: ';8 m) E- q; U. ]: [+ \1 i7 z* S
switch(type){3 t8 r+ G: g- E2 R6 J& L# }8 z
case plus.barcode.QR:$ J7 S+ u5 y, A
text = 'QR: '; // 二维码
' e, W3 I2 T% e' Q: C2 ~
break;% _$ E* X. \$ g
case plus.barcode.EAN13:
* }% G3 B8 f4 }: y5 n5 l2 T3 t ~
text = 'EAN13: ';
3 P9 O1 J0 q1 L
break;
q* B: z- T& I# B. k8 |
case plus.barcode.EAN8:! k2 M" n5 P/ b% F: s3 A$ f' h
text = 'EAN8: ';& O) w6 `( W/ x# o9 @
break;
5 d; |& ~% d" R3 T( E- {! |' w/ u
}5 l, v d7 M5 _* ]5 j3 C
alert( text+result );
/ z' g6 Y- c4 r2 q" d. b' Z+ O
}
+ @3 E6 V0 i% ?, u: H, f; M+ h- Q
// 创建扫描控件; N- Y( b; O+ r8 V' \$ j+ g; T% I! S- Z
function startRecognize() {! G; H7 }- t1 I W& y" N) R* A
scan = new plus.barcode.Barcode('bcid');4 [' i( V7 Z7 p: c6 }( h' J2 N# V
scan.onmarked = onmarked;
* M |" @0 o" i2 S A5 U
}
0 a9 v5 ?2 W. l& D, s; u# ^4 c! G$ r
// 开始扫描% j; {8 T' f/ U
document.getElementById("startScan").addEventListener('tap',function(){
1 ?2 t5 I( E4 d4 ?1 _
startRecognize();
9 w$ y7 G& N0 d: F. |3 `
scan.start();" O+ P9 R8 c- N; N o- w9 K
})
2 }! J5 f# q) |4 S0 y% }
// 取消扫描7 c R6 m9 G( P: y- K/ M( I8 O& o) P# K
document.getElementById("cancelScan").addEventListener('tap',function(){0 V1 X0 Q2 a+ L4 J) L
startRecognize();
1 W4 x( |! ]7 i0 `: r2 m4 l; O
scan.cancel();
* o% s" I( v( A" r) B* e
})0 Y1 n. C: a9 n( F6 f7 T
// 开启和关闭闪光灯" h+ |8 b: [( @) [4 x
document.getElementById("setFlash").addEventListener('tap',function(){
: |7 T5 u$ \+ }/ f5 M
startRecognize();' f9 j+ w' |' j" t
isOpen = !isOpen;
+ o: \2 r0 i1 K4 b
if(isOpen){
4 X& @9 Q( F, \7 \: p- S4 u: {0 r
scan.setFlash(true);' _. o& w: A* M
}else{0 c, [2 |/ U) u$ Y7 Z; ?! ^
scan.setFlash(false);6 X3 u4 E% W8 ^: T
}& S1 B* U# O$ T) G
})( T6 ?/ U' U/ U* ~+ I0 p
</script>5 C5 k- f! J7 T4 m. q

复制代码

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

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

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