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 >
b* y7 i' V# Z; G
<header class="mui-bar mui-bar-nav white">
h3 I! W3 m; v4 R
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>) S% b6 x* _3 r3 _/ T# w! T* Y
<h1 class="mui-title">二维码扫描</h1>
2 {# d I% X7 X g. q6 l0 e) \
</header>
% `6 Y; ]! }2 S0 j: f; S) i
<div class="mui-content">* p" a7 S/ E+ h' E- A& P$ b; D+ Y
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
3 E3 u) N& E$ y9 {/ C3 G8 z( v# B& e
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
6 k6 J$ \/ ]3 U- ~& P8 `
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>! H8 u2 r, c( }1 u
<div id= "bcid"></div>% h; T2 ~: d, i
</div>
% s& n+ [1 ^2 L
</body>! i! B' J5 D9 R
<script>
0 F' R+ J1 l" W% |% U
mui.init({
1 P# }! a* t$ i
swipeBack:true //启用右滑关闭功能
$ }3 n" R; W+ }" A! p5 x- n
});5 N* x% p% B$ Z8 W% u
var scan = null;7 [/ X+ c; d4 W6 c6 }
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
: Z- e' D0 Y8 {. F
// 条码识别成功事件
/ `8 |/ s( [; {1 s3 h) x
function onmarked( type, result ) {& `: M" U7 e; m8 V a! Z% F! |
var text = '未知: ';
" n: Z. S- \/ e r% O
switch(type){
% X8 G$ e8 }5 P) ]7 G
case plus.barcode.QR:
2 D8 a7 l5 Q. I @' L" u
text = 'QR: '; // 二维码
# c# i: g3 q/ @( y
break;
2 _' H/ p! k8 V
case plus.barcode.EAN13:
4 r. s% F! {: k
text = 'EAN13: ';4 R# E6 j+ ~" E) F
break;
. w; c. P+ v1 U9 y- H: B
case plus.barcode.EAN8:2 P i- m! r- d' p: q
text = 'EAN8: ';
8 }9 @+ Q& B% W0 m( p" V
break;% ~. S: y# c6 s* I* `
}* W; r+ L3 y9 J' N* z
alert( text+result );
8 \6 Y0 G/ a: _9 \0 W: p& X8 u0 X
}
' a' h5 j# Z0 j1 }: V
// 创建扫描控件
7 }' I4 [, p, G1 N/ G4 j
function startRecognize() {
, O. U/ O, l% V7 X: a; M
scan = new plus.barcode.Barcode('bcid'); V$ Y1 y- i- `
scan.onmarked = onmarked; ; x- H3 Y5 c R; m; q" S+ i9 ?
}
7 y7 @5 O- m0 F5 X
// 开始扫描
# G9 w: R! y. i/ _
document.getElementById("startScan").addEventListener('tap',function(){
8 e1 P, u) K/ V
startRecognize();$ F' y1 q8 W2 X
scan.start();
$ n I# e- `- {: w3 v* |
})
+ n' K0 E0 N* U5 f& _
// 取消扫描
1 ?3 P4 s' \) u
document.getElementById("cancelScan").addEventListener('tap',function(){
; l5 A3 v# b* I" L2 G% C
startRecognize();3 F# p+ ~( M( g; H( p
scan.cancel();7 V+ C. A) Z! s7 V H9 S) i
})7 v' n i8 W. q$ W) m6 p, c
// 开启和关闭闪光灯
' R) m# g# V9 Q( P% J' D
document.getElementById("setFlash").addEventListener('tap',function(){, N2 a: {% b2 b. t
startRecognize();- c1 M$ a( ]0 H
isOpen = !isOpen;9 z6 T8 m1 N7 S3 x3 n( z
if(isOpen){
4 T9 ]. T f3 \
scan.setFlash(true);; W& M* x5 V3 O% I
}else{# o h+ Z. T; e' X. F. G
scan.setFlash(false);. K* J& Q5 _; T; M
}: \ l- v" B3 [6 {
})" ~7 b& } _' T8 N
</script>4 @9 j8 O8 U; R3 o

复制代码

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

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

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