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 >* `2 o* |! m u3 {, d: j+ z, d
<header class="mui-bar mui-bar-nav white">
$ f* |- `4 {7 O4 w* E# R
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
0 D* H" Y3 C+ Z9 q
<h1 class="mui-title">二维码扫描</h1>
* y2 h* c2 e9 p: x) d
</header>
9 S) j9 J6 O- o- P6 j. @' ~2 f+ T
<div class="mui-content">8 a) {1 p2 i5 s& O$ v
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
4 B1 l3 @4 Y4 A4 l6 w4 z- Z' s
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>& i, D9 v% {" z& x- s8 M. [
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>0 |+ K: H& M' W6 F( ^
<div id= "bcid"></div>; i! u" q2 {0 y( e, ^7 j& s
</div>/ U3 C- v. d1 S) c( e
</body>: i& y4 W- [8 S
<script>5 a& Z5 l+ F" h) \$ ^& P/ z
mui.init({9 P' G0 c5 F d& T R
swipeBack:true //启用右滑关闭功能
3 d- u- H( \: u6 f* _! _
});
( U4 h2 t) U" {' P& H4 \6 u
var scan = null;# {$ K' [; O/ ?) k; J7 p0 e
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭0 g: g l$ i9 W- Y: e6 J
// 条码识别成功事件
& l# J( E# Z$ V) H3 N7 E
function onmarked( type, result ) {* `/ Y+ t4 `( g# y) ~- O' Y- Q7 z
var text = '未知: ';
# `7 N2 { b i$ R
switch(type){7 D7 d! c0 z5 { C% a' y b
case plus.barcode.QR:/ ]; R9 X% o C6 W' l4 w
text = 'QR: '; // 二维码
5 o% P `9 ^- ?% ~1 K0 B4 ^
break;
( x a, v- [1 o- {
case plus.barcode.EAN13:
4 ^1 P9 D+ L) ]8 _% K: `
text = 'EAN13: '; z; e$ [0 T3 t& z9 {! T
break;
: J6 \& ~: y0 K6 W
case plus.barcode.EAN8:
; `$ B I3 x. a( [3 Q
text = 'EAN8: ';
) Z3 v! v* v( j- U# s
break;
, j. x7 G! {2 l4 y1 v
}3 O. Q' j" A3 X) d1 l
alert( text+result );
! @' i |0 r, x6 z, a1 n( W
}
1 m) i2 {. Q' z4 U- S4 _
// 创建扫描控件
1 B" g% M% n) }0 M, {0 U3 {
function startRecognize() {
m% h, t6 ~, r- {" G) T
scan = new plus.barcode.Barcode('bcid');
" [. g9 B& W* V& z* |% q& ~, B
scan.onmarked = onmarked; ' y/ h c4 D# q4 [
}& K+ S* H8 @+ g" h' d0 X
// 开始扫描! \* z* ~) @' _/ M& g
document.getElementById("startScan").addEventListener('tap',function(){
4 r1 x/ J) t M- @5 R: n/ s1 K1 o
startRecognize();
) U1 ?1 ]1 f: K# ~* M
scan.start();
. W. W* S1 L F$ O2 h. B( b. d
})
& }) L; S6 j& v- m l4 B8 Y8 n, I
// 取消扫描
# X c( [/ @4 l" v0 W
document.getElementById("cancelScan").addEventListener('tap',function(){
. G6 i% O8 R+ W% Y
startRecognize();2 y+ N4 n1 ` F* \) d$ z
scan.cancel();0 z& @# M) m+ P; b0 D
})
. V" H0 v/ _9 ?
// 开启和关闭闪光灯
. N7 t0 U. ?1 ^7 J0 |
document.getElementById("setFlash").addEventListener('tap',function(){
6 p' \! `" g2 [2 P* q! I) R
startRecognize();
1 L7 [' ]: q- X6 s4 y7 d
isOpen = !isOpen;
* B/ f8 K7 \! ^1 g3 H2 J
if(isOpen){. ~# Y9 g4 O- G% J7 X4 E
scan.setFlash(true);
`, |9 x6 Z C9 F
}else{" y. b- {: @' `" I% N
scan.setFlash(false);
) B- ?# c6 Y: F6 I
}
5 P2 f' Z: A( y: {* D" Z; w: P
})
. l! L4 O$ R* L I
</script>
7 }6 L0 @. o0 V( V

复制代码

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

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

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

浏览过的版块