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 >+ y9 |7 X: b% r$ x! s$ j- H& B/ s- }
<header class="mui-bar mui-bar-nav white">
+ H4 Z) ^. B/ Q
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
2 `3 M' A+ B+ z% f6 _! D& p9 }0 q
<h1 class="mui-title">二维码扫描</h1>6 C! F C- b* u4 P$ y& `
</header>; g4 U [# _# x
<div class="mui-content">
& C; u$ A0 }/ L
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button># m8 |$ J5 {7 m/ s/ v8 j4 i
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
0 A" \' I, U$ b0 i* b- M
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
5 v, x5 x0 {+ N3 [" `- U
<div id= "bcid"></div>3 r; }) Y I, Q% W. p- p
</div>
5 ]! M& K! _" y3 o, W5 Z, e) W: i
</body>
1 k( D+ {3 t g: {) [; O4 I
<script>. A: e; X" _: a6 P. h
mui.init({
) v2 Y; ], k9 z/ L5 ]/ w# i
swipeBack:true //启用右滑关闭功能( W! \+ Q4 [, C
});
5 T3 n& P1 ]& `) r- j5 g
var scan = null;
8 X: `+ {, z* F- o3 t3 q3 i
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
* w7 h' ?3 t% k" s
// 条码识别成功事件
) H' z7 |. ?& `3 V) \
function onmarked( type, result ) {, _% k& {1 U2 L: e
var text = '未知: ';/ d d3 M1 e% g
switch(type){* ^, V! i7 _( W5 B: n3 I. _5 @/ w
case plus.barcode.QR:
! d8 c3 D2 s; a
text = 'QR: '; // 二维码$ R% o" {! D4 U$ R1 \, ~" K4 i
break;
/ U3 g$ Q2 \' i3 L% B1 G2 [
case plus.barcode.EAN13:& b( ], g: U3 X Q
text = 'EAN13: ';. B* s9 P" w+ U+ J8 }; |! I c
break;! V/ A+ v s* {+ q" Y0 s
case plus.barcode.EAN8:+ G; J$ Z/ [+ ^7 k' i6 f# @
text = 'EAN8: ';
' x$ s& s& i8 R
break;) X5 E; u [$ H# \0 w
}
9 e1 ^0 L6 `4 ]. U) b4 }
alert( text+result );( J8 T' U- W- e
}6 |3 q: n7 [$ v" d
// 创建扫描控件" g$ f" {2 [' R' t* L! `! V4 M5 A# c
function startRecognize() {
N# K5 Q% p! q1 s
scan = new plus.barcode.Barcode('bcid');
. [1 _: _# Z& w7 W; o4 I) l! v
scan.onmarked = onmarked;
3 L! D& b' g9 T
}( V3 O' Q2 k: M4 H- I- b
// 开始扫描
0 W/ P5 e* C$ o( q5 k% x
document.getElementById("startScan").addEventListener('tap',function(){! t! U$ M# b. s; L1 H
startRecognize();4 U- l+ a: _( G% B" I4 \
scan.start();
( U/ J2 {/ v Y7 C' K
})0 P' H/ e+ A. n/ l5 X5 G5 p6 d
// 取消扫描
9 x! c6 w2 u# X. _# ~ U; g
document.getElementById("cancelScan").addEventListener('tap',function(){; w: ?: m3 Q- \' b( T4 t) O R7 a
startRecognize();
! c* B1 Y; b6 q! k$ ]# ?/ F* E6 W
scan.cancel();
" l- [0 M; `$ [
})( u5 J: O+ Z6 \+ G( [) Y
// 开启和关闭闪光灯: n! E2 |6 N) a2 e
document.getElementById("setFlash").addEventListener('tap',function(){
" K5 @! z: m$ m5 q9 u. c b# A
startRecognize();
0 E* q3 Q. \1 O. B
isOpen = !isOpen;
1 A8 f Z+ h1 i$ I# B. W/ J
if(isOpen){
9 l# y" j5 |* w ]( z
scan.setFlash(true);3 X5 m* o8 C8 Q$ B% K* \
}else{
" ?7 A6 o& m7 I: b2 N1 j
scan.setFlash(false);% Q3 w$ t5 P& B, M& i/ r. x- n
}6 `# ?+ m$ v' y$ k& B
})- U4 `3 p) i e: D
</script>! Q, p5 ?- s0 G$ y3 S* F' f: K$ b

复制代码

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

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

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

浏览过的版块