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' D) d) r5 v
<header class="mui-bar mui-bar-nav white">
) } d3 y' a8 M
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
9 e6 z. u) Z3 n
<h1 class="mui-title">二维码扫描</h1>
8 ^+ ^( I/ k- V
</header>1 y' ~. O/ P: M3 Y
<div class="mui-content">( {: ]% x/ f( d' v
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>7 |5 Y' T8 P# R" {" W- U0 [% M
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>6 [0 Y0 F: F, \( m: X
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
( S F( `3 Z0 W& W+ m
<div id= "bcid"></div>- W- z3 X; s0 _' v+ Y9 V
</div>( [" i) Q7 k4 p% m: j' O, [6 C- p. m
</body># m* u$ W% [( q" Q
<script>, z4 [" ^0 e5 N' a
mui.init({+ F! P! a: {$ H( ]* q, S7 y
swipeBack:true //启用右滑关闭功能0 D( T+ R+ b V* I4 F4 Z
});8 n* k2 i5 U# t( f
var scan = null;
: \& U# u X" \: y' s
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭, b h& o/ h6 E' E
// 条码识别成功事件
$ R0 w; R& X4 `9 A A% i2 T$ v
function onmarked( type, result ) {1 S( S- E+ l6 t3 l. m: j% V
var text = '未知: ';2 b. x- q) g" [
switch(type){
2 c8 H4 @) N# T# }) {
case plus.barcode.QR:) s1 @2 p9 }- z% M1 ] |) p6 Y
text = 'QR: '; // 二维码
, L6 L$ s8 L3 g) i$ j
break;9 K8 e, w+ K1 Y; B {& E% ] g4 s
case plus.barcode.EAN13:
! X+ d+ g: B$ `! D
text = 'EAN13: ';
( J( ^9 T$ f8 y4 S# E) Q2 j( E L
break;
$ y& N: Y( X/ G5 b* {, S a0 \1 b8 W
case plus.barcode.EAN8:) ^( h- u: B' |& _9 A# _( r
text = 'EAN8: ';# V7 U+ j/ f, C q% e/ _# Y+ [
break;* h+ W3 O9 a ]/ N4 a
}
& K5 U5 E+ u8 q: g! R
alert( text+result );- J. i8 w9 n: w" P3 A' ~
}9 B9 }* ]' ? u, N7 }
// 创建扫描控件7 z8 Q, x8 Q& }
function startRecognize() {- P: W$ X/ \7 J3 N2 y7 |* G
scan = new plus.barcode.Barcode('bcid');' O7 o$ t' b$ t- D* C1 {
scan.onmarked = onmarked; : S0 v2 z! |, F& q. m; O/ A! B2 E
}
% }6 [# b! ~4 }3 J1 R7 O P
// 开始扫描
) c$ k; x; [& k
document.getElementById("startScan").addEventListener('tap',function(){
, @# M5 p, V3 Z' G+ h2 E3 {
startRecognize();3 Q' F6 T2 s9 ^2 _
scan.start();
9 C3 K5 M1 C4 Z S# K
})
' G _# k+ H* I0 J# C# d3 B
// 取消扫描
$ `. e& c4 C: i7 a
document.getElementById("cancelScan").addEventListener('tap',function(){7 ~1 w9 H* _; S9 g3 U9 U& q
startRecognize();5 @$ s6 X6 d. ~* |
scan.cancel();
0 v: A% T1 y9 v/ L5 w% i" g0 W
})
6 D" T) z! `2 e/ _
// 开启和关闭闪光灯
$ Y8 @/ B L3 n4 F" a
document.getElementById("setFlash").addEventListener('tap',function(){
1 {8 N, ]- ^" D T4 \1 c
startRecognize();
! a/ P* i2 B' t! u3 {/ H1 p
isOpen = !isOpen;6 e/ O0 n2 r- y1 i% h2 {0 L. u
if(isOpen){! ?% S* E1 Y5 w C. }6 j
scan.setFlash(true);% c0 G- L* k8 {0 R' U9 A' o
}else{3 A' R9 G9 L0 g2 L6 I% T
scan.setFlash(false);
# G [0 G/ e% ? z: n# `
}
' {! K1 C" Z' J
})
4 }* C: B) t8 c0 r8 k: ~) t- y
</script>
* n B0 r) r/ ~+ M: A- _

复制代码

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

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

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