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 >
) G7 c8 b1 W2 P# [! _' B
<header class="mui-bar mui-bar-nav white">
* |+ v' t9 `% F9 z7 ^4 @
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
; ]1 V; x! j: {$ @" p1 M, E& ^
<h1 class="mui-title">二维码扫描</h1>4 k8 a% k6 t& W/ ^6 G; S
</header>: b' a9 d, P3 O/ E: ]
<div class="mui-content">$ L. |. \: T7 s
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
" {( [, t3 b$ @+ G# u) V% U; J/ S
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>: n% k, \- m8 I! ]8 w
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>2 w. h+ i; L* }$ a) M% N
<div id= "bcid"></div>+ f7 k9 ~0 d# N7 |% X
</div>( p$ T f! r& W; ?
</body>
( c* w9 ?7 {' U; }. U9 S' Z- W
<script>/ I; s) e# d7 D! E' u2 m2 Q4 |# E
mui.init({+ u, g& |& \7 t1 }+ M
swipeBack:true //启用右滑关闭功能
1 Q0 i. F/ ?$ L% D5 S
});
$ T$ f# F& S/ F1 f8 _6 z
var scan = null;( u4 q% j. L5 h" c3 U
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭$ n! O* k, p9 t8 N
// 条码识别成功事件& H0 P2 D3 U) M
function onmarked( type, result ) {
0 U# B7 |8 [: {& V* y# ?
var text = '未知: ';1 ]# `: A, A0 O9 K( l7 m
switch(type){
# n8 i6 K: S+ ~6 C& P% j
case plus.barcode.QR:
$ L @1 I4 w5 Y. ?$ ]- d
text = 'QR: '; // 二维码
. O8 K$ M1 A( z7 }- P+ I. h- L
break;
% ]+ e% _( V5 T
case plus.barcode.EAN13: M2 L# T4 ]4 E' m, R7 C, d
text = 'EAN13: ';
* o1 G6 Q' r# S# o% O% W
break;2 u6 j( u3 U4 V* i
case plus.barcode.EAN8:% W, y" f/ a3 s& @+ A! N
text = 'EAN8: ';
+ @& C: _" X4 ]6 j; S4 L6 I: Y
break;. t% t" q5 a1 k! G4 I+ i9 L
}1 ~+ [: m5 _& W9 P5 _5 T8 h
alert( text+result );- p; I# c2 `) ^. p+ V6 P
}
! ?6 k! l0 ~( X
// 创建扫描控件
' C# s1 l: Y% u4 L3 w, B' k8 s
function startRecognize() {: L: b. T8 _, y9 `" V* C
scan = new plus.barcode.Barcode('bcid');, {2 |) }1 k4 K9 G' @% N
scan.onmarked = onmarked; 9 h- v8 U, k6 u
}. n3 M5 g* |& u- H8 R
// 开始扫描
3 |. A1 O6 @8 S
document.getElementById("startScan").addEventListener('tap',function(){
2 t; }, M- t: M5 i
startRecognize();7 ?. h3 s7 Y! G F( `
scan.start();1 K: f N1 l. J! i0 q1 F. L9 S& M
})
( b% |8 _6 n e+ ]4 t- Z* L% V9 f
// 取消扫描2 t- T6 u8 X! Y& G; n
document.getElementById("cancelScan").addEventListener('tap',function(){
6 t# o2 T$ A! Y5 h4 X6 _1 ]8 p2 F
startRecognize();
1 k" |: E4 X1 r) N) k
scan.cancel();
; L. y, ~7 e8 u1 _9 r
})0 {0 B; k* U b3 b, p W
// 开启和关闭闪光灯, C6 |2 Z5 x! K* _4 ?( N: H
document.getElementById("setFlash").addEventListener('tap',function(){
1 Z0 ]7 }* w+ C3 b& h7 _, ]% }
startRecognize();
+ [0 l8 f' s) N e+ }0 d
isOpen = !isOpen;
& h i3 Y, k. [2 T8 L
if(isOpen){7 A4 @7 w$ ^+ `7 D
scan.setFlash(true);
# l/ @4 [& m# d; @ a. C" b d
}else{7 r0 ^4 e; J1 e% A9 X
scan.setFlash(false);* R \" p4 j! q( M1 \/ Z
}1 D8 H: k% {5 ]3 @3 U
})0 Z3 y4 N1 v7 q8 r. `4 X R
</script>
+ l+ \! m3 Z% W: a, v2 Q

复制代码

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

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

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