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 >
f: n% A- ]/ c
<header class="mui-bar mui-bar-nav white">
* j" R- X w/ j0 k6 e6 J8 B8 o
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
8 K4 U2 \' I3 E) w, P# V
<h1 class="mui-title">二维码扫描</h1>, h& }) w. k, T3 Z
</header>
3 |$ s5 t" c0 O/ a
<div class="mui-content">! B+ m/ j+ y0 a( P
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>9 t$ y4 `6 }$ e2 g
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
2 p) @) y5 v- @2 ]! F
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>) R1 l, { J. t4 Q1 _- q
<div id= "bcid"></div>
3 |& k8 K8 E5 D( A; L
</div>
+ d" B/ }! Y: E c8 b
</body>
+ U" {: Y8 I; X5 Q* B
<script># O6 u3 J& p, H
mui.init({
3 V' a t6 q* O* c! k9 N. C4 P) e
swipeBack:true //启用右滑关闭功能4 r$ B( e8 K; M4 [
});
/ o, j( X8 K. l" l1 i
var scan = null;
- F- V2 |6 U+ w" G( d0 o4 t
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
/ p7 c1 g; m' ^5 v; ~
// 条码识别成功事件
; U7 C; @, v% n, _5 |2 s0 i$ V0 R9 b
function onmarked( type, result ) {4 V' Y0 ^8 j0 ]$ E% l% F
var text = '未知: ';0 Z% o% C7 `3 J- P! L/ H2 U
switch(type){/ P7 g" J/ `1 _" y0 b$ X: q
case plus.barcode.QR:+ Z( m, r4 U0 D3 O% M7 `
text = 'QR: '; // 二维码: X& P# n% N" K( R" b
break;
/ B$ f( P0 d% T n! b' J7 ]7 a
case plus.barcode.EAN13:
/ `) h% w0 a- v+ n0 p g1 H' Y% w
text = 'EAN13: ';& F( O, r* W) s4 E( I; t- |$ ?& t
break;0 ?/ c$ g" }6 D
case plus.barcode.EAN8:
& b8 b7 L; J, C3 ~! h3 e7 N
text = 'EAN8: ';
# Q! g1 s0 M* W* X2 k+ M' V1 Y
break;
1 D1 [# S0 m. \4 U- \' d1 Q
}' r' i7 x% X2 Q7 ?& `" g& c/ ^
alert( text+result );) F) h# @" h, {. ]/ @$ q3 `4 X
}
% q+ r6 ]* J8 V' x
// 创建扫描控件/ `5 G' f% x2 ^4 Q# P( J$ d' F+ _. q
function startRecognize() {, P0 s @$ Z! q1 P3 ^4 n% H
scan = new plus.barcode.Barcode('bcid');
9 n- O# Y5 p/ i0 |0 j5 N& O
scan.onmarked = onmarked; $ T/ Y/ j$ b' ~" P' u
}1 M5 s/ o! z& L+ P& `
// 开始扫描
8 D" m! R; Q v7 H/ E& Y* y8 \
document.getElementById("startScan").addEventListener('tap',function(){
7 f( t/ h. N' ^
startRecognize();
9 a, n, o% i: {
scan.start();* Y$ `% \3 G0 _- x, K) Z" y
})
/ c# h) ^3 J, E G0 o% U& L
// 取消扫描( m: s* I( G; `/ F. n
document.getElementById("cancelScan").addEventListener('tap',function(){
, E& n5 @* b: v) h% _% P5 {) }6 w
startRecognize();
; u+ l" D* f* x; n5 _ f, p
scan.cancel();+ R# K6 Y7 y7 b+ d
})
3 o/ K0 y, E0 c
// 开启和关闭闪光灯 E/ T( @7 ]. m$ `/ z' J- c
document.getElementById("setFlash").addEventListener('tap',function(){( t! K" e5 N. W }* X
startRecognize();. H X8 ?+ ?! ]3 l0 t
isOpen = !isOpen;
' K& G9 L+ L+ C# h" |0 O
if(isOpen){( y9 e3 n* K; k/ b( ^/ [) b6 y P
scan.setFlash(true);
2 o( U z2 s0 x$ F, p
}else{
. T+ V6 E% e$ J" B8 }) Z
scan.setFlash(false);
* |* H' H J. A9 m: G
}. N F! ~( e7 F3 _4 I
})
2 w# Z4 @% e5 D1 ^ h! r U+ |
</script>
: c5 M/ G) Z( b* ~, p9 a4 R( ^

复制代码

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

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

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

浏览过的版块