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 >
$ k+ a1 q2 K! [
<header class="mui-bar mui-bar-nav white">9 a) h1 n/ ~/ O( X5 k4 m0 q; v2 n
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>. e# ] _% s, n$ }- E6 r4 @6 o
<h1 class="mui-title">二维码扫描</h1>; m5 u- ^6 ]% E
</header>
' t$ ^1 x/ b) X; x/ H; ~1 @
<div class="mui-content">9 @6 Q9 z A" S* ^4 Z4 b4 a
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
" ^5 Z/ h |9 Z% n- J% f
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button># D/ P" L. f/ w0 A8 a, ^4 s1 \
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>) ]& x. V, c, g1 A# }* C
<div id= "bcid"></div>
* X4 {8 D9 @ Q2 Z1 j+ J# |
</div># o7 c2 d& v" B) g' i, W( z5 H! t
</body>
: i* b- B% T$ _/ A t$ G0 Y
<script>
, v# v' p# k5 s8 J) l" U5 g0 s1 Y! u
mui.init({
) ?/ r0 _6 {. H1 y9 R4 d
swipeBack:true //启用右滑关闭功能
5 H- p. m0 E1 o) i6 n
});
+ ^* }7 _1 e! N8 C8 V+ `
var scan = null;
; c: p! R0 x+ W" g ?6 S( z9 P' o. {
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
1 |4 ]2 b: }4 U
// 条码识别成功事件
/ n$ p& ]) M0 n9 l4 U/ o' k2 a
function onmarked( type, result ) {
7 u! c7 ^. `4 y" \8 I+ m( F: p
var text = '未知: ';
# @0 d& R8 _+ a: x, i* ]
switch(type){
, S/ k2 q4 H p
case plus.barcode.QR:3 P6 F+ x. x, G5 S1 r
text = 'QR: '; // 二维码% z& b+ X4 q$ G3 O; m$ V
break;
; c! N* Q6 S6 W$ f
case plus.barcode.EAN13:
0 a& Z7 v. o. m' Q8 a
text = 'EAN13: ';+ f3 C% G- U( n( {, f0 o
break;
+ K* }% _; ?: A$ K$ K$ x, j
case plus.barcode.EAN8:
9 X* }" @/ Y! g
text = 'EAN8: '; C4 k0 Q7 s7 W* F9 R7 Z
break;, U/ q9 p/ q+ l
}$ k3 O$ o }: E E* M) W
alert( text+result );
5 E* q' Q1 D* G& l& Q& ?
}/ L7 t' z7 q# T4 u
// 创建扫描控件
) n4 {5 l( ^. Q5 @* S3 m! h/ C
function startRecognize() {! R# w6 f7 Y: \1 } j! l
scan = new plus.barcode.Barcode('bcid');
( G" V$ q) L% g7 [* M0 N
scan.onmarked = onmarked;
) ~: @( N6 I6 d9 Q. x$ N
}6 E: ]# x" o# T8 v
// 开始扫描
* F; J7 W7 h. m1 e
document.getElementById("startScan").addEventListener('tap',function(){3 g0 A2 u6 V3 p. I" `
startRecognize();* h% e+ U; z2 c/ T1 e; ~
scan.start();$ m' y( J$ }) g
})0 @+ g) i. x8 N: b8 `
// 取消扫描
5 m4 C }# B% z. ^" `# s
document.getElementById("cancelScan").addEventListener('tap',function(){
. M! E. p1 W% b7 f0 M% M
startRecognize();2 V( ]) N/ T8 T6 e% L: z
scan.cancel();# |* k8 u( W3 V! c1 x, Z: U8 W
})
. { C2 ]# P' {* ]
// 开启和关闭闪光灯
' {) z7 m4 [' Y$ K; I
document.getElementById("setFlash").addEventListener('tap',function(){
; d: {$ a0 C% t" ?, u) @3 e
startRecognize();
3 K* e8 ]$ p8 _& m' I& g
isOpen = !isOpen;7 ]' _/ y- H9 X9 i
if(isOpen){) \3 o/ b' k9 i8 e0 [7 y
scan.setFlash(true);( p0 U4 h3 v; H2 `' ^
}else{
8 I. P% n# h/ ~3 x5 G7 j; ]
scan.setFlash(false);
$ W! u: _9 p* Q' S& N+ B! j; G
}
! i v k0 O" \3 {2 r' V3 V$ X3 T
})
9 O2 `. S. J Q! p) |
</script>( @2 b) Z' O( ~

复制代码

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

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

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