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 >
/ ]) B# Z" G# D! M( q
<header class="mui-bar mui-bar-nav white">2 l2 o2 ?3 q9 C
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>8 q7 O% }$ N9 p# I/ X0 U1 \
<h1 class="mui-title">二维码扫描</h1>' R5 l: i; Y o
</header>
' y2 r, U: g% k% K+ r& o' d
<div class="mui-content">4 w4 ?# i' y" g7 ?
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
2 h' l% {0 c. O! v& K
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>5 x3 [! l- d' B4 K" n' V* e9 m
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>2 \/ y3 s9 i, F0 g# K
<div id= "bcid"></div>
: w( H2 ]1 N& o2 ]# d) f8 i
</div>
. b. s( b- l/ q" f' t1 v: h
</body>
4 t) e. h+ k$ P, `2 O
<script>4 V9 }% W) x6 m: v5 [6 S5 o) \
mui.init({0 s2 b/ A* A( ~! z4 l( a( {. F% A
swipeBack:true //启用右滑关闭功能
4 t8 s9 S* }2 f+ t3 X& S
});
7 J3 W5 H' V3 K7 g" j7 I
var scan = null;: C; |( F3 |# }" n! L
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
) U I( n: h# i9 p, a5 Q: ^
// 条码识别成功事件, N# T, r9 m' _6 ~
function onmarked( type, result ) {
; S5 Z+ I+ M9 [5 e1 U
var text = '未知: ';
- L5 ^- x; i% U" G
switch(type){
0 }( }6 }* y6 E* m/ _
case plus.barcode.QR:. P. v4 w# h) }" B7 z
text = 'QR: '; // 二维码
6 N, x4 |1 T2 j& m6 E
break; \$ u$ a7 Z% `) B! d: J, L
case plus.barcode.EAN13:/ ~# Z% p0 w4 [# m" {! F
text = 'EAN13: ';
. q" B0 n& R9 I! |( [( M2 |0 L
break;3 s1 m3 ~" c0 |" Y/ j |& E
case plus.barcode.EAN8:
* n+ G1 N. T0 g e% V
text = 'EAN8: '; D0 W! `; |( k; y' x
break;
% [6 s2 ^1 }2 y3 h
}
0 O$ P5 A8 v1 g0 l& y2 g. n
alert( text+result );
/ {# B" v- S' o
}, W- \3 g: ]) b( O @
// 创建扫描控件) T2 C U) F, j& L5 t/ j
function startRecognize() {! o6 ~; F! d( a/ z
scan = new plus.barcode.Barcode('bcid');% y. o$ i6 A, g
scan.onmarked = onmarked;
. F' ^- v4 X2 d9 ~" N' L
}
% j3 { |& y" [: X' F/ [
// 开始扫描( ]8 J. E: l' k* S# i: n' G
document.getElementById("startScan").addEventListener('tap',function(){; i0 F: F- r4 x; Y
startRecognize();7 F( P/ b) E% k+ W2 c" d
scan.start();
! V n! g! z( Y3 _" L
})
# U5 L, [& {# [$ ]
// 取消扫描
- Y9 H( J9 r" h0 }+ D( ?* h
document.getElementById("cancelScan").addEventListener('tap',function(){
! j0 e- F: \0 D
startRecognize();9 S+ l: _) N+ ]# J3 F
scan.cancel();( m/ l2 E3 v$ l& {2 r& c
})) F& n' K! x2 C1 U7 T J
// 开启和关闭闪光灯
* Q; Z, ~" I7 v' k4 K# r# g& F8 ]" P
document.getElementById("setFlash").addEventListener('tap',function(){
9 H0 S9 o# ]0 R* b
startRecognize();
$ d8 f' P; F; N* g. H, s& Y
isOpen = !isOpen;' E* H. x5 P, y, t
if(isOpen){) w& b% |) E) x; d) m' S
scan.setFlash(true);
@# G* ]) E4 i, y) b/ X+ `1 `
}else{' `9 C/ r) l8 G6 X A
scan.setFlash(false);/ k9 q. e, F; C2 o- ^+ l
}
' g# p: _$ X+ M. O
})
3 g) }$ q4 s: l8 @* T2 E6 d
</script>. L" D! r4 X+ m! k0 _

复制代码

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

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

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

浏览过的版块