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 >( h, q' O5 l3 d3 W& G1 H* [
<header class="mui-bar mui-bar-nav white">( }1 H* v6 P$ T I
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
' H( e2 n& a" }3 p+ ?9 {& E
<h1 class="mui-title">二维码扫描</h1>
]8 ^- @% l" @8 X2 A0 d
</header>0 b$ u" R. m" ]2 V$ k1 m. s
<div class="mui-content">
! s7 V8 L& q" U! g, E! a
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>2 K1 K i2 a: I, J& J; _4 l6 c
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>; G/ m/ j+ I; @1 h
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>; n$ |4 {1 F' A) E/ w9 a5 c; `
<div id= "bcid"></div>, g d0 P$ C% E. j2 W' I7 e5 D
</div>' T5 J2 P9 I ?) f
</body>
# Y% Q1 R3 s1 Q2 i( x0 t9 Z
<script>) l7 N# E) r- Y% c
mui.init({5 }- J6 b8 |0 ^3 H Q; X
swipeBack:true //启用右滑关闭功能) A! [0 T, B" d/ a) [* t
});, R# K; I1 V. `/ q3 Q/ f5 y
var scan = null;
+ `: u# w8 v2 U* A5 L
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
2 U4 l: q! @; E6 r5 b8 R
// 条码识别成功事件8 ~7 n X4 p0 Q0 u
function onmarked( type, result ) {, Z `% |4 e; ?, m2 o4 e0 X
var text = '未知: ';
- Y3 ~. a/ m! @ v
switch(type){
4 n! z/ q6 @# B
case plus.barcode.QR:
( J& P. y8 Z% Z2 C. e3 ]7 }
text = 'QR: '; // 二维码
" k, x* T) V& \7 o
break;
' L8 l, c# D |- f/ z5 z
case plus.barcode.EAN13:
5 J5 ]. ?, W8 ^; Y
text = 'EAN13: ';) @% N* r1 Q4 l; v0 s
break;
& C" C; b) O: |% a4 d& K, J$ u
case plus.barcode.EAN8:
" E" f; }/ J* D) s; ^ ?. c
text = 'EAN8: ';% b; P9 X1 y% W4 c- s/ \
break;& y/ R6 o+ J# c* b, i
}9 u. |% h( R' H8 G" s3 _. u6 j2 k
alert( text+result );
/ v/ y: q$ h" j4 b4 j
}
( H3 m/ }0 f" Q- L, y/ t
// 创建扫描控件$ T! v# c4 Y2 b: F ?) b
function startRecognize() {
: u" e2 B* C/ p" E% s u W
scan = new plus.barcode.Barcode('bcid');5 Q. P1 R0 L* _+ o
scan.onmarked = onmarked;
" H+ E+ T `) u
}/ T8 s0 |6 F& N1 F" p4 d3 y7 u. O
// 开始扫描( O- V- `& K9 W! v; p0 Y# n
document.getElementById("startScan").addEventListener('tap',function(){9 F% H) T. x5 r
startRecognize();2 p& g8 F4 Z1 E3 g& k9 ?
scan.start();
' {3 Y# h4 ^7 c& m7 l2 t7 n
})1 F& j' P- {) I, e* r
// 取消扫描
) L2 H( D5 f% J5 u% s
document.getElementById("cancelScan").addEventListener('tap',function(){
+ ]2 L6 R7 c! t: [- r" m, Y8 `/ H
startRecognize();
r! Q( a4 ~5 j, i0 j
scan.cancel();
7 A& K& \1 `; f# \, q k' i
})
9 C! L8 \- u/ ~9 E% U
// 开启和关闭闪光灯
/ E1 T. l' q5 F& _
document.getElementById("setFlash").addEventListener('tap',function(){
3 f }. g% n3 k$ W. P* M3 A
startRecognize();5 k, k0 d# J( S( B4 P- ~
isOpen = !isOpen;9 b7 d- d, j+ b- ~2 S
if(isOpen){% W! A( Q$ |& g- l# \7 a2 L
scan.setFlash(true);
* J& J, t( R) I. w( C% G1 ^* \
}else{ q' o% g3 r' ^9 V: y
scan.setFlash(false);& W0 O9 z# W5 V/ x2 X
}& Q4 H6 ]- d) _- e
})
) _% y1 Y/ ? }8 j1 N" p
</script>
) O" E1 y: ^2 p

复制代码

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

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

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