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 >
' s- g* `, u( w, _! r) l
<header class="mui-bar mui-bar-nav white">, M. i/ ^. M& n5 U) k
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
' C; g) e- P ^6 Z
<h1 class="mui-title">二维码扫描</h1>$ M# u; X4 Q$ E
</header>
& Q0 h( D7 f/ X0 N p
<div class="mui-content">
2 S4 G& e7 j6 V- ^7 ^3 l
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>0 e H, c# t- v& k- i8 P" ~9 r* z
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>: E8 K" d& g8 d# v/ ^+ i2 `
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>. W/ }6 k4 \: F/ n a
<div id= "bcid"></div>: ]0 Z* P0 t1 c/ c" |
</div>5 i2 E/ T* U x4 s) U% ~* Q J8 t5 f
</body>8 \+ U; ^: A/ K6 P: P: @9 a
<script>* y' ~: F3 d1 f" _, G) O* ~6 `# b/ y
mui.init({
- a, a+ s# ~0 m- ^# @
swipeBack:true //启用右滑关闭功能; S" O' w; c3 c- n! p
});
7 I0 L/ ^. ]$ i2 A1 x
var scan = null;6 v4 ^! p) I( W
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭( m. ~" t: ?5 F' m
// 条码识别成功事件
9 G4 b" s0 Y0 p; B( W; M% U2 F9 {
function onmarked( type, result ) {+ |6 u" u+ L: |! J; a& r. d0 _
var text = '未知: ';3 v L [: u# ~+ I1 B$ G8 m/ G
switch(type){
- v8 X0 k1 I+ g6 g7 Z
case plus.barcode.QR:9 a/ V! F3 m% \2 ^
text = 'QR: '; // 二维码
) N+ [8 y1 \; v$ T4 W
break;% I( j C5 I9 O0 z% p, _
case plus.barcode.EAN13:
1 X! M+ J' m F: `' @, [
text = 'EAN13: ';
2 D% D0 u! w) i
break;) }1 A S f% f8 ?7 D
case plus.barcode.EAN8:
1 N E5 S# E) K5 N9 z1 T, O
text = 'EAN8: ';: N. F ~2 u; n* M& j. R
break;; b8 {9 }2 R/ n! B3 g2 m$ {
}
; N2 }- j8 f/ U5 |3 W v
alert( text+result );- G9 H @" v* l# B+ q) T
}' Y. C9 w$ M( }0 d4 k" s
// 创建扫描控件 c1 n b+ N& n
function startRecognize() {* F/ M. o3 _1 a7 o3 D7 x" Q
scan = new plus.barcode.Barcode('bcid');
: V- {& a4 @8 k6 ^& K0 e$ l
scan.onmarked = onmarked;
" }! l0 O6 W/ k+ Q! L
}
% ^4 r4 D; `3 F) n* P7 v7 o
// 开始扫描" K! ^* W' b+ E8 [. u) P) _8 g
document.getElementById("startScan").addEventListener('tap',function(){: Z3 g7 x% d& V" m" }% c* |3 k
startRecognize();9 A: T8 c. o9 l1 U
scan.start();1 S: A2 k; C* X u
})
4 [6 t, C* e9 c" d; I/ b+ S9 [
// 取消扫描
( ^6 M% [( G3 B2 e
document.getElementById("cancelScan").addEventListener('tap',function(){9 r* b" Z3 |, y" e
startRecognize();
( @7 ?& A" |- o, p
scan.cancel();5 y* h, K3 ]" B( t0 x
})
' f) G1 a) B4 X8 E
// 开启和关闭闪光灯+ i* w( w( y: G0 x5 D4 z
document.getElementById("setFlash").addEventListener('tap',function(){! N1 ?/ w$ |/ ^/ d9 W- R9 c7 J2 u
startRecognize();4 g( G# h3 o+ r* F
isOpen = !isOpen;( X; `* G: p' _ w) Y" b
if(isOpen){
( O0 B# @8 C5 d& L0 s7 U, X# i
scan.setFlash(true);
: k$ u0 L1 `5 i& o
}else{
2 a2 ^( a4 w% R7 r
scan.setFlash(false);1 y' Q3 I" v/ ?* r- p g7 z% F
}% F H+ b5 B% ^( L# k% j8 m
})
3 m% i" q- p2 q4 `- @
</script>; F/ Y+ Q+ v1 \* S/ w: ^: V h

复制代码

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

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

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

浏览过的版块