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 >
) ]4 y' x6 u$ Q& h2 R2 n
<header class="mui-bar mui-bar-nav white">2 i% z% J8 |) }4 e1 `3 R6 b1 y
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>, E/ h+ d4 x% m; {
<h1 class="mui-title">二维码扫描</h1>
" ~6 E6 T. O# K- ^0 U
</header># t+ W- y7 R8 M/ H; o( v
<div class="mui-content">
8 @0 G& I6 j7 ~" T; U( n
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>% C6 R V& C* x2 R1 n& L
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>8 H4 ?4 l4 I8 A
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
) ?) O" h7 I( p
<div id= "bcid"></div>
' j- [- L: b- C4 I
</div>
4 p% D4 |+ Y2 T( e. \- g K3 h
</body>% y* L" y( f" J. m
<script>. J# ]# A/ i' ~- _
mui.init({* k) F: ]$ x% H- L+ _% V$ F
swipeBack:true //启用右滑关闭功能
" {- h. ~: i; x6 G- `8 r
});8 I* j9 n# D0 P/ P! @% C
var scan = null;
/ @/ C: R) B0 U: [$ W3 K x
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
w% f# B2 [+ r$ R! Q
// 条码识别成功事件$ k7 z! D& t5 d! A& t- `1 n5 C
function onmarked( type, result ) {
" f N! u# C: W( g1 X7 ]6 ~
var text = '未知: ';5 D8 }$ t. A) h7 X5 m
switch(type){
- i: @4 X' r/ e( Q
case plus.barcode.QR:" o) K! p; `# `
text = 'QR: '; // 二维码
1 T# s$ s% t; V B3 f, ^
break;
: `" Z8 h( u/ Z: Q3 k; ~
case plus.barcode.EAN13:
! c5 w$ D* g- K4 U/ b
text = 'EAN13: ';* o, `3 t8 o- K$ B/ C, W0 z; T
break;+ ~4 C3 C+ F' d$ S
case plus.barcode.EAN8:5 l. f: {! \: X7 k! Z0 W0 P4 }3 z
text = 'EAN8: ';
! y+ ~3 ?3 m) {& c, s4 R
break;
5 s/ w5 o" B q2 z6 H7 L! Y. M
}
" Y0 P4 _; k. o) _& x
alert( text+result );
8 m: e9 n6 g0 e) V4 n
}2 d6 k6 y$ P; k( `
// 创建扫描控件! d- m# N6 p3 e: M3 [8 l
function startRecognize() {
- p9 [ ]5 q7 B' w5 M% S9 [
scan = new plus.barcode.Barcode('bcid');
V$ Z% g4 X5 w! [6 u
scan.onmarked = onmarked; 6 X0 ?; F% o# p; e
}
4 x* f( K' F, G5 I6 ]5 {
// 开始扫描
7 s& ]2 `0 P' J" L
document.getElementById("startScan").addEventListener('tap',function(){5 e- l3 F5 S. a8 X
startRecognize();4 X5 t) v: m: H. Y5 R
scan.start();2 p2 d4 o" D9 l9 a9 M
})
1 K% h% ~9 Y; i* j1 |
// 取消扫描2 C* N% x* u9 ?4 x9 o
document.getElementById("cancelScan").addEventListener('tap',function(){
- A l1 ]5 R2 D1 B
startRecognize();
2 ]! c7 t- T6 f& X
scan.cancel();
1 h9 s/ L0 j& {. W; e. Z0 `& t
}) G& V+ W% G* D: {" y) ~. u3 j
// 开启和关闭闪光灯' R0 R" J$ K5 z* S. f
document.getElementById("setFlash").addEventListener('tap',function(){9 v0 i1 d; f: J: P
startRecognize();
3 {% c6 K7 p' w' w* o3 y8 L
isOpen = !isOpen;5 C( R% @% @# o" c& d. q+ q; |; {! A' a7 y
if(isOpen){( [5 N+ }' v3 k' T _1 l5 b
scan.setFlash(true);
# S; t& ], h8 `6 d( ~
}else{
, f" M9 ]: E9 z t, y9 G
scan.setFlash(false);
" Y8 R+ I9 B6 f6 k$ E* n8 z
}+ Q7 g# v) B0 c0 N; V2 f3 D+ I
})# F( k; t y4 b
</script>. M* \2 k S* ]# z9 a& ~ F

复制代码

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

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

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