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 >, {. p2 w( {1 U
<header class="mui-bar mui-bar-nav white">7 [. E0 b4 \( F. ^
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>4 F1 U8 N3 |8 p0 }. S* `, T# B
<h1 class="mui-title">二维码扫描</h1>4 e# E# h1 Q6 A. ]! _( M& u/ t
</header>0 F4 z$ x9 b4 m4 ?/ y
<div class="mui-content">
5 W' z% D/ m. |- v' @
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>- m/ r' t2 m5 ]1 B
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>2 T) p* ]1 d5 k7 J0 Q m
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>& O0 }" M R/ {& x; `/ \4 x
<div id= "bcid"></div>
5 Y+ n* A S4 e0 z" y' b8 i
</div>
6 u4 x+ l- \: q
</body>
9 G1 F! z" O/ ?3 f" S3 i
<script>
?/ T" }, w% `
mui.init({' f5 c7 T4 j% R7 \2 {1 [6 |1 u
swipeBack:true //启用右滑关闭功能5 y7 r# E3 \# u* e* s
});! R- g: |5 Y r) {8 U7 z
var scan = null;
/ [8 p8 ~+ l7 |" J9 A1 l4 h) _0 J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
& x$ s% _. ?: F$ }1 |
// 条码识别成功事件
: K1 s- p# x0 s/ O: m/ U3 w
function onmarked( type, result ) {! U. `+ N# R0 G m
var text = '未知: ';
! t* X3 u! f$ B' @
switch(type){+ n6 k5 b. k1 y; I, Z' I
case plus.barcode.QR:
% T/ J" a/ E; z
text = 'QR: '; // 二维码% i4 ^; l) B; g7 o
break;1 _1 D% t8 x2 d7 N6 N
case plus.barcode.EAN13:
N6 C7 d: |" o$ i) c( k0 y
text = 'EAN13: ';' j+ z; p: }/ H7 s
break;
/ t0 T4 b+ F' L0 g+ x
case plus.barcode.EAN8:
* B4 O' v" @ q, F7 x* [0 f
text = 'EAN8: ';
7 X- I; \$ }* w* @& i: d
break;3 w' I3 r/ W* u/ X
}
0 [; R" G t" d9 q
alert( text+result );! b$ N* h7 V2 j- w- ~, @
}* g" f3 p. x1 ]
// 创建扫描控件; t- r0 X, G" v3 B8 d2 y/ I
function startRecognize() {/ U! Q6 d# r6 S. J% |9 ?/ _
scan = new plus.barcode.Barcode('bcid');! j1 p( X3 p" r- w
scan.onmarked = onmarked; . r1 r) g: L ?- W: S M
}
7 |/ q! N7 G* R% R* P. b- @
// 开始扫描
7 W* H. Q" f3 I l5 g
document.getElementById("startScan").addEventListener('tap',function(){1 q) I1 O+ Y: F9 J* G7 ]$ s
startRecognize();1 M/ b% J* k5 {: m( z, e
scan.start();, L+ z0 G4 @* ?6 H* S- e( K4 S
})
/ C$ d+ _1 e9 _$ Q% C8 w
// 取消扫描
$ `' u3 Z6 v/ L
document.getElementById("cancelScan").addEventListener('tap',function(){" v8 U. k) e' y$ V3 K
startRecognize();
( @$ t5 ?, T7 D8 g7 R# B% ^9 W
scan.cancel();- c, X# o5 i, r- \1 {: p! K
})
" u# j% D& w& [6 \: }9 \7 B
// 开启和关闭闪光灯
( P# E) |' g! c8 }3 R5 X* w
document.getElementById("setFlash").addEventListener('tap',function(){5 v0 e, h1 d5 e
startRecognize();
' m: X. c3 U E8 Y% m
isOpen = !isOpen;
9 M' C2 O6 \0 ]% W+ H: l% ?
if(isOpen){
( B$ f3 j* \9 J- U5 T
scan.setFlash(true);3 i, `# Q( K" ?
}else{
/ k l+ i( r9 }# S5 E
scan.setFlash(false);( U2 Q& _1 L. c& y6 T. l
}
3 l3 |; [" t; K' S" A4 H; U
})
& H& A. W) V! j. z' j4 K
</script>
9 W- L+ u G8 p+ P

复制代码

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

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

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

浏览过的版块