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 >
( n( U m7 b' D. N
<header class="mui-bar mui-bar-nav white">
; v* n8 H2 A; V6 ?* C
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>, O9 @2 C$ J4 E0 e6 m* A
<h1 class="mui-title">二维码扫描</h1>% i2 j) c, F& W3 D, e7 I1 r% ]1 {
</header>- q+ N5 S' m7 X: ^) s' Y9 r. E
<div class="mui-content">6 ~: y' @5 L3 x7 d
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>& a5 n6 x( |7 C0 z- Z: Y
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
* ~8 {# U0 ]+ R. @0 \
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
- F! D+ c, `) G" t, ]2 h
<div id= "bcid"></div>
+ s+ p" A* n% m. N* i+ t
</div>
+ V4 c: m1 x8 I
</body>
( z! E0 m" s% C- _# D) d6 |' U; J0 N
<script>2 h0 s0 ?! d- b3 }" y. X
mui.init({
8 `% w# l; r. K$ p% ] f
swipeBack:true //启用右滑关闭功能! @ w0 ?5 f& d: a* k
});$ W: r/ t9 A/ ?7 A
var scan = null;
& M9 `9 a) e, G3 b# r0 u- {* x
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭) `. k* X% d( ~. Q, S$ E' l
// 条码识别成功事件
* g; h+ ?4 b. N- h& v
function onmarked( type, result ) {
6 }0 ^- F4 X0 R$ F. g" d6 i) ^' R
var text = '未知: ';
* w3 o1 [" @; ]
switch(type){* ^4 \; O; y2 G
case plus.barcode.QR:4 Y; X2 ^; [& r' _* b0 q
text = 'QR: '; // 二维码* t9 L% O# [, [+ q- t
break;
8 [4 |* h+ i' H7 {! s) M: Y5 J G
case plus.barcode.EAN13:0 J9 j+ k% s# M, B- K: | t. x( W$ T. b
text = 'EAN13: ';* z8 x# l5 K% e; V
break;- m- r$ q$ p. X! d
case plus.barcode.EAN8:
# o9 p: `7 [& G4 _; G1 S
text = 'EAN8: ';
; n$ f$ G: I3 `( [/ r" r
break;
; S4 N# n- m& P, P3 m1 A9 Q) D
}
" k4 m; T$ S' v9 t" R
alert( text+result );( e2 ~6 ^2 G) \9 x
}& P: r1 F, P0 d5 A( W
// 创建扫描控件0 M# n' ]9 q. k" l
function startRecognize() {
8 T0 m3 C6 b2 L U' J
scan = new plus.barcode.Barcode('bcid');
* J0 E# g0 X! y& R" }) }
scan.onmarked = onmarked; , h4 N. ^" S9 C1 y: T- J3 I
}2 b( H, j# P% X$ n" S
// 开始扫描2 @2 C& T* }9 e2 P6 z3 J
document.getElementById("startScan").addEventListener('tap',function(){2 u1 a/ D% ^# m/ x/ A7 h( q0 ^7 B4 D
startRecognize();
2 J" A& [& m; Y! t1 I/ g
scan.start();
! B' W& o3 `- x3 b( J( X
})) L9 C0 H" p2 F6 U. n5 K
// 取消扫描
, x/ |8 `2 S$ K' ?2 k8 Q s
document.getElementById("cancelScan").addEventListener('tap',function(){
) ^8 ]3 |0 x: _9 S- l
startRecognize();! G6 e# I) m/ Y$ x; u) }
scan.cancel();$ S, U, y8 f- o/ w
})
* y* T( j( n/ b! a7 X# F5 {0 d
// 开启和关闭闪光灯
. ~' G/ p( T7 p* ]# t& f
document.getElementById("setFlash").addEventListener('tap',function(){5 Q' U0 P" m' D g5 w' B/ e! |/ M
startRecognize();1 l n* l0 }2 ?' w4 M, m' j
isOpen = !isOpen;+ @- [6 }3 b: f3 e
if(isOpen){. g0 o2 a" |7 v: _
scan.setFlash(true);) l, I& M+ g+ R, x& k$ b2 c
}else{& Y: C! ?9 t! Q- I9 x
scan.setFlash(false);
0 w4 W1 \+ l" x0 _* g
}
* U4 k* V/ T4 S! E0 J' |8 _
})
_! C# N/ U7 r; S% {
</script>$ ]0 c. o d5 n6 @8 J4 ~4 B

复制代码

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

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

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