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 >* C8 `+ x$ Y( Z ^' D( I
<header class="mui-bar mui-bar-nav white">0 t; ~3 I# J/ }2 A B' t* S
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
# B( N. c5 J5 Y: q0 C
<h1 class="mui-title">二维码扫描</h1>
6 q( S \+ f8 A# F! u$ _. i# z. [
</header>4 J% ~6 I* @4 C# U. \
<div class="mui-content">9 D! C3 u1 T7 b. o3 a% J' A
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>- N; w) w' Y/ x* u8 o
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button># F `1 B Q* b- \
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>& f$ M! W) @" I! g
<div id= "bcid"></div>
6 V0 M: ?- J3 f7 t
</div>2 M0 q2 P$ G0 p+ y2 q
</body>
( U; n' |% ~- ]' {1 o- o/ n
<script># q( N" Q, l9 v$ ~4 d
mui.init({! P0 D/ D/ u! r( ^. h9 u- c
swipeBack:true //启用右滑关闭功能
/ I v; t# k; w* z3 |$ O
});
' |0 f% |& C. Y& v' q
var scan = null;
6 r6 l! S- Z3 G9 t- Z4 }
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
) q( ^2 X0 w8 m$ }; K6 n8 z
// 条码识别成功事件
2 P5 h9 g) }5 Z+ Y( H& ]! R
function onmarked( type, result ) {
% m! _( ~0 I+ w/ q, o
var text = '未知: ';& |; }: t9 v4 R- F3 V! }2 E) ]
switch(type){
0 g/ D m; l( }0 M3 B
case plus.barcode.QR:" u. [+ w- j% Q- j
text = 'QR: '; // 二维码
2 E4 d! m+ W" {/ u
break;
* {) d( }/ @) _
case plus.barcode.EAN13:" p! y$ \$ l" r. t8 |& f# O6 j
text = 'EAN13: ';% x, V. x0 [; u+ F
break;# f. _8 H1 `+ {+ @4 [) V5 ]" }7 ]
case plus.barcode.EAN8:
7 |0 ^4 z- u- b. H7 V0 a: p
text = 'EAN8: ';* a+ `3 Q4 l, B
break;
6 A: w7 q6 W7 W5 x, x" Q
}! z$ G/ L8 `8 \# X# h! K7 ]0 }
alert( text+result );
% L# A- ?) Z: r* A v$ K h! j
}/ F5 x V0 K5 l/ @' c; v
// 创建扫描控件
) r% n3 }) U; ^3 @% Y9 V. }. V
function startRecognize() {
5 S" N ^) S! [6 O1 [
scan = new plus.barcode.Barcode('bcid');
4 x; E; |5 E2 h6 W! ~4 k
scan.onmarked = onmarked;
/ `& i" ~: g$ s' @) H7 V: o
}- F c S3 X) I
// 开始扫描
I8 V5 t! O$ i- y3 L
document.getElementById("startScan").addEventListener('tap',function(){ `& ]0 W% p# ~/ m0 h Z& y
startRecognize();- _4 @: m4 ~: x2 ?. y
scan.start();2 }" W# ^$ A" U- K
})
* B& B0 h: |6 Y; ~" [; Q0 w
// 取消扫描
0 z/ Z' q, p3 C5 g* A
document.getElementById("cancelScan").addEventListener('tap',function(){* O7 \- T0 G# z& K, n) d) y
startRecognize();+ Q( a( f$ R' o% Q: o) a) W
scan.cancel();
, |/ l0 o- W3 z: \3 P5 k c
})
$ |0 c) Z! J- J% N: s% _
// 开启和关闭闪光灯0 t+ L" X: {" Z3 M0 f+ V
document.getElementById("setFlash").addEventListener('tap',function(){
9 K' [+ _- H! E8 U- I
startRecognize();
* }* K3 x) E; o: ]9 a
isOpen = !isOpen;
* }2 _2 R+ r) U+ j! M
if(isOpen){4 v/ B; R% c# ^- k
scan.setFlash(true);
9 [3 ?( D7 d3 N# d. w6 h
}else{
; G' Z. x- W$ j+ x: y1 W. G: \
scan.setFlash(false);5 n6 y; i: q2 {9 b9 @1 l
}
2 H" x/ s# F( G7 k1 E& h
})7 O: Y0 }: R; I1 q8 T" Q7 d0 F5 l
</script>- r6 \0 U/ ^* g! w+ k

复制代码

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

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

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