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 >
) B* {- ?) |7 Q4 E2 Q$ e9 s4 r
<header class="mui-bar mui-bar-nav white">5 c% I& i: ]( x `6 H9 j
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
; x. J7 |, s4 g! r* p
<h1 class="mui-title">二维码扫描</h1>
% ?9 Q! Y9 D j5 N$ B3 S
</header>* o3 |$ H6 k* R e8 k
<div class="mui-content">
`- `* U0 _6 E: U- X
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( }8 e& }0 X1 e+ a) P' v
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
) J* U$ Q- Y) q% k5 a; H# e
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>) }1 J/ H4 v* a7 Y
<div id= "bcid"></div>
1 u! e$ D: a& k$ Q. o4 J
</div>
- ?0 L/ k8 _, H0 A' d I+ v# f6 Z, p
</body>
3 i# b6 X6 q1 S6 h2 M( {% h
<script>6 ^/ s! @& Y! t' p% k$ ]4 i( ]
mui.init({
$ ]( z4 c8 }8 ^3 e
swipeBack:true //启用右滑关闭功能1 R+ f3 T) ]# T' z$ r1 j
});
1 S: o, n" Y! Z
var scan = null;2 S$ M3 ], d& N7 [% m
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭" i$ T ?5 W& H& v
// 条码识别成功事件7 y# b; C. x6 B8 c' X
function onmarked( type, result ) {+ V+ j5 V( {# E% l8 S8 [: @" H
var text = '未知: ';/ @" B6 q* a" D: Y0 k
switch(type){; T+ k% H/ U. [, W
case plus.barcode.QR:+ A+ w3 \/ S) M9 }) J2 @
text = 'QR: '; // 二维码
" C( X# l# B, g$ q) p. h: M" S( h1 [- n
break;5 f) {: t! P: K# c( L7 b9 v
case plus.barcode.EAN13:
& Z: Y& A' l4 E, K% j1 i! c
text = 'EAN13: ';* N& ]; E. b) Q% m4 [4 V
break;; W0 Q; F% y( v4 v! {) q
case plus.barcode.EAN8:
, l K' J0 M* K' d. y2 ^( Y3 p, R
text = 'EAN8: ';0 j ]( W* |, c! r
break;$ m# m0 U" ~2 v9 y/ r3 W4 p
}
: H% R9 K9 _% G4 o
alert( text+result );% o+ K7 p# w& ~8 e
}
) Z: }5 v( @" R! |1 q
// 创建扫描控件. D" G# g( L+ q% F8 d
function startRecognize() {4 ?+ f. q8 B! _3 r; ?
scan = new plus.barcode.Barcode('bcid');% q) E6 ?2 x5 H
scan.onmarked = onmarked;
# e5 K; N. `6 e6 R( E( K6 r% M
}
4 `8 S( B7 w0 c) `/ o7 k" t6 [4 z$ H
// 开始扫描
6 b! D: }/ K( E1 n. J' n: B
document.getElementById("startScan").addEventListener('tap',function(){
& v* ~: c) n' y
startRecognize();
5 } m3 v9 t- N% P. A
scan.start();, ?1 v0 |# X6 D( R7 b
})
5 ]; N0 z) x8 @0 P( ]( \' c% |% w
// 取消扫描
& s6 i$ F; @3 Q
document.getElementById("cancelScan").addEventListener('tap',function(){0 L% ^3 y- ~) h6 s' E9 e$ ?
startRecognize();
$ L: d& U! Z, u# \: i& e
scan.cancel();
5 q( F/ k' g( y" [! }- w
})
5 w3 J2 e+ D9 t. P) Q3 |9 |
// 开启和关闭闪光灯
' b! i# W/ Z w3 }$ l1 y
document.getElementById("setFlash").addEventListener('tap',function(){) ? W* B: I7 Q1 N
startRecognize(); A& E m5 p* f9 A' Z: L( W" r
isOpen = !isOpen;
" V5 v2 Y- a3 p; F& L; @
if(isOpen){8 \- n/ O5 P# O; N2 b% A2 A' f. `* X4 F
scan.setFlash(true);
/ `0 i& O) U( w4 d6 H6 b
}else{
. G8 B6 }1 t( Y% u% _9 _9 Q) {
scan.setFlash(false);
, T1 l% W; S& v' Z; R
}
% J1 y: C9 \$ C, ?( T
})
! c; ]1 s9 k: |/ C8 c; E6 A4 ~
</script>( `5 d# h2 O O0 E* h. y; U3 h& `

复制代码

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

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

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

浏览过的版块