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 u- @, l+ a( g
<header class="mui-bar mui-bar-nav white">7 l4 a5 M' b1 g$ b t) a# j
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>3 j$ X* s, o$ Z3 c+ ?
<h1 class="mui-title">二维码扫描</h1>' n& `: ]! Y/ r* c2 L
</header>& y" B D# h6 [: h
<div class="mui-content">
1 f% D* C" g+ D8 k4 l, i
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
! m% j9 _0 L) D2 W) P5 a8 }8 ?
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>% \* s6 w7 T/ q
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>, ^1 g% p; [. e* `7 }
<div id= "bcid"></div>4 z/ B- m2 t+ G" |9 l5 H
</div>
8 q% O$ T- @& j! n
</body>3 _) s ]7 F. [; i" P4 J& o7 L
<script>
2 i: B+ C2 L% G! E
mui.init({% S! j6 o2 Q+ m
swipeBack:true //启用右滑关闭功能: P. l& z7 q$ u
});
) M k X6 [2 K: c$ a
var scan = null;6 j+ \2 T; M: ~& E
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
3 t3 O) |- v z1 y1 D5 o2 k4 F
// 条码识别成功事件
$ s7 R, m( w6 y- Q
function onmarked( type, result ) {
# g7 S: j L- m
var text = '未知: ';
. K( X2 d% p4 v7 p ~% t
switch(type){
3 J6 r$ k! ?8 U8 g$ c0 B
case plus.barcode.QR:4 B$ U& h! `: r+ ^0 ]) I
text = 'QR: '; // 二维码8 P; N4 l: v" g2 M
break;( [% ?) w2 |7 t. \2 W# \0 o' k
case plus.barcode.EAN13:
+ W% Z2 ~# b( g8 K: F# C& m" x
text = 'EAN13: ';# A5 F$ r& o" r0 ]
break;2 t' l* Z- O- ?0 Y# b
case plus.barcode.EAN8:
2 c, j/ A* U0 G/ X$ g7 ^
text = 'EAN8: ';
( Z( {: }0 C; n$ d1 w$ C Z" m
break;; i4 `3 S4 P0 f9 A* N. t. E) |5 Z
}
5 X+ G I0 c6 {& K" U: r
alert( text+result );
% B! A+ x) t5 m" l( i$ T# Q6 \" |) C
}
4 N" y2 H' o9 @/ X2 X; M" H
// 创建扫描控件
( W1 b/ F% ^: G% I3 K# x
function startRecognize() {0 }/ A. B* l0 Q) {# J6 M, u2 q
scan = new plus.barcode.Barcode('bcid');% |$ _1 K: i* {: e
scan.onmarked = onmarked;
2 ~3 {% _$ ?+ N% W. J9 L
}. c+ t8 \2 k {* y: n7 w8 N2 |
// 开始扫描. b7 ~5 f- h* d* v% ]
document.getElementById("startScan").addEventListener('tap',function(){ D! I0 p- ~0 Q! I6 j& B
startRecognize();
6 v3 g) V, e b$ C6 }
scan.start();
9 F! {$ T3 P: c- ?+ L
})
. B. h" r% W- z5 Q! E8 n4 T) ]9 c
// 取消扫描
7 s8 ^% W7 E( L) W S4 N
document.getElementById("cancelScan").addEventListener('tap',function(){: I- I/ I$ E$ L* t
startRecognize();
, n. ]& x4 o5 O, |+ i
scan.cancel();
2 \, j3 O4 ^+ K
})
& d3 x* s4 n( s) s X; B
// 开启和关闭闪光灯
( O* |# r, p7 j1 z
document.getElementById("setFlash").addEventListener('tap',function(){
3 ^' B" ?7 }1 U& W; T
startRecognize();
$ g" L5 R, N( X: }4 f
isOpen = !isOpen;
& d$ @7 D/ _4 G
if(isOpen){
( F" Z( T; q b8 z O
scan.setFlash(true);* q! u, B7 m- ?) R
}else{
1 y1 x4 l: j$ d( O
scan.setFlash(false);# B$ z3 z3 g! `- S* w: t% Z, L
}2 u/ O5 V0 V$ {. |: B/ A0 t
})( m& r8 n) j5 E' d3 x8 I& N2 ~
</script>4 b& B. \ S8 U. o6 }5 H

复制代码

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

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

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