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 >9 r7 b4 ]6 V* R5 u& p/ G
<header class="mui-bar mui-bar-nav white">3 V# D; R1 Y* f+ X! I+ z/ q
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a># K8 _4 O* B4 G2 ]
<h1 class="mui-title">二维码扫描</h1>, T. ~# X& l3 c- Z$ o* r4 ~; d9 J
</header>
! z$ H1 t$ G( ~4 V" ^) f4 K: b9 D
<div class="mui-content">
+ t. m1 I [2 G& d
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>: Y Q$ ?% B, @
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
& t6 n8 {% \2 I7 l5 X9 Z; V
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
2 N; `, M, [; ?4 A. D' t: H0 ^
<div id= "bcid"></div>5 v, J) h( }1 b1 I" U* }: v
</div>9 o0 A+ @ B# k6 P
</body>
8 x# N6 D' e2 v) l( ] ?
<script>1 C' v& v# Q3 P" R
mui.init({. l0 S9 r6 \& V' }5 x
swipeBack:true //启用右滑关闭功能; h/ z9 j H! M y4 `
});" s4 n+ X5 G ^7 p+ g4 T
var scan = null;
" M: A8 Z+ p2 X/ D( R: Q
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
2 A# ^9 w9 C/ C4 x6 ]5 M. y" V
// 条码识别成功事件5 b$ Y4 z; a$ C- J
function onmarked( type, result ) {3 \5 C( d* v/ L3 |
var text = '未知: ';
* R. D3 j8 b b+ ~% `3 g
switch(type){+ t4 d( C+ k b7 \
case plus.barcode.QR:5 V1 O9 I: @# T. F9 J
text = 'QR: '; // 二维码
) y! {' \* ?: W9 E7 i2 K2 h' y; v
break;
; E8 Q$ F, A. E1 m0 ~
case plus.barcode.EAN13:
% _- s# e! h8 Q0 Y `- F5 k8 Y
text = 'EAN13: ';
7 @0 |' D8 V: j. d
break;& Y7 }+ ^9 t: L8 ?; @8 g! c
case plus.barcode.EAN8:5 N3 l, d/ {8 L$ e% w3 L( S% s e8 W: A
text = 'EAN8: ';
j- H, s3 u* H) X% p9 W1 J! x
break;
1 X; K; C4 l2 M7 I
}
, y5 Y0 A3 M9 F# U1 ^
alert( text+result );
! v! T. o- I# I% T
}
; `- L, p4 Z/ C( ]: Q# _. s
// 创建扫描控件" s( ]# s8 u/ f: K- u' d
function startRecognize() {7 {! n. Y2 D8 t
scan = new plus.barcode.Barcode('bcid');
. `7 L4 D1 Q8 q2 m
scan.onmarked = onmarked; - P7 ]$ D, Q" o/ I# x
}
% O% A' ~% G/ R9 b
// 开始扫描3 g' ~) y8 f$ y: p
document.getElementById("startScan").addEventListener('tap',function(){; q3 N* x* Q3 o' R3 e% _9 g* ~
startRecognize();, q9 d0 O* }+ q5 x* l
scan.start();
0 c9 O6 v J) t7 p) j7 T
})
2 e& I4 o4 }5 {$ g/ ~' {. s d" L
// 取消扫描
0 W! ]8 c, u" E4 h, z
document.getElementById("cancelScan").addEventListener('tap',function(){
8 ^5 G5 W/ x8 l
startRecognize();
; g2 i' i! H5 ^! o
scan.cancel();
* [6 ]4 s8 T9 j+ |' K8 v! S
})
$ I/ {" B7 U7 s* q5 x) A1 y8 J
// 开启和关闭闪光灯
, N" r& u& g3 I. k
document.getElementById("setFlash").addEventListener('tap',function(){
: q$ r0 ~! h, X5 ^ f
startRecognize();
: Q0 v( \; @+ j0 X4 e
isOpen = !isOpen;
# i+ h8 _( q* n7 {
if(isOpen){: O, ?7 w' m% d2 t) T$ U h$ }
scan.setFlash(true);
. I* |8 L0 U- \. ^7 u) q; n! x
}else{
/ Z- s9 n, m4 E; h% b& m6 {: w6 X
scan.setFlash(false);0 u4 d4 a. ], q9 ~2 k
}
5 u) a+ L8 N0 U7 u; e
})3 W7 I- n( ~" b2 t; v
</script> I7 Z% a8 V3 g6 v

复制代码

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

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

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