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 >
6 h0 N- z/ z5 T
<header class="mui-bar mui-bar-nav white">
) d9 Q# ^+ M" L3 y, q: x$ Y8 @
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>& _4 _, H: V. i8 D
<h1 class="mui-title">二维码扫描</h1>1 q$ p0 ]2 E/ R' ^1 }; w
</header>
$ b5 ^- D5 w; H: h# c
<div class="mui-content">* v$ U* Z0 g! n) V
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
: J( o. C; J# s ~
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
3 E" c! Z9 E2 G" `9 L$ {4 ?0 W' _1 k9 u
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
/ r% A5 D) v4 M3 E2 T
<div id= "bcid"></div>+ T, P8 s5 r: O0 T u; n* @/ S, N1 A
</div>7 [# U/ `7 C' S$ O
</body>
. L: E7 n; _9 @& w- p
<script>
1 h r+ @( i/ Y3 r3 n
mui.init({0 p8 \' e# X9 m, z, {
swipeBack:true //启用右滑关闭功能
% y' V5 f+ y7 a7 o
});
, J7 q3 A4 r1 {: S6 w8 y* _
var scan = null;
0 R. J, F7 Z1 b+ K
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭- y6 j: u! L) D; j( E" O& Q
// 条码识别成功事件
& X1 M6 z4 f+ Z
function onmarked( type, result ) {
9 I- i( n" L; g& U& v7 h0 J
var text = '未知: ';4 o/ o. g9 l/ u9 ^3 P' I0 ~& Q0 }
switch(type){; a' O4 c6 b/ O+ x% I- O& l& x
case plus.barcode.QR:! v9 ?) D7 s' ?2 F, w
text = 'QR: '; // 二维码) q4 J: N# P: g# a! K' k
break;
L# H$ U( W/ {% Y7 ]
case plus.barcode.EAN13:
6 H) W8 f+ [9 `1 M8 [ t! V
text = 'EAN13: ';
; Q6 A/ b- V( t2 {9 v
break;
# @; R. z+ o0 b6 I% u2 Y
case plus.barcode.EAN8:1 Z' N- i, G& ? C
text = 'EAN8: ';$ K( e; E0 c/ w& n/ ~& ^. a9 Y
break;2 v. u' b. r; i+ ^2 ` I
}
( J$ i- Y2 c# D; }1 F0 W6 H
alert( text+result );
2 D6 B9 s9 |$ }" c+ g# `+ G
}4 l5 H% D8 B6 \9 E' ]4 E
// 创建扫描控件
1 j0 t- \1 `; O0 g/ J7 e+ Z
function startRecognize() {9 Z& \2 [) F8 Y) t+ R ^2 D
scan = new plus.barcode.Barcode('bcid');
& \3 I6 r! I7 ^% f+ j# @/ s' H
scan.onmarked = onmarked;
% ]! X& n5 x. x. l8 c$ p
}$ U1 @7 @$ t7 E. c/ G# O% F. x
// 开始扫描
9 H4 e: Z$ ^) l* a
document.getElementById("startScan").addEventListener('tap',function(){
7 \* F6 G; s1 p9 z; M& G+ l
startRecognize();
" [9 f3 e7 L9 N, E, n- W
scan.start();) a! g6 @0 k) k1 s% R
})
7 @) v. U# ^ Y. `; C, W
// 取消扫描3 s& b' `& c+ i$ t8 y2 b
document.getElementById("cancelScan").addEventListener('tap',function(){, |( \1 x. R) A1 H# T# c' e( w
startRecognize();, n( O4 i, f. B! M: }* `* [. E: x
scan.cancel();
$ I, w7 k. U+ u- ]
})! F) c! [; Y/ z7 X9 I1 M
// 开启和关闭闪光灯7 V& p8 z, i$ M( K+ b5 o
document.getElementById("setFlash").addEventListener('tap',function(){
]- h- {& A8 A
startRecognize();
- U; m! F$ r1 a
isOpen = !isOpen;
& z1 `7 S3 _. R F" x1 G
if(isOpen){
. [( Q' K! `$ Y% V
scan.setFlash(true);6 a( s. v5 A3 d/ l
}else{) \5 E: I% V& i1 x0 O8 O$ |( A
scan.setFlash(false);6 m1 b: F1 D0 \: q% A4 M# u Y
}
; _0 j9 v* f3 s2 P0 m
})# Z7 p+ e2 q& I( z2 ^
</script>
' {9 v, F/ l0 z* \( W% \

复制代码

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

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

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