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 >8 ]1 I+ e- d, y5 Q& E; c. J
<header class="mui-bar mui-bar-nav white">
( m/ H5 {+ i7 T4 v( |
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>7 Y3 z' L6 }, |- _/ D, b% Q ~
<h1 class="mui-title">二维码扫描</h1>
; `5 U; z/ g6 e; j( s
</header>
( T( k& M# G6 h2 k3 v8 }8 Q+ b
<div class="mui-content">5 V' X3 {( p- \8 n' S( f
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
, C4 X2 \! y* V
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
( P* v, `1 z ]7 E: l2 l
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
5 I) i% ~( c. y. D: t! W2 `
<div id= "bcid"></div>
2 H) y7 E9 R9 ^/ E' f# {
</div>* A6 f' u6 Q* ]+ w
</body>
3 b% O* `# B2 ~( U, z7 b
<script>
8 r/ `! i0 n. g* ~5 s. q% A0 y1 `
mui.init({# N# w6 k4 O7 |! Q* W5 U5 y- r
swipeBack:true //启用右滑关闭功能
: ?2 E9 k2 |' z' P. ^
});: w( E1 B8 `# g
var scan = null;
; m! X: T. C/ p" {! j& E) }, Z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 ?% y: w1 Y6 o g/ B
// 条码识别成功事件2 Y K; [/ h7 o0 t9 i' y; h3 e
function onmarked( type, result ) { ]2 }3 H4 a5 `! s( B p
var text = '未知: ';
! t3 j6 b& `7 M7 W, L6 ~
switch(type){, M3 `& f9 O/ T$ g3 |
case plus.barcode.QR:
2 G1 V* N" K! V# W/ l% |
text = 'QR: '; // 二维码
* g' u9 x' v5 B& _) x$ ~& o
break;
2 b- S1 v( l2 c9 j# f/ p! T
case plus.barcode.EAN13:2 e! L B; K }
text = 'EAN13: ';
& Y% S* n4 g/ {4 G8 ]+ `+ Y6 ]
break;5 W" r7 i- r" a! }8 c q
case plus.barcode.EAN8:' x5 O/ c6 H6 Y _1 @
text = 'EAN8: ';
7 x3 p3 s1 q' g* {2 n8 h
break;! f4 f% c0 s! p$ P
}
! ?* j* U7 z9 A* A6 h& M
alert( text+result );4 ^" X6 i/ m1 T5 C4 u( L
}' t# ]& ]! \* h& y
// 创建扫描控件
% L; h4 `; w g! k4 D4 `2 M9 Z
function startRecognize() {
" y; b( A3 F5 ?5 ]# l- E
scan = new plus.barcode.Barcode('bcid');
. w$ K( J+ L+ ?* } V. }2 f2 U1 L
scan.onmarked = onmarked;
+ U u* U0 g4 b
}
( b6 O2 Z, N3 Q* g$ B' T0 b
// 开始扫描
3 B1 o1 F+ ~# v# K1 p+ R
document.getElementById("startScan").addEventListener('tap',function(){
' T: P! h- j7 X& z
startRecognize();
5 F( T" v6 o5 T; ?. E
scan.start();# K( W, M0 m% \7 { f
})
0 \5 p' U! o0 ]3 N- {+ s8 L3 m0 P
// 取消扫描8 z* k+ E0 o) \' T3 l
document.getElementById("cancelScan").addEventListener('tap',function(){1 S/ L/ N/ w/ K& Q! r, ~
startRecognize();. N% I0 l- G$ F
scan.cancel();8 e+ O m' Q- F. G: ?! V4 e8 M j
})( D; b9 o5 A1 J a3 D: c! i
// 开启和关闭闪光灯4 x$ i" O9 y, ^3 T; o" B5 V: S2 D9 J
document.getElementById("setFlash").addEventListener('tap',function(){
# Q( A3 C8 T2 { k& e" _
startRecognize();
; v- ^6 ~9 L+ l3 K0 H
isOpen = !isOpen;3 x+ }! t7 |! f3 {! p9 r/ A9 M
if(isOpen){
: Q. q0 ]2 a4 ~ j1 K
scan.setFlash(true);
3 h- H$ N# Z, G' L( ~) X
}else{+ b: A: F* r) l
scan.setFlash(false);, s. w J" v" g. Y/ ?: D) ~
}
0 I+ Q+ j) {1 [ X9 e
})
5 @1 y# n: b, F6 y/ j
</script>/ H# Q2 @% ?. }3 x( w

复制代码

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

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

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

浏览过的版块