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 > m) z$ O4 n, R' K* \
<header class="mui-bar mui-bar-nav white">
3 N: g; A$ T, }8 S' G, W
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>8 M$ L) k3 @2 o$ l; K
<h1 class="mui-title">二维码扫描</h1>( N! n. K6 r5 r. N6 N9 d! u
</header>
- }$ K2 I1 ?- S W
<div class="mui-content">/ R+ K' L/ a# p
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>7 C( O/ p5 L' R. h1 g' {
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
: H7 y! O/ O+ Q8 x; y8 B
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
+ d* W5 a( e: ?( ^ X
<div id= "bcid"></div>9 w9 S1 y$ X' s2 _: Y& a8 r
</div>
9 a9 V$ G2 M/ }% T. T4 o2 Q
</body>
* }+ }: L3 l& F
<script>$ y r1 E2 P R* b
mui.init({
! ~# \7 B0 c+ z1 t* P; C
swipeBack:true //启用右滑关闭功能
9 h, ]2 v) }9 v2 K$ m* u/ n
});
8 I' X7 D$ ~9 T: d
var scan = null;
: T9 b6 g' s6 @3 s$ O
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭9 S' [. b; j: h( y
// 条码识别成功事件/ Z6 n& |% B$ v' P
function onmarked( type, result ) {
+ c0 K0 y3 o" o/ ]7 L1 ]
var text = '未知: ';
- ^' r$ O* ?; {8 {5 W
switch(type){
$ j, G0 G- o U2 B; f$ E# B
case plus.barcode.QR:3 X c. e; c- [8 s7 [" v+ P% P
text = 'QR: '; // 二维码
% Z9 `/ F( |5 ]" ~% S: L6 v) N
break;& B; W2 x& X% }1 Z5 X9 u7 ` @
case plus.barcode.EAN13:( e! D9 B6 Y% E) _/ V2 a
text = 'EAN13: ';, y/ q! @6 @: P5 n+ T# L
break;
% G3 K i2 K% L- N& C
case plus.barcode.EAN8:: l) m6 z4 h: N8 p# W/ n! ?0 d
text = 'EAN8: ';
6 L7 i1 x4 f$ Q( ]/ K
break;
5 Z$ w# ~4 G. K' B/ n+ J
}
2 P% E' I6 S. X) G0 |8 ~2 F
alert( text+result );
6 T/ X: p2 U2 v; S8 j9 `
}' X; Y3 E! J4 A4 `
// 创建扫描控件1 A8 }7 d( P& w1 i7 j
function startRecognize() {
9 P6 r* t, o$ c
scan = new plus.barcode.Barcode('bcid');0 P% ~+ u. U5 ]% i( [
scan.onmarked = onmarked; - `, f. G- _1 p% Z+ M E$ N# `3 `
}* V; r0 a8 H# y7 G
// 开始扫描* Z- f5 Z/ h4 t- i
document.getElementById("startScan").addEventListener('tap',function(){
, H; }' L, D5 w' _) @ v, |3 l
startRecognize();
2 X4 H! E/ ^) n, ~1 L4 g: v
scan.start();
0 v+ D: Q8 e5 U9 h0 y0 X
})- P+ i6 r, @, ~+ D: \
// 取消扫描
) a( s, R e" r1 a; \5 i! ?
document.getElementById("cancelScan").addEventListener('tap',function(){( u% o- f5 L0 E
startRecognize();
0 j( V" n, G' d
scan.cancel();9 a, b2 _4 i: I! F' A5 O( l
})
6 u6 u2 ]$ U" v& ]' g
// 开启和关闭闪光灯9 i. {1 a9 ?! V! M
document.getElementById("setFlash").addEventListener('tap',function(){
2 |7 D5 D% }, y' o# U
startRecognize();5 D0 T: v# G, `3 o6 D1 @( i
isOpen = !isOpen;' K) k+ [1 c9 @8 j- L8 `! {
if(isOpen){% R5 t9 C" } q0 t X) c2 }% P5 r! B
scan.setFlash(true);
9 M L9 s8 X. O0 W- q, [! q
}else{
4 [6 w6 x+ B* b9 a+ p8 g1 `
scan.setFlash(false);2 l! k0 h+ ^- A. R& W: @6 M
}: s4 i" ?8 k8 g( Y( d
}); n. l, C$ g0 Y; q- | O
</script>
( |3 q: \6 @5 E4 }# i

复制代码

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

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

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