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 >
X: m( r# F& Y* {6 q2 d' I1 Y1 j) S
<header class="mui-bar mui-bar-nav white">5 q- r) C% v% H, }4 |* D# @' z6 S& S
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
5 A# s- X5 Y' j. t
<h1 class="mui-title">二维码扫描</h1>
3 [, p. P- [6 p6 S
</header>
8 X% f X$ K: \! F r6 B0 e& ~
<div class="mui-content">
1 g+ Z! Q: I9 y4 G8 z) r
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>: C" {1 D# K3 V2 d& }; k$ `
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
- ]/ T# G$ D Z" }" I
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>" E0 @ z$ U3 Z* E6 _/ I
<div id= "bcid"></div>
) A4 f6 s1 B8 q# o; H8 s7 b
</div>
% O2 @$ a$ d% f$ d: A2 q4 M
</body>8 O {8 B' r3 I5 B$ F
<script>- w2 R/ x% n" _# p8 P
mui.init({
5 W7 a* z; X) l1 }& v! o5 R6 N( k
swipeBack:true //启用右滑关闭功能
- x s; P6 V: H4 p9 H
});9 o, j! n* N1 g' e
var scan = null;' [" Y' b6 \' Y5 F
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
0 ]( f( \0 L* U* h( B5 i0 u
// 条码识别成功事件/ x& [2 M( J7 ~$ ^" F0 V+ p# f* \& x
function onmarked( type, result ) {
6 X6 |4 b) s' K3 t/ z/ q8 G$ U
var text = '未知: ';0 S- B% ~% @; n1 f
switch(type){
7 R3 p9 l: y0 _* j9 s) @; J
case plus.barcode.QR:; d4 Y3 }$ ^' `- w6 @. g- n1 U
text = 'QR: '; // 二维码/ o( ?5 R6 U- z3 L Y9 L- `, w# I
break;8 h" m+ {0 K+ D
case plus.barcode.EAN13:
2 z. g @+ }6 ~7 Q
text = 'EAN13: ';
i; O4 v! \: c X
break;2 K0 f+ U$ Q4 E P
case plus.barcode.EAN8:
8 x: R; H; l3 ~' D
text = 'EAN8: ';
/ ?9 r% S* `% E7 |
break;. j7 K$ `, R4 W' T# @$ A0 q
}) X/ B! ~9 Z) ~& d x9 k# D
alert( text+result ); x/ Q' P9 ~% `9 P6 q
} S% g, a* D2 x- \8 R; D2 b) @( w! F
// 创建扫描控件* \" a; F; X" b l- E1 i! o3 d
function startRecognize() {
X) B- y5 \" O. Z
scan = new plus.barcode.Barcode('bcid');$ y) `3 B5 a* w
scan.onmarked = onmarked; % B: Q# D9 [5 X9 J* H) Z
}' z" Y0 `4 f' K7 w8 Q4 L
// 开始扫描8 k, m v0 U4 q9 V9 r
document.getElementById("startScan").addEventListener('tap',function(){6 d# Y3 c" g: c4 [
startRecognize();+ Q d( {7 g2 b5 D0 o
scan.start();
& w/ x( d: P3 _# q2 @# L1 _ G
})" w/ @) w/ R$ e% ^6 q D
// 取消扫描) q# a5 S6 O B9 q" b
document.getElementById("cancelScan").addEventListener('tap',function(){
+ N& G* u: i. t* C) _
startRecognize();6 D3 @+ R: ~7 ]4 F5 W% |
scan.cancel();
6 i! {+ y7 T# X- s1 [% f! U- W0 W
})* M! S' ]5 {6 b( P) ]9 ^
// 开启和关闭闪光灯
8 U1 o" N. y% \, ]1 K
document.getElementById("setFlash").addEventListener('tap',function(){
! c( Q6 U* G5 ^3 ?! f, d' \
startRecognize();
' S! j' b- l6 K7 j3 `
isOpen = !isOpen;
) b" v$ C: Q7 X5 b1 U# R
if(isOpen){
- _- e8 I1 r! C
scan.setFlash(true); Q' V2 e) q( p2 E
}else{2 J4 t3 I# p+ w7 C9 N
scan.setFlash(false);
6 M% E& c+ g) O+ \5 ~
}' p5 p2 S' G$ T
})
6 G# Y: J/ P3 p5 C) \
</script> _; b3 V T! V' R

复制代码

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

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

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