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 >
9 Q' f0 B7 I# h: T
<header class="mui-bar mui-bar-nav white">
u0 Q: Z6 c3 _+ ]
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
* {9 e( L5 J0 ~
<h1 class="mui-title">二维码扫描</h1>0 k- H) K/ C B1 S7 }5 P
</header>
% ]0 g" F0 i6 \+ l" _; k1 k
<div class="mui-content">* }" B+ u% l8 R+ b" L" O- F
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button> j# P1 t2 x! A `2 F5 ?+ G. d
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>- J, Y0 j& ?) Z$ o R, {4 C
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
0 {4 p2 @2 p+ H- s
<div id= "bcid"></div>
1 N+ K1 u: L# D, j
</div>5 @2 X; b, E- t, g2 q2 p9 ^- J2 h8 R
</body>/ r- J' Y, r# {9 J
<script>5 |" z( o% s* E, E
mui.init({
4 v" k. _6 }4 F. Q$ M3 t# T* q
swipeBack:true //启用右滑关闭功能
! o- r* }. I2 l
});
) [' B5 W" P- V3 t! ^
var scan = null;
7 r0 g0 ~ V/ e: R; ?' t- P
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
& c( j) U; h% J5 S$ m* n
// 条码识别成功事件5 a. O, c: S N7 V; I6 J
function onmarked( type, result ) {
- n+ S& `( |3 L2 m! E$ S
var text = '未知: ';1 w6 g. r6 A' c/ [7 K
switch(type){
. q1 }: K @" w' _4 P# Q0 J( C
case plus.barcode.QR:
0 s D7 _& T7 D1 J3 ]1 i
text = 'QR: '; // 二维码
* @ c# Y) b. o3 U8 i
break;
! _% H+ [: p8 z6 x% U- x3 l/ G
case plus.barcode.EAN13:
# X" o# s& e! y+ r( c8 X0 ~7 l
text = 'EAN13: ';
+ j6 n/ N& U3 l2 \
break;
- N. j7 z! b% M: A) g1 u
case plus.barcode.EAN8:
2 [ j( i; ?' \4 g' S4 v R: r* i
text = 'EAN8: ';
3 X; ~* v4 u- J& R; g2 `( A
break;
3 b7 e4 R# `4 o
}
- X& b- s2 i! H# k8 V3 Y
alert( text+result );
+ ]. Y' Q! d5 V: t6 G* |9 ?
}6 R; L! U( S8 p% p+ W& C, [
// 创建扫描控件4 g6 E7 |0 ~. p
function startRecognize() {
# a2 N, m G) ~/ V, v [2 O, O6 K
scan = new plus.barcode.Barcode('bcid');( X' Y# t2 m$ r
scan.onmarked = onmarked;
$ o/ b6 W( x% }7 [2 q! G: G
}3 H0 w, ?8 y* f; a" L& C
// 开始扫描
1 e# K; k* L7 E+ }$ }' g
document.getElementById("startScan").addEventListener('tap',function(){" m4 e+ z' _9 D, I+ O
startRecognize(); |3 H9 \# }% G, w4 V
scan.start();
: q. H! g% v/ N. W' W _
})2 e/ y% o# Z4 G2 ]4 h- x
// 取消扫描/ J6 F5 Y2 q/ R6 O# ]- j9 c; q
document.getElementById("cancelScan").addEventListener('tap',function(){, f2 {3 U* W. x( Y% `6 Z) C9 M
startRecognize();/ _& d4 }) M7 R, [# k. L- t, C
scan.cancel();( L0 V7 u& ]; O
})
# P9 m: V8 V7 w4 l
// 开启和关闭闪光灯1 U8 }+ u1 Q O% R
document.getElementById("setFlash").addEventListener('tap',function(){4 }7 V9 J9 r/ E! U
startRecognize();# n+ } E, N3 h" c
isOpen = !isOpen;
m# _ E5 u1 G. h4 B, c
if(isOpen){( z3 _+ ?$ C3 N) E
scan.setFlash(true);5 h7 f( ]0 u7 z8 L. w* A& ^1 g
}else{. \- L6 m1 C$ l% ^- Q1 Q
scan.setFlash(false);) i) }& E0 J. K9 S! w% r
}
8 f/ m4 p0 s( Z: X& o6 {" I7 ^ \# q
})
: p" ~1 K# c5 T
</script>8 m! R5 d$ r. e5 _- k8 y9 r9 f

复制代码

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

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

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

浏览过的版块