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 >0 l" }6 u# f0 t1 j" S0 H1 c
<header class="mui-bar mui-bar-nav white">7 R+ P* h Z! s h/ E
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
7 m+ C w4 g7 e2 t. v* T5 [
<h1 class="mui-title">二维码扫描</h1>, ?. J# m: M9 |8 z; _
</header>' |7 F1 H" ?! J: g" |. N5 a
<div class="mui-content">
7 n' H, ]' x5 o4 u6 o2 P' C
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>. R$ k4 Q3 R, y8 W/ v P* C* x
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>; C! g0 S- F' D) N8 M7 l, L
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>. W6 s7 O" X1 K
<div id= "bcid"></div>9 z3 l! r" p( i3 [* R
</div>; V0 e1 w) n8 B' r/ |0 A0 _ h
</body>0 q: ?& @$ N" v! |; n. c
<script>
- _ Y: j$ Z, E4 v7 a( D
mui.init({+ M$ R9 @' r# n: z
swipeBack:true //启用右滑关闭功能
. g1 i$ o% r3 f
});, ?* t: Z$ e& O1 u( g
var scan = null;
4 [! D2 j- M. D3 V. o2 J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭* X* V, d1 t( V) s# r9 u; ?
// 条码识别成功事件
+ }0 M! E& ^' f
function onmarked( type, result ) {" I2 M# F- }' P' K# m$ {+ v
var text = '未知: ';' C; y! V; _% I. E+ o$ X
switch(type){
5 G. Z+ B0 t2 t1 I1 d3 E; P
case plus.barcode.QR:
, ^; q* B, }2 T, k Y4 @
text = 'QR: '; // 二维码, I6 L4 U, u/ F$ z+ ^# K
break;1 O! m, p! P# U0 {* @
case plus.barcode.EAN13:
* O5 U1 e/ r- Q
text = 'EAN13: ';
( C. H7 E; \8 K! A9 I
break;8 x+ H' v5 f; R$ F4 A( q& h( h0 \
case plus.barcode.EAN8:
1 G8 N1 X3 R! d! h
text = 'EAN8: ';
7 | z; X" y; u" x5 x/ {
break;. L0 Y/ o1 P, _/ s3 H* \$ V
}) |$ _1 ]& x D( o: Q* N
alert( text+result );% e2 @. G; q3 j4 C2 Q* d
}
+ k# n# ]( @ A x7 d
// 创建扫描控件
" g2 N, D6 W/ G9 X; @3 ]( N
function startRecognize() {* w0 r( i+ o9 s+ g/ t! _ Q( v$ p
scan = new plus.barcode.Barcode('bcid');, D6 ~4 S; l+ N2 P/ T- K
scan.onmarked = onmarked;
; l( g, L9 L! R! {
}# b' N n7 N2 F( e i' N1 @# Q
// 开始扫描: Y3 u/ U6 @/ _+ @/ a
document.getElementById("startScan").addEventListener('tap',function(){
c( X% s2 B* g
startRecognize();3 K, {' y1 p9 x8 n) X
scan.start();
9 Y! Y) i% W6 y
}): z& [! O/ c; ?, P- D
// 取消扫描
9 b! t+ ]+ `' [$ L( ?
document.getElementById("cancelScan").addEventListener('tap',function(){( l" ^1 ?6 S. C& W
startRecognize();) ]# h2 S/ @1 |5 U7 |0 _5 w% g, W
scan.cancel();
$ Q4 b, v$ M( t
})7 }6 P3 ~7 { W1 {
// 开启和关闭闪光灯' ~3 V) z9 C( g5 L) G3 o& G# `
document.getElementById("setFlash").addEventListener('tap',function(){+ M; F8 X" t; A3 X3 s+ N: S# A
startRecognize();4 m% F+ G: C+ W% P- Q
isOpen = !isOpen;
9 r$ } q) n& T% G( ^
if(isOpen){
1 J* K4 m% {- O2 J9 Q
scan.setFlash(true);
& E- G: E- |3 ?. L
}else{
5 e7 r: a2 ]0 \2 G7 s3 T
scan.setFlash(false);3 ~' R% b, B% ?3 k9 k0 b" q# ?
}
( c7 H( v" T' `' w0 i/ D( h
})8 W0 h# d+ h' W: ]! ~% h" i
</script>: K% I6 ~# D6 ]' [

复制代码

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

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

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