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 >! F/ m( h( D4 r3 }) p
<header class="mui-bar mui-bar-nav white">9 b" u1 S2 A \4 U
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
_; I/ ]& a: ~8 e4 o) x
<h1 class="mui-title">二维码扫描</h1>
/ H7 C) E3 s+ J! y+ Y+ f
</header>" D( O$ E2 u5 I4 K$ z
<div class="mui-content">9 J* R! r' Y2 [8 h
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
8 Z# `) m! m1 a0 t* e
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
. [. j/ z9 v) h, q% R8 R
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
4 G4 g7 u7 }2 e( b
<div id= "bcid"></div>
/ M. p2 g4 _* w7 a
</div>
/ [5 R: { @8 C |
</body>3 L9 ?$ E `, V w! l S
<script>
$ ?$ d6 Y: w# q/ R2 o) l6 w4 Z
mui.init({
z5 K+ a# Z" S J/ y- L( N- ?9 u
swipeBack:true //启用右滑关闭功能
+ b; N7 T0 E6 @5 W$ C( C
});
9 \/ U" ^9 \- x! V
var scan = null;" D& m$ z) ]/ [
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
+ J' f$ Q. K6 @ J% {
// 条码识别成功事件
6 P+ z( g9 ^) Q+ Q4 B1 }! P- A
function onmarked( type, result ) {
+ l' u R% _2 \# Z) H! b9 X( }
var text = '未知: ';
" J1 o* l# d Q, {+ M$ w
switch(type){+ \% N2 r) P& U% F' b, X7 m" ?
case plus.barcode.QR:" K+ ]' z! R! ~* R1 P( l( o3 }
text = 'QR: '; // 二维码3 O' R, e6 |! j3 ~: \1 l" ]
break;
J0 r' ?! S/ y" D
case plus.barcode.EAN13:
3 U4 f1 j! f8 O3 J
text = 'EAN13: ';
/ A [0 D8 }, [+ a! o
break;6 u9 ]6 L9 X8 ^6 U5 j
case plus.barcode.EAN8:& f- J5 K5 \* |# K8 C- Y
text = 'EAN8: ';" T* \0 }% `- i+ C
break;. K1 C2 [% w% }: D
}
# ~+ U4 u' q9 m9 J' J q
alert( text+result );
( n& ?$ m/ h, K6 q- Z* r4 V/ B n
}
$ `4 F l6 r+ J+ z4 ~+ n
// 创建扫描控件
5 J* s' \& b5 l( K) e1 s
function startRecognize() {4 ^/ n* Y, N* C# J
scan = new plus.barcode.Barcode('bcid');/ r8 p4 N5 m8 N$ Y) ~
scan.onmarked = onmarked;
: H8 a1 q/ N" S. T/ Y
}
# F* ?& F) s/ P* e: O
// 开始扫描 N0 S) S+ o! d5 p& @
document.getElementById("startScan").addEventListener('tap',function(){
5 f- G% ~- {7 t4 d3 [- r' J6 d
startRecognize();2 i/ O1 @8 \ o1 s3 s+ P' K0 Y
scan.start();& n4 W2 @' _- q
}). ]+ C" W( a# X6 ~' T# W: w2 u/ N3 I
// 取消扫描7 D: o: E0 V( s+ v8 N3 Y8 @
document.getElementById("cancelScan").addEventListener('tap',function(){
! x3 K6 s$ N+ n! n
startRecognize();( S1 s% L8 ? K1 H+ `* {# r0 C. ~, m
scan.cancel();* m2 T F3 h i( R3 w' I7 \
})7 v5 G ?4 G, y$ ?+ U, K
// 开启和关闭闪光灯3 Y- s- h5 c" K9 G9 ?) Y! w, c; w) d
document.getElementById("setFlash").addEventListener('tap',function(){
7 s6 P, \1 A* _' q9 ]( A) H0 g
startRecognize();" Y; N5 y5 M' c5 [; |; F, Y
isOpen = !isOpen;: `, I0 c" }1 t
if(isOpen){
/ h2 R: }0 k8 m* G% }: N' w
scan.setFlash(true);/ O1 g# h" @# F a- N4 i2 H
}else{/ {2 d& Z' i7 O% i
scan.setFlash(false);
3 f. @8 F# b: j; x. c
}
, v4 G8 W' Y q
})
* m# P5 g8 ]% j3 x; \" {, w
</script>
$ z. \1 V$ K6 a# s6 r" I

复制代码

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

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

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