cncml手绘网
标题:
HBuilder webApp开发(十三)二维码扫描
[打印本页]
作者:
admin
时间:
2018-10-31 02:06
标题:
HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
6 m% S" N: W, ?% e
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
. q( F+ T! A- T5 f, Y+ L- g
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
. n+ Q E9 h( E0 @
《【iOS】CoreImage原生二维码生成(一)》
; o6 N4 l4 E3 ?6 e
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
8 ?. Q9 @, u* Q+ x
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
- D* \' R6 K5 S/ x# V) X9 {
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
; q% _& ^0 E( Z8 i! d5 g7 T) P
直接上代码,注释都在代码里面了。
* j3 B: S: L+ S( O& N0 v h
- t* _8 L& P/ j+ ?0 k
<body >
+ \3 h. N% ~$ i3 J9 V4 R
<header class="mui-bar mui-bar-nav white">
+ @& n; m! R" z8 N" l& O0 X T& r
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
% j6 @! S9 a" d6 j
<h1 class="mui-title">二维码扫描</h1>
0 X( q: U4 A1 G) E
</header>
" b" T' D0 E) t+ H, T9 G
<div class="mui-content">
0 n. s" `$ D, O$ D
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
4 B7 t+ i1 q6 l7 L6 C
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
% C3 i0 H- K4 Z. g& _2 i* [ d
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
3 T2 c. |" W& [1 ]
<div id= "bcid"></div>
2 w- x8 C/ e; q
</div>
9 H* C2 w+ @, l3 Q2 `" Q7 i7 b$ m
</body>
- p8 j' i! w; h+ d: J
<script>
$ Y2 Z, D. w4 u/ I; K
mui.init({
# U% m: F: h# _, S8 Z1 w
swipeBack:true //启用右滑关闭功能
2 @; I% J( \$ ~( X0 |8 @; B. j
});
9 s7 f2 y' s5 L9 K
var scan = null;
% C8 f* n! m! d( X8 `
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
# @& ]+ d- f9 m6 @7 `1 N/ [: B
// 条码识别成功事件
$ w; e( P8 ]* }3 x$ D
function onmarked( type, result ) {
; M# J) E1 J& G0 K' F
var text = '未知: ';
( M( l- \) s! E( @$ x
switch(type){
5 e2 f! p( I8 R* w' Y: s
case plus.barcode.QR:
8 _2 @$ B& h# f9 o t2 E
text = 'QR: '; // 二维码
/ J4 k! _ D B9 p
break;
% r! Z6 P- x5 d% ~+ C
case plus.barcode.EAN13:
; q3 ~3 }/ K. x( J$ w/ f! v% v
text = 'EAN13: ';
8 D. R2 j4 {6 o; T" M+ `
break;
( M8 Q4 R/ D+ v8 C
case plus.barcode.EAN8:
3 E2 J E4 N( Z. S; l% g8 p6 p' Q: S7 Q
text = 'EAN8: ';
6 C$ Y) U. T) R* z- R9 o
break;
7 P6 H" z/ s- V, ^$ M+ o' U0 e
}
' K M8 [* s! n) K( z1 ~: g! R
alert( text+result );
. n( |/ h$ n$ h" {" H3 g
}
% w n$ U6 m6 P4 D% B1 c
// 创建扫描控件
# w% W* a8 ^0 S) E- e$ N8 a, F Q7 E! A
function startRecognize() {
! M6 H" ]* F" I7 ?
scan = new plus.barcode.Barcode('bcid');
3 H" \. b# W3 C3 w
scan.onmarked = onmarked;
3 R. n h/ D- @# V0 j4 T& H# ~
}
3 j3 I& c, l( c# b
// 开始扫描
5 c+ z `3 p [) q3 }/ y3 h
document.getElementById("startScan").addEventListener('tap',function(){
/ f; ? V* R% l
startRecognize();
7 c3 }( [' ~4 m" C) N
scan.start();
% J) E( c7 ?, c% b
})
' k0 I6 j3 ]! O) q$ {2 l' I! Z9 s
// 取消扫描
& G/ A% E2 H; f) n1 L
document.getElementById("cancelScan").addEventListener('tap',function(){
6 F% p3 V" X1 h E7 R
startRecognize();
& h3 q/ s- ]! @8 e
scan.cancel();
9 K( X( k& k/ |
})
- P0 N, V3 L9 r8 J# I; f! s! a
// 开启和关闭闪光灯
0 c) q" Y: s9 ^1 Q( j/ A+ c7 k
document.getElementById("setFlash").addEventListener('tap',function(){
" ]+ P2 o$ f9 g, P
startRecognize();
2 y& ]( X8 m( r
isOpen = !isOpen;
# X& ^) ~3 X& ?5 x
if(isOpen){
3 e6 u3 h% b' O2 t/ w, R4 t: x
scan.setFlash(true);
, V3 |( _5 z1 u; [1 P! ~3 C
}else{
& g2 T! h5 T2 l9 t3 ^
scan.setFlash(false);
( r- |: Q2 h7 Q& }
}
7 \" @. \' v* E+ F6 E
})
# t; ?" @; Z6 G0 ?; x2 ?1 a7 N5 f
</script>
9 }2 S( p/ N$ L7 a3 h1 i3 E% d0 D, N
复制代码
5 y* p% R- V& x* t6 s$ W! p2 g
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
z- a, _/ j: c3 _' F8 V7 n
* v* y' P% b" {
欢迎光临 cncml手绘网 (http://bbs.cncml.com/)
Powered by Discuz! X3.2