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 >$ j! Y$ a5 D0 w. d6 Y3 }
<header class="mui-bar mui-bar-nav white">
- e; E0 g y0 I- t9 Y5 V8 v9 }4 o
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>% }+ Y9 y' a6 o1 H. x; }
<h1 class="mui-title">二维码扫描</h1>- J- p8 Z; B5 _7 ]$ ^: g. n" O+ |8 t
</header>; p* Z7 O6 h. X. W/ B2 B: Y
<div class="mui-content">: O7 N$ g- e2 l
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>9 |, v, E9 @" v6 h
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
5 v! M1 q2 l5 v/ ]3 B8 l6 |
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
6 I. d6 s8 [# i. [: E0 s, Q8 ~
<div id= "bcid"></div>
) f& s9 u# ^" ?1 o0 S, ^2 i
</div>
: N ?1 v3 d& _5 @. a9 @, C7 |2 `5 b
</body>1 T5 y2 l* w/ E8 I" g) R) c
<script>
1 ~! W1 ]$ c8 \3 P1 d
mui.init({
, t# ~% D$ _- |$ m u# W6 \
swipeBack:true //启用右滑关闭功能
, h* { M9 X- R
}); M- G( `4 [% k3 M" [7 e& v, N% |
var scan = null;
) l4 ]5 ^# `& l" N
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭5 g6 v( r: r M4 J
// 条码识别成功事件6 V' W0 X1 B3 L
function onmarked( type, result ) {
. Z1 r/ k: V$ m# M7 S
var text = '未知: ';. D* n, C6 x9 B+ H5 i
switch(type){
% E0 d2 y! B* _; \+ ]
case plus.barcode.QR:
; _5 v( S+ i' b* |+ u7 h
text = 'QR: '; // 二维码 S8 _: `0 Z2 r1 a* W# N% E. J
break;
) _) b" l ^" S' R ]# R6 A1 v
case plus.barcode.EAN13:
+ E/ e. i+ Z5 R0 `
text = 'EAN13: ';
6 k7 C$ E! j4 L" T
break;
) O% W/ k7 v( h) X7 g$ ?
case plus.barcode.EAN8:
$ z" c4 A( S0 V0 i. ` {6 V
text = 'EAN8: ';
* O. j0 A8 u0 _6 Q8 V% Q9 ^
break;
) O" `$ s* o/ u. O* r9 O8 w
}
! H9 E& D- E$ q$ {" b; H5 h+ n
alert( text+result );
: a C9 w+ h2 c
}
* B5 W3 }6 |1 Q+ X2 Y3 c% ~
// 创建扫描控件
/ s; k0 @- \0 W" V( B# e
function startRecognize() {$ A; p* y1 h8 T
scan = new plus.barcode.Barcode('bcid');- w2 x# w0 }* n! Y
scan.onmarked = onmarked;
x, g1 |. p) r# i6 Q6 e
}( K1 q' m9 c/ n, ]
// 开始扫描
" A$ v4 s/ j* l$ E: x2 d" f9 \
document.getElementById("startScan").addEventListener('tap',function(){* {( H9 ]1 ^" q% N
startRecognize();4 p$ S3 a b1 u6 A( E
scan.start();1 G& `+ P+ B g6 E, H% [
}). T; J W1 `- K+ I
// 取消扫描
5 R2 W! T3 X: Z" ?$ Y
document.getElementById("cancelScan").addEventListener('tap',function(){
% [; r0 r' ^2 S- m5 c
startRecognize();
- n) E2 L7 C5 ]" \, J
scan.cancel();
8 q& B- P: C) f0 c8 M
})
. v7 w/ d' Q6 `) P) H+ b: j: b7 _* p
// 开启和关闭闪光灯0 C# B/ Q J d: @
document.getElementById("setFlash").addEventListener('tap',function(){# O2 u* i% w7 k r" ^
startRecognize();$ S2 P1 k3 s9 ?/ }& N
isOpen = !isOpen;8 L& W/ k1 ?" D
if(isOpen){* z# ]7 V% d8 x# z; q" l6 b# v) s. `4 L
scan.setFlash(true);$ ^4 G4 g, `# s! r* a# L! }
}else{% M7 b, |; q; }# t% t) Z
scan.setFlash(false);4 u, c9 ?2 `; v# i3 U
}
% b* Q1 C" Y, O6 P" k) W# @5 T
})
</script>. K# h! ?- a6 M% w

复制代码

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

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

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

浏览过的版块