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 >
2 s" I5 Z; b5 `' x# j% V
<header class="mui-bar mui-bar-nav white">1 u4 d6 j2 k! H7 v+ d* k3 N. W, ^9 n
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
: N: L/ Y; ~ f) Y
<h1 class="mui-title">二维码扫描</h1>
' n1 S" h" L2 `4 {0 H
</header>
: i9 N6 C4 N9 G) T
<div class="mui-content">0 H% r t4 w$ E; G
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 {, P4 [2 I" w' ]
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>8 q% ?3 H/ O8 h4 v( S
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
' _- N$ s# J) @5 C* Y& ` q
<div id= "bcid"></div>" E( Y' j5 {! Q6 i5 U- l/ p" r
</div>
" K9 o/ E$ v7 j- W" H8 A. j0 x$ n
</body>
" c6 M0 `/ m6 e% `
<script>
r, J/ L' j B6 o/ g# C
mui.init({
+ s. P; ~ O: O! C, N/ v' i1 J
swipeBack:true //启用右滑关闭功能
$ g$ N; [+ t1 n' C Y
});
, n5 M @% [ p N
var scan = null;# v' Z# j! `; ?2 ~7 o3 N6 R8 j- b" Y
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭* K9 F+ g! W/ w u& u
// 条码识别成功事件4 r# i7 f$ t/ V+ L/ x5 t
function onmarked( type, result ) {' s2 q$ U5 H2 `3 i% I! Q: a- L1 a2 F1 ~
var text = '未知: ';
( b3 b4 t3 J4 K" d( Y
switch(type){5 F) e8 d# O' t& ?1 u. W
case plus.barcode.QR:
: V$ t4 X/ U/ d" V9 w2 u
text = 'QR: '; // 二维码$ A! V% h( ^3 T) z' j+ J# ~2 g
break;& u+ R4 z+ t) D$ Z' D! H
case plus.barcode.EAN13:
) z5 }( w! [ {, t
text = 'EAN13: ';8 y$ K3 R" ^/ X0 `' O9 s; W
break;
; b; U; q% `& e4 _$ K! j# S% p
case plus.barcode.EAN8:$ l; o3 R( E6 A, E8 J
text = 'EAN8: ';
; `, O- l% V6 A v$ ^0 T6 u
break;" C3 n L2 z& U \4 m' r2 N s1 {
}
9 q. o8 [9 C: [
alert( text+result );
' J1 _. n2 M% V
}
" n4 U2 x6 t: o$ S$ `1 D
// 创建扫描控件4 f9 F: c6 p/ k1 S) F* f" k+ j
function startRecognize() {8 z- J; U6 o$ Y+ u. E! U) T8 L
scan = new plus.barcode.Barcode('bcid');2 r( k5 ^/ k ?& e& b( Q% |+ j
scan.onmarked = onmarked; 8 ~# S% V0 Y3 u
}9 m2 F9 }6 R5 y9 R7 |
// 开始扫描
# s! q" r- c! t( H1 }4 k3 ? C
document.getElementById("startScan").addEventListener('tap',function(){% I! @ n$ |' N0 k4 H4 |
startRecognize();
scan.start();
, m" M; r& a$ N0 C; W5 Z( }% t S
})
# _) D( g$ A: e+ N3 g7 D
// 取消扫描
3 E8 u2 b N: B/ c7 }1 J- ^# }* ^1 j
document.getElementById("cancelScan").addEventListener('tap',function(){
9 \, `! ~% y# W3 P H4 S9 U! X8 }2 J
startRecognize();0 A6 X" V- b' k2 [
scan.cancel();
' Y5 e* d' T4 V, ?
})
! }7 i0 k7 \& y) a+ b, q) L7 I
// 开启和关闭闪光灯8 w8 s) d( a, s' Y& J& p8 X
document.getElementById("setFlash").addEventListener('tap',function(){) H- k6 s( O* z% @; t; ?; R
startRecognize(); G7 \8 ?& }0 P {" P8 [
isOpen = !isOpen;
* l6 B3 a% c2 Y+ b7 Y2 E* \
if(isOpen){
9 m/ ^0 m5 e6 M
scan.setFlash(true);
! d# ?1 ^; Q; L5 P! q6 n+ L
}else{: }( e$ G- E' J; p5 o
scan.setFlash(false);
+ ]% g$ |; L4 s4 q3 I' j
}
) I! n0 h4 ~! _+ E2 P
})
+ \5 ]; R" ^4 e$ v$ ~2 H% ^" i
</script>
+ k C; J# ?) J9 V8 _( o& j% M: p

复制代码

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

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

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

浏览过的版块