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 >; r9 R8 L% M$ t- w
<header class="mui-bar mui-bar-nav white">: H! k. B, n+ p5 o& o
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
% H- r% } M7 E. {4 j/ E2 z3 O
<h1 class="mui-title">二维码扫描</h1>
# H: O1 m7 o6 f% z" [
</header>. ^+ F$ B& W9 ~' B1 _- W
<div class="mui-content">) \, q2 g) q% J0 g2 [) a
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
$ n& O+ b" J, A, N$ V! }. d; r; q
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
: ]% A: F/ t4 ~
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
% |4 e+ I8 O4 n3 a
<div id= "bcid"></div> `% _3 Q) N3 l, c a0 y
</div>
5 F: w! Z7 m- K
</body>
* h& G8 a$ B; O! y5 V. f p
<script>
9 Q, v% U' J; i- s
mui.init({
, X) T$ c) J8 M g5 P# ]
swipeBack:true //启用右滑关闭功能
& e5 |! d( M) {/ ~
});
. g4 M+ N% B7 w8 Z; Q' X
var scan = null;4 h/ \& X- a5 I8 R! O0 u6 u% k
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
6 K$ U! K8 E: [1 \! W) m
// 条码识别成功事件' W9 d j7 @0 D8 a
function onmarked( type, result ) { ?6 Y& e N6 S8 B
var text = '未知: ';+ p6 [ t5 O e4 @
switch(type){
9 @1 X$ \: k$ X- v' h1 x7 b, c# U
case plus.barcode.QR:
# }2 j& ~% k! J$ G" ]& N& q
text = 'QR: '; // 二维码
_: M% E% I7 P# G% v
break;7 o+ J8 e. A( p
case plus.barcode.EAN13:
/ o% r' N2 @/ J8 O! t) q
text = 'EAN13: ';
% {* R8 j. d/ T" s0 d& K
break;/ q0 W% W# F; l& u2 R
case plus.barcode.EAN8:
" J" d( a0 R n. S( o6 L- m/ R3 l
text = 'EAN8: ';7 X: L3 S5 L& c# M1 d6 i4 `
break;
0 n' ~2 k2 D. s5 l& d$ s" p. {
}
0 H- \8 F2 Q& b! y: j
alert( text+result );3 [" l8 `( n8 K) b
}! S, l+ ~9 W* U( S: w0 G. G
// 创建扫描控件. G2 _6 w& Z* `+ y4 | a
function startRecognize() { R$ O' d5 e* L8 j* I
scan = new plus.barcode.Barcode('bcid');
: y( J4 k8 x# x1 |
scan.onmarked = onmarked; ' ~0 z- t: ^7 A
}
) V( p8 a% `7 J; X% C3 i
// 开始扫描( K" f0 v: ?$ _( `% C8 n
document.getElementById("startScan").addEventListener('tap',function(){
* V& u, y3 {. {5 h' m
startRecognize(); \" y0 l- ?6 o4 e! L
scan.start();
0 J' ^/ k0 Q, a6 `0 R
})* }$ q0 w9 K1 ~0 ?
// 取消扫描. e" F: x# X" f% F# @# ~ R9 ^
document.getElementById("cancelScan").addEventListener('tap',function(){
9 Z- {" U5 @2 C0 Q/ N
startRecognize();, E8 h# F8 `: S( O2 C
scan.cancel();5 ]5 m6 I) f$ x1 f1 K! h: L
})
% x3 b. i) [5 ~4 _$ U c
// 开启和关闭闪光灯" K p' X/ T# ~& k
document.getElementById("setFlash").addEventListener('tap',function(){% n, s! `/ [# q5 t# ^
startRecognize();
8 H1 P' t5 {4 G- v% k
isOpen = !isOpen;
: E: A, I9 W# p' X y
if(isOpen){
9 R) C7 D) d2 w/ M; g# r+ R
scan.setFlash(true);: W: u& o ]& c/ ~+ B# s
}else{: N% e4 l4 Z# w/ s) B
scan.setFlash(false);, W6 D" H' h- l6 s# h
}
` h# u. ~# m$ u' D) q
})1 o7 T3 a. a; e6 m$ m" n
</script>
2 q K U s' f1 R9 n7 Q

复制代码

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

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

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