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 >3 q5 @# q5 J6 ~$ I& H+ F2 V) }: y, P
<header class="mui-bar mui-bar-nav white">! Y9 b+ J8 R+ {- m
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>% |& |' [8 q T4 N4 F2 A t+ t( f
<h1 class="mui-title">二维码扫描</h1>& ?6 i1 o; d: d' S' {
</header>& h! {0 [5 w' R5 s6 F
<div class="mui-content">
2 @- H. ~# q7 M3 i3 g2 T# D" Z. A6 J
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>+ }& A4 d1 I5 T; m! L' ~
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>. Z# Q9 @ @. `2 A
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>4 f+ W- ^5 C2 }+ E0 F* s
<div id= "bcid"></div>! n `. I. r1 H
</div>$ F" h2 z' O5 g1 X
</body>
+ P9 X2 Y" y# i" I6 n
<script>( u" C! c" }/ x% C- \& R7 }
mui.init({
5 V. i9 Z/ @; N. \; k$ p9 q" t$ Q) r
swipeBack:true //启用右滑关闭功能3 k1 \1 d0 x" `
});( _! q$ n5 j4 Z' t/ t- }5 H
var scan = null;, D% i$ q T8 I) m; l1 v( p; z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
$ B' Q+ ~' v) [; @! o: y1 B( S
// 条码识别成功事件
, w) j1 w: B E' g* u& R+ \: _
function onmarked( type, result ) {) G* k! X, b( {6 Q$ `8 Y
var text = '未知: ';1 u8 j+ p, i7 i
switch(type){
0 x8 Q0 ]( ?0 Q( U1 s& m \
case plus.barcode.QR:3 z5 D: U% {$ O- I7 ~# c* |' K9 B$ I
text = 'QR: '; // 二维码
# |" R( I5 U! s
break;8 h9 Y' }/ i# ^+ T
case plus.barcode.EAN13:9 [. d: `' [6 c* \& J2 Y3 ~
text = 'EAN13: ';
' H7 a7 y+ v: @ s7 ^- W
break;2 l( ?- M4 J* d! _$ S) y/ h
case plus.barcode.EAN8:+ j- }6 F# {$ ?! p& d/ I9 y/ B
text = 'EAN8: '; f0 b% l9 _ F8 p4 X
break;* r$ a; ^2 a& V, s
}# Q4 X4 F; a# l' u! }
alert( text+result );
! R" {) D. P, g# X/ _1 p- u
}' Z. p. j/ }# W
// 创建扫描控件+ h! _5 t+ ?/ T4 w! U' c- [8 c
function startRecognize() {+ m% Z) |: k' Y, J( Z) W, V6 s6 G
scan = new plus.barcode.Barcode('bcid');
/ }$ a9 a) V. G6 W a! W6 C
scan.onmarked = onmarked; + }+ |/ g1 E4 d3 ?
}
& W. n, `8 w% l- L7 j' `9 p& C2 _% w7 N
// 开始扫描
. N- D: J: b# q
document.getElementById("startScan").addEventListener('tap',function(){' x) O4 }/ e- C4 S" q, M2 R I
startRecognize();5 p/ y: I7 ?4 [! l
scan.start();, Q* V8 m4 _. C
})2 c% z' C5 M7 H2 K5 M5 ^9 J3 [) W
// 取消扫描
+ S2 A, k# u* @6 R+ Y
document.getElementById("cancelScan").addEventListener('tap',function(){+ y7 B. w) p" u& G4 M6 y/ _& }) n+ y2 m
startRecognize();
) n/ x$ X! q1 Y
scan.cancel();8 S' ], z! z- H' u
})/ l; q P g9 W+ Y. x R
// 开启和关闭闪光灯
% X$ b+ Q- {, h
document.getElementById("setFlash").addEventListener('tap',function(){
( u' z- v x" d- i
startRecognize();
+ ` s1 |; L" t6 Q9 t
isOpen = !isOpen;
& f) H: \( T. c$ O
if(isOpen){
! {0 v5 m2 ?$ f2 X& R+ t$ M! Y
scan.setFlash(true);
/ E2 z# A+ W, q
}else{
- \" ^, b9 R! o7 C( {
scan.setFlash(false);
5 \. a9 W1 E; U3 b
}7 { z: @6 \8 F3 ]5 z+ S8 T% I4 g
})
+ T; n+ q8 N1 A- z
</script>
4 X% r: F+ H, l! x

复制代码

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

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

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