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 >
; T% Y. j0 G4 o+ O; i3 H6 j d* t, n
<header class="mui-bar mui-bar-nav white">
, Q7 Y" g' }7 [
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>4 w( j4 X) R3 e7 h
<h1 class="mui-title">二维码扫描</h1>! B* I5 u/ h% E3 h8 S5 l, a$ p3 d$ s& U
</header>
+ M) Y/ y5 u! E/ l) j+ |, L0 J
<div class="mui-content">" t+ E w3 A+ E3 C/ A, f
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( M5 F3 N d& A0 I- k+ r6 [
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>1 P$ T# L- o) `: g H! ?5 Y1 V- ]
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
& [+ Q( m8 ^. W, f
<div id= "bcid"></div>$ `; `+ a" H' ^, o4 u
</div>5 ]+ s# i" S) A* L, V; O( V% _- ~
</body>) ~- y* S2 V0 Q6 _1 E" i
<script>3 v. s3 L c0 ~, R- w: }
mui.init({" n+ S! T7 t( y: _7 ~+ \4 H
swipeBack:true //启用右滑关闭功能
. x+ |/ Z" C/ C/ E
});4 h+ R4 f3 `1 g0 t, b
var scan = null;
3 B! U8 ^$ S& H/ D( p$ Z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
* Z( S4 \2 e5 l0 r! L8 H/ A
// 条码识别成功事件
; E: r* W" D0 p
function onmarked( type, result ) {7 |' n4 J/ x: \" ?2 R
var text = '未知: ';0 m0 e. F4 ~2 [3 b
switch(type){
- F( C5 h. n* U, D6 ?# E4 Y
case plus.barcode.QR:! N$ w" n) c* i7 J. G! X
text = 'QR: '; // 二维码
. b' C( T w9 ^ {0 D
break;
5 c/ g) C2 h3 M
case plus.barcode.EAN13:
5 S- D1 m/ K5 u( u( h
text = 'EAN13: ';
% ]' @( M/ y1 g7 S
break;
/ Y, y4 i8 U$ r4 i7 V1 v
case plus.barcode.EAN8:
: ?/ x$ `( \0 J, i
text = 'EAN8: ';
" V; y6 F" @1 t* x
break;
j. V! d. G% P# s; b, ]
}
) K- U" D! H% w; Y7 B8 b+ u9 F
alert( text+result );) f# R& _3 q# I: M4 I
}' }- d: h/ S. {4 Q& ~) V
// 创建扫描控件
: j! y+ X+ H. M$ W
function startRecognize() {5 M4 `4 @( k) q( M9 P; g1 M- i7 N- d
scan = new plus.barcode.Barcode('bcid');1 r" `" R6 q* r7 T$ V/ K
scan.onmarked = onmarked; 9 c& Z- O |. c2 b
}
$ ]6 p% J& H3 X$ ?5 _& y! K
// 开始扫描
5 e4 p! ]: l+ `( B! M8 ]
document.getElementById("startScan").addEventListener('tap',function(){, u3 Y3 v9 Z: E' t9 X2 ^
startRecognize();( ?+ q5 x! N7 c. ~& F6 _9 e3 E8 g
scan.start();& b) ?& n* f% U! i/ G% l6 D. Z
})' e1 X+ h/ Z) ^
// 取消扫描
+ U- c# R) B; M2 S, s d/ H8 r# ?
document.getElementById("cancelScan").addEventListener('tap',function(){6 I c" r+ g9 N M% Z; [! B# }
startRecognize();
3 s3 R& E2 J, O% q3 s8 n8 U* h
scan.cancel();
2 @" D. B# D6 Y% L+ Z! o- J
})$ G N0 u- _5 A# {, \
// 开启和关闭闪光灯
0 C2 S. b s) {9 } V
document.getElementById("setFlash").addEventListener('tap',function(){, F0 ]# z# F7 i" }, V$ D
startRecognize();
* v1 R7 I5 P; X4 Y3 i8 ?
isOpen = !isOpen;; ?, k# E6 r7 r/ ~% E T5 [
if(isOpen){ e2 n2 Q- Y2 U, J
scan.setFlash(true);
# F: p; \5 a3 H+ z
}else{- o2 M$ r6 f1 U7 X
scan.setFlash(false);
+ U8 j# h. ~2 W5 q, M/ f* `- C
}; E) a; U, T8 A* N" U! O
})" ^4 R0 m& g' \0 z( d
</script>
" m: N9 F% g$ Q

复制代码

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

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

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