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 >
# i4 T& N O- I, r; ~
<header class="mui-bar mui-bar-nav white">7 W9 N' }7 ~' |5 U' Q; u) ?
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
7 r5 q4 U& w( N( I' I# r
<h1 class="mui-title">二维码扫描</h1>1 E; u9 V1 |2 p$ l5 b
</header>
3 N% \ v; Y4 q9 s! ~( O3 k3 m& O* T
<div class="mui-content">
+ ~6 k" o& q' D" N) n
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>8 x* i% ~. F! V J3 g2 B% n
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
- r: m0 B$ F7 `5 D8 e" g, z
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
) M/ O' f8 n" Q8 o0 @: t& L" X. t2 |
<div id= "bcid"></div>
0 ~( Y' T" L; s, E
</div>
$ Y1 Y. Q3 W# }# R$ l/ P
</body>5 o4 b! K6 p. {+ i& v
<script>
$ c! u2 v+ H& N* E, v/ m
mui.init({
3 D: A$ L- l& Y0 o) G2 d- A
swipeBack:true //启用右滑关闭功能
( c& U# ~& ^* b( |
});! k. u3 u- i$ a5 l" D7 r- ?
var scan = null;
; a5 |5 g" k$ g
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
+ R, ]- `+ F1 k& C
// 条码识别成功事件# |- f' ]4 t3 ~3 E' n
function onmarked( type, result ) {
8 w9 |. |6 q, T1 I7 i: x$ r
var text = '未知: ';. t c" q7 [8 V `6 p$ L( n
switch(type){: z. i8 x: v4 R1 [7 K
case plus.barcode.QR:' W' A; u6 Z* R
text = 'QR: '; // 二维码
: H8 m4 T' a: t) Q6 c
break;/ d/ a4 o" u9 S/ W* e& ^
case plus.barcode.EAN13:
& h- ~$ q5 v# [( p$ F& M
text = 'EAN13: ';* i3 E/ z f, X1 a) J9 W) W' H
break;
3 m9 a/ y6 e! I3 B: \6 B: l3 M9 b; I
case plus.barcode.EAN8:
% H; t7 W" q, j5 }
text = 'EAN8: ';8 ^" o9 H& A- m* y$ I
break;
' J1 e$ j J: C9 D+ s( O7 p
}
6 S/ A4 q, K2 L! S6 D8 ^* Z
alert( text+result );' o+ H: l9 q% q& x: F
}
) C/ F3 @% _9 K! s, r7 `" c
// 创建扫描控件- P8 g6 t; q2 |3 I2 O, o
function startRecognize() {/ I: i) p! e$ c1 A
scan = new plus.barcode.Barcode('bcid');& a$ Y& p& P. H
scan.onmarked = onmarked;
! S* H- m" ^" k+ c" _, }8 w
}1 e6 |$ N' w. A' t. O+ `" W
// 开始扫描
3 S J4 X: n) [ u
document.getElementById("startScan").addEventListener('tap',function(){2 D9 B; O" u! r8 b0 F
startRecognize();
- d" S1 A6 E1 t- H# G6 @& i
scan.start(); T; M# m$ w2 z* p' {# Z5 U
})& B" o' r, @- K1 G8 f6 p) r
// 取消扫描' I. G* A9 z" A$ K: \3 W. w+ {& @
document.getElementById("cancelScan").addEventListener('tap',function(){: q5 W1 j! M. m7 L
startRecognize();
- V1 ^2 b+ u1 i
scan.cancel();8 [2 T" }7 I7 \' T
})9 f. ^" ^- V- F5 p8 E* @, R! U
// 开启和关闭闪光灯4 O8 m; ?! {9 s. D# E! u
document.getElementById("setFlash").addEventListener('tap',function(){# A$ A* N! @0 R
startRecognize();2 p( p# N! j0 g# z$ B4 B1 \
isOpen = !isOpen;9 O5 l1 }! w3 R9 Z( ~2 r& Q/ H6 L/ g
if(isOpen){) v! |$ u p2 K# u
scan.setFlash(true);
6 @! v% L" P3 Z v
}else{
5 E! ~2 W# \3 e! ?# |; s* ]5 J
scan.setFlash(false);& t! \& f& m3 T f
}9 D4 r- D; c! G( `. W$ A
})% Z9 `$ n6 O2 ]
</script>
+ }3 ] n7 \+ }6 G

复制代码

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

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

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