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 >' C3 S4 L- z: F) h$ X
<header class="mui-bar mui-bar-nav white">
. Y3 I$ _6 L7 o( G% k0 c& t8 V4 g
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> M y. P$ c, L4 k5 W
<h1 class="mui-title">二维码扫描</h1>/ s3 u% r8 _5 y
</header>& `# Y% f9 i1 Y: B
<div class="mui-content">
5 E& I1 p# @$ i
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
3 t" n6 F3 c* [3 ]$ `* H
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>8 ?; y. f) G1 U2 d1 Q2 m
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>0 S1 b; _ J. T2 C
<div id= "bcid"></div>3 r* h% y5 |' Y( V8 _! J
</div>6 [! y! d# ^$ o$ }* h; W8 Q
</body># A2 u5 ~! f1 m( l8 O
<script>$ |0 ]6 _6 T+ _9 {8 R6 J
mui.init({
; Z! S+ c* w/ J/ b( }
swipeBack:true //启用右滑关闭功能! N; `, H- P+ h n6 X5 B, _" n
});! A. A, T) o5 q0 O' W
var scan = null;
( T" Q/ F$ {. S( v" X0 l
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
8 E. u3 ^1 v2 S
// 条码识别成功事件
% A6 G7 L. w; Q: I/ `7 S) r# ?
function onmarked( type, result ) {
+ K1 R! {' S; N+ t0 Y( {
var text = '未知: ';
* B) w" w1 t; P: w7 u5 a R4 t# y
switch(type){- V. ?7 k+ q1 y0 ?
case plus.barcode.QR:8 H! x% n4 ^6 L2 c; l3 m& f
text = 'QR: '; // 二维码
/ o4 Y0 h9 L9 C! {
break;9 I( r7 }" Z0 M
case plus.barcode.EAN13:
7 N2 a0 ]; U. l8 W5 R+ w/ H! c A
text = 'EAN13: ';: `+ P1 K6 |; [) i- m1 l/ m
break;
2 w' D6 O/ Z0 V Y" ~
case plus.barcode.EAN8:0 Q( I5 e8 y( J9 D
text = 'EAN8: ';
, @5 [+ Y' h1 X! G, ^( y5 }
break;- ]! ^# G/ r( [8 K" D2 X
}5 \8 [# g0 G! E9 @
alert( text+result );
1 n' V' j9 e: ?( a
}- M s7 o5 F, b4 C9 \
// 创建扫描控件* z9 f8 i5 g @8 v& ]
function startRecognize() {% h- {7 d1 ~0 K- S8 H0 W# D
scan = new plus.barcode.Barcode('bcid');7 A3 A( R5 Z2 q: R9 ]3 {
scan.onmarked = onmarked; 1 L2 ^* c4 s N" B) O' o
}, x( A0 z, N$ s' K$ l% R3 g( g
// 开始扫描
5 ?, [/ T# Y% O/ l: [1 m& j/ N
document.getElementById("startScan").addEventListener('tap',function(){" @3 U; b8 z* c: s5 C( c1 f1 w# w; w
startRecognize();
) h; W, r- B. K7 P" L# m
scan.start();
/ V6 D. }& C! l' G
})
8 ^) g8 g; W8 O( A2 C* t
// 取消扫描
2 f A( n: _3 s$ g. { ?
document.getElementById("cancelScan").addEventListener('tap',function(){
* C5 X. t+ ?- n# W7 Z- x
startRecognize();( o6 l+ f3 l o- M( ?
scan.cancel();6 F' g4 z9 U, D
})
( G- ]$ c+ o! J! F8 k$ T
// 开启和关闭闪光灯8 z* ^( i* ]7 b1 s, {
document.getElementById("setFlash").addEventListener('tap',function(){
9 k: f: @; ]& o9 j+ k, O6 {
startRecognize();
4 |, O# ~" P( A+ y) U% p' e; E
isOpen = !isOpen; `; C# _- E. w9 H- K8 x
if(isOpen){) o# H# J) `' j) A
scan.setFlash(true);
0 M- Q1 h! _7 d4 h9 C9 C' V) D
}else{
" h6 r/ o+ b+ X1 _- U6 z* ^: Q
scan.setFlash(false);
/ i; E, {) ?0 f- W! K
}- l6 u% M$ M, ^1 @: _
})
# y4 k8 W% r+ c* _- x
</script>" u+ Z! R% W8 n! @+ }+ H( L

复制代码

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

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

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