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 >) D) ^. {" I! C5 a0 a5 `
<header class="mui-bar mui-bar-nav white">' w+ o- r6 h% |" _; j9 W& e+ I
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>4 @8 }) Z2 _8 N4 b% O
<h1 class="mui-title">二维码扫描</h1>
) N7 d2 p$ Y" ~
</header>' A0 X5 b0 t4 W% p
<div class="mui-content">7 f# F# B: r+ O& f! z
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>6 W+ X% J0 q6 X* i$ H
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>- x- T; s/ t3 T" }6 d1 V
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
" z: p2 b# `8 w9 g
<div id= "bcid"></div>
: ]! N. v5 [3 ?4 s* {- ^/ V8 Y
</div>$ `- V. J+ j @" {6 k. u) W3 J! Y# _
</body>. s5 Y0 h7 x9 Y1 d% q, ]
<script>1 R( q1 r7 P$ C" k: ^ X; V. ]
mui.init({
: s% Y( r. f7 m/ M1 i
swipeBack:true //启用右滑关闭功能
Q* k: s- T+ Y
});
' K0 J6 E3 l N6 ^
var scan = null;
& p6 }, ~9 i U E/ _. U
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
7 v( p2 ?1 e" z# m5 |
// 条码识别成功事件
$ \' t1 U) O1 @4 T( Z, E% i
function onmarked( type, result ) {
& w, y3 s, V: j$ K" i& u
var text = '未知: ';
2 r& @) d5 A9 F; Y0 e" r8 K
switch(type){
- a/ i* a$ g+ g0 v& {
case plus.barcode.QR:5 o- ]( j" E- C5 {0 c9 M* I
text = 'QR: '; // 二维码
2 G; t# ~% w1 G, U2 p9 ~# I" p
break;
" l" D$ b( H+ A' ]! y' o
case plus.barcode.EAN13:7 I/ A. m4 p! c; s. X
text = 'EAN13: ';
9 b: N$ h% Q, _
break;
! Z% l) ?/ m. t5 x
case plus.barcode.EAN8:
1 @3 W3 Y! i8 G8 G! {
text = 'EAN8: ';( [) b. o/ Z4 [, ^- I4 |
break;' w9 ~9 F, }6 F g! m" S. @
}% a, U, n, V6 }, W# U' s
alert( text+result );
9 {+ ?; r+ n/ ^+ M1 D- c3 e. n
}; Q- m! s% \% S. C( o
// 创建扫描控件 U: q v; u& V1 s( h6 C$ E
function startRecognize() {
. ?' N/ T' m: h# R$ ^' }
scan = new plus.barcode.Barcode('bcid');5 s; P! v& w% m0 `
scan.onmarked = onmarked;
1 y, q& }3 }" P. B' G4 V5 F, `
}+ ^; V0 r4 f% f' s' D9 r
// 开始扫描
# h8 q. y+ @2 a# `
document.getElementById("startScan").addEventListener('tap',function(){/ \0 b, Z' ]8 V5 b: G6 c9 o
startRecognize();
2 W- n3 b2 Y+ ?( V1 p
scan.start();
% R4 q4 w" i7 b) R5 Z' b
})/ l* j' Q4 W6 [% p- ^
// 取消扫描
' o( Y2 l) g6 o' t: Q# X* L @! ~& a
document.getElementById("cancelScan").addEventListener('tap',function(){5 Q7 S" ^- @$ T% G% j9 @. U" u0 |
startRecognize();
8 x" u0 t/ C0 l6 P1 h
scan.cancel();
n0 E$ k% M7 Y3 Q
})
9 M. ~; S( p% i5 k0 w% Q& n, f
// 开启和关闭闪光灯
$ x' H, [9 W+ T9 y+ Z8 d) U
document.getElementById("setFlash").addEventListener('tap',function(){
6 Q! x3 ^8 P& C/ o: d
startRecognize();' U5 R& s/ }7 M& N7 s) ]; h# I
isOpen = !isOpen;
6 `& F$ s" p9 a. l' L
if(isOpen){* \9 H( A1 j! s9 }
scan.setFlash(true);. i' |. {! P7 h
}else{
" Q" z) O% p7 L5 _4 B" g6 d4 j
scan.setFlash(false);
7 \* M- n2 D$ I! ^2 u2 |, J
}" y' F) w) k. V* F' G0 a* {! Z
})
. Y1 Z, D- C/ B6 i' b
</script>& l( V6 N- f8 i8 O8 X

复制代码

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

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

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