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 >& e6 t3 G& N3 W% t* ~- b/ J
<header class="mui-bar mui-bar-nav white">
# u" W9 D S9 g1 B6 B7 S
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>5 C& N% [/ q# R% M# N
<h1 class="mui-title">二维码扫描</h1>
/ N3 j* o" u# ]& Q7 E V
</header>
! w8 M( Y. f( _; ^4 Z; `
<div class="mui-content">( e4 C d5 i0 n# `' I( m
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
# l. O: E' y6 V
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
/ P# q' N& J: O4 r. n
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>& A" w i) n o7 ~, }- b9 Q
<div id= "bcid"></div>
5 o, f. _/ u7 I9 H, h n7 U
</div>; I' m3 T7 Z& Q' G! V& w
</body>
1 d/ G* m. @ o+ {& g0 Z9 X
<script>
0 N& y& T* m0 [
mui.init({
" Z# x) y, n; k
swipeBack:true //启用右滑关闭功能
4 O9 T+ [" ^% z2 \3 }
});
( A9 P) f+ n( J* h, ^8 P
var scan = null;- B- U5 p6 t; c% f0 |% O' e
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
3 V5 G# y; t9 e: Z" ^( y$ ~% T, E
// 条码识别成功事件' o1 l: \0 S* l, d7 m
function onmarked( type, result ) {2 i N0 \# Q! W$ S& |9 ~0 n9 u
var text = '未知: ';5 b& W% p. o0 d1 d5 X: V
switch(type){
) G a; `$ o/ i$ m3 \5 j
case plus.barcode.QR:% v3 h. E* y2 C
text = 'QR: '; // 二维码
6 p1 s! |, z& ?; T$ b3 Z
break;
/ M& h+ ^& P ~+ d9 s7 M! k
case plus.barcode.EAN13:! b/ A5 ?6 p j& Z9 L! G& z) x
text = 'EAN13: ';
# k$ [, W0 T. v+ E( e: h+ o; x' K
break;0 S; l c: f0 U9 p5 M! k0 ^! h& ]
case plus.barcode.EAN8:4 O! F+ w+ p K+ Y& D
text = 'EAN8: ';
+ p! |4 r0 h) }2 v5 t+ H0 @4 m3 w
break;
$ A$ y/ t4 j: o9 \7 B( |. V" @/ i
}
% H$ v e+ c7 C4 C6 Q
alert( text+result );
}
$ J T; Z5 r+ U/ i' C' m' a
// 创建扫描控件& o8 `2 e- L) P. K( M# r ~; X
function startRecognize() {
! G) m1 C, k% F6 I5 f5 L0 I
scan = new plus.barcode.Barcode('bcid');6 m0 u4 m. ^, b8 E5 l |# d
scan.onmarked = onmarked;
5 _. _5 ~9 P, h, o
}: X1 e6 _5 u0 S, A' [
// 开始扫描
1 K0 [' `: V& \- ]# [) q6 F1 S" l
document.getElementById("startScan").addEventListener('tap',function(){$ ]$ D" J1 ]3 M0 ?: I) p
startRecognize();
g& \# D7 w) ^# N" H' r8 x
scan.start();+ `7 p( I3 i* o: J- V
})
- T/ M r9 g8 @) F6 u
// 取消扫描! x/ Q% n0 T* @. g0 G# P( x$ i3 \
document.getElementById("cancelScan").addEventListener('tap',function(){# P* L5 u6 g$ s0 I, Z
startRecognize();0 ^2 E9 Z3 _/ n$ i
scan.cancel();. v B0 g% G* G1 w W
})' `# R* _ e6 \) o% j
// 开启和关闭闪光灯
' N, t$ u4 `7 q7 i9 c7 B7 P. |
document.getElementById("setFlash").addEventListener('tap',function(){
5 M, Q2 u, W6 U* L5 k# U/ t; g
startRecognize();) s( q. k* m) `
isOpen = !isOpen;
% t# V* j; B- l2 f$ |
if(isOpen){
6 Q: W$ s5 h9 s4 A8 r V5 f
scan.setFlash(true);
1 n1 j6 S- N& [! M. [& H7 X
}else{
) z6 _( d1 r& E$ B5 Q3 Q( X- R
scan.setFlash(false);
: q- C P6 y4 M
}) a+ r' m5 Z6 h; n. p) u+ R; {
}). U+ m3 N+ {5 `* a3 e ]- x1 x/ F
</script>
- Q' ?: U1 x+ t' M1 g' H

复制代码

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

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

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