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 >
. Q. {- o7 d7 d! S& _
<header class="mui-bar mui-bar-nav white">
$ J7 ]8 b d5 \5 w
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>, @ m: d- j# C- h' n
<h1 class="mui-title">二维码扫描</h1>. i- R/ u9 U' d6 {+ H: c
</header>
7 ]. U; X& Y/ G+ Y" P. ]8 \* b! D
<div class="mui-content">) x2 I" p7 a2 ^4 D3 G1 x5 a2 t W
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
6 h3 E% ~! f$ K
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>8 d7 z4 {3 k J
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
; b# |5 d- q4 n
<div id= "bcid"></div>5 x/ K+ D3 h- `$ w- o7 |
</div>7 x! j! N0 H4 V+ a! b
</body>% i! v* m+ ]. i# q0 z6 T
<script>3 W6 Q N9 n! |1 |2 n9 w
mui.init({- c& `* `/ c/ R0 A8 T) [) K7 B
swipeBack:true //启用右滑关闭功能5 N/ D. o- G* e \! b
});1 G3 D" m$ H/ r+ t; }0 K8 ~* `( P
var scan = null;% W$ P/ o& h; |2 E+ r% L% q
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭! l$ f6 t L3 ^
// 条码识别成功事件
" T; R% L1 C8 G
function onmarked( type, result ) {
4 l9 n# d5 ~0 A2 }7 a/ e
var text = '未知: ';
5 `8 M6 q1 T- m4 ?! W) o, b- l2 Q8 ~& A
switch(type){
6 i& y. ]% S: r6 ~ k
case plus.barcode.QR:
, P5 X8 B: i2 ]3 [
text = 'QR: '; // 二维码
5 n6 W+ u& C: H2 x! B& ~
break;- F4 X" p% t& L$ C% K) w, X& h
case plus.barcode.EAN13:# w9 N$ N3 u/ ?7 @4 L
text = 'EAN13: ';
" e" s- h. P, Y- u8 H% N" l! n
break;
; [# P2 A( l" g( W/ z
case plus.barcode.EAN8:) g5 K9 J* V0 F2 r) x) k0 q
text = 'EAN8: ';9 w% ~- p0 ?& B6 I' ]+ p
break;6 N% K7 y+ Q' j, S. u* `
}
( d( a* t2 p- D0 `* K( `2 F
alert( text+result );& {' [4 N/ D; V8 I: C/ D6 z9 b* m
}
5 C0 L/ a4 P# V( k; a! x {
// 创建扫描控件6 @# l; u! @9 O2 u o" n
function startRecognize() {
' U3 i$ C8 z, J/ h6 c9 G1 P) V: \/ G
scan = new plus.barcode.Barcode('bcid');
+ w3 _$ H' G% `! H, |1 Z" B/ t
scan.onmarked = onmarked; , n; u4 b' u5 Z* F/ L2 L
}
/ U# Z3 I5 U0 I& V4 W0 i5 h2 ]% n
// 开始扫描1 W& J" F. \( {. h3 N! g, l
document.getElementById("startScan").addEventListener('tap',function(){' p& Y$ j$ E7 G: ]
startRecognize();$ u- W8 N% d0 Y0 ^( D1 X# b8 v% ^( E' k
scan.start();
, H% S' e' k7 H. M
})
! L$ j% u% W9 Q" N9 V/ z6 S
// 取消扫描! [, F7 x8 b; q8 C3 c/ q
document.getElementById("cancelScan").addEventListener('tap',function(){( y/ S1 G l: a1 n$ I \
startRecognize();
& i, p( u8 L# [ H! v
scan.cancel();5 l$ V) O. V G z3 D
})
" O9 }2 Y: @& }2 F1 f) m
// 开启和关闭闪光灯
- q- k- n b0 Q! {9 Q
document.getElementById("setFlash").addEventListener('tap',function(){
( N: u. z5 _* h" l( M
startRecognize();
: j1 }7 c8 \( G
isOpen = !isOpen;+ H4 M6 H, ?1 @1 T7 R
if(isOpen){
* Q+ {, G# Y7 ?! g I$ u7 i F
scan.setFlash(true);' A/ Y9 E# `6 l
}else{, ^4 A4 C8 B8 Y
scan.setFlash(false);
: ]/ m, e" T1 @$ z: u a
}% {4 J% y! j/ T* |$ g
})
# ?! V4 u: ^, u6 u+ {2 q
</script>! N' W8 B7 M P" k& S- r

复制代码

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

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

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