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 >0 {2 x3 A4 B* y4 }" E
<header class="mui-bar mui-bar-nav white">
( i& t5 S! ]( C1 w C0 E
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
( Q1 l2 ?' a3 B0 S$ T1 |
<h1 class="mui-title">二维码扫描</h1>
5 W! V+ S! F/ g, R$ P/ r
</header>3 [' o4 [2 R4 q G* d; L, i4 \
<div class="mui-content">: O8 h9 x4 X m, p
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>: Z1 s$ A1 @) p: Z2 N& Y3 h; ?
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
& A, K @- `- Y- D# v
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>' S; h5 [+ W7 O6 f5 d+ J
<div id= "bcid"></div>) U, F% S. K8 Q
</div> M1 q: V9 b" _# w. a6 B N8 T
</body>' J! x" y7 H+ x& g+ ?
<script>
. V8 T$ J3 d! s0 g; s
mui.init({5 W( D# e1 v0 t: J+ |. L" L
swipeBack:true //启用右滑关闭功能
6 W% s: {- p1 E
});3 C. E, z L( k; D8 q( s2 j
var scan = null;
+ G* B: x3 J* E5 z- Y4 @& z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
' C7 S( W2 k8 j+ r
// 条码识别成功事件* ^" ]. S1 L; ~0 D, S! B! j
function onmarked( type, result ) {& D( W2 m" W+ ~2 D
var text = '未知: ';$ j( ]0 Q0 v/ j( l" y$ V6 b
switch(type){# f! {/ m3 B0 o2 e
case plus.barcode.QR:
4 u, R( g0 J0 a1 B
text = 'QR: '; // 二维码' O; u: I0 V* N/ ~$ ^
break;
: K5 t, {) w, G' r8 n- \ Q1 t
case plus.barcode.EAN13:
( U( h$ \. O( L' l4 K( \) U4 k
text = 'EAN13: ';. m! z6 X! r& e# S
break;/ v' F+ X0 I2 ], u. n
case plus.barcode.EAN8:
5 g- I2 @6 v, v: k# ?: B% [" t
text = 'EAN8: ';; w& G4 E% _" y& o
break;, w1 _# J" |# a$ g( F
}4 e$ B, @6 w# u9 ?
alert( text+result );
0 Z) g; x7 O6 y9 |( u
}
& i+ ?2 s; O6 s
// 创建扫描控件
9 N3 B& {3 k9 A5 a2 `
function startRecognize() {
6 o- z' T( t; T' r# S
scan = new plus.barcode.Barcode('bcid');# W, n7 S! B; s% G U
scan.onmarked = onmarked;
. t: m, E" w6 O) n' ~% M
}
4 A. u% L* J# ^2 b9 N9 D
// 开始扫描4 J3 ]1 y) J' Q
document.getElementById("startScan").addEventListener('tap',function(){: d7 f, A o. H7 e8 N
startRecognize();0 e; s2 G" S) J4 t
scan.start();
* c& X! J1 F; _, O
})
# U+ a0 c0 u0 M& [2 h5 `
// 取消扫描
, s O0 l, K( z
document.getElementById("cancelScan").addEventListener('tap',function(){
3 h! k. T9 C K6 k& }- O9 m" y
startRecognize();+ ]# v: w9 A1 U Z8 u3 H' e* Z8 G2 k; D
scan.cancel();+ q" c: f, K3 F; k2 c, y8 l8 h
})
# {. _/ t$ X7 F/ E
// 开启和关闭闪光灯
3 F3 p- M! i2 V! Y' Z% x
document.getElementById("setFlash").addEventListener('tap',function(){
! D Z2 w8 L8 Z! B+ e! J( D0 i
startRecognize();. p) r0 p- |) ~! \2 Q) G
isOpen = !isOpen;8 I6 F) Q7 _" v5 Q& W% ]- b1 S
if(isOpen){
# o2 N( p$ J1 j ^/ B- _8 O
scan.setFlash(true);* X3 C. X$ h8 r% C! r; k3 c
}else{) e) ^) ?9 u& W% R4 f8 H& s
scan.setFlash(false);+ N9 X4 ^+ e( W. _( b7 M
}$ K( s" D4 `; E& X5 D# H- N' ^
})
0 ~! }2 T$ O2 Z. i% R
</script>5 \: M/ _" I0 H) P0 V" i( U: R: C

复制代码

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

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

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