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 >
+ `! L' B: l# L! }; W3 F9 L
<header class="mui-bar mui-bar-nav white">
* Q/ |, l3 _6 Q; e
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
8 i, m; j0 O) { h! M H+ [
<h1 class="mui-title">二维码扫描</h1>* b9 p& i) A5 e
</header>
6 i3 Q `$ B. _( j
<div class="mui-content">- t, G/ {, v r5 G2 @ r+ U8 L2 Q
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
: Z. b4 H) T! u% N) e
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>0 V9 q$ _/ C! J# G$ }! @
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>: \, h3 Q' `% j" H* n, Y: J, T
<div id= "bcid"></div>
# ^; H# ] r/ }/ r, v) e
</div>; s4 T$ h0 C6 ^+ H/ k" ^" h1 `
</body>
I# Y" T; n% s& J
<script># b2 S- C) e5 O! G* \
mui.init({
% N$ c5 t( K: `* Z' k9 m: ?# d% z
swipeBack:true //启用右滑关闭功能$ f1 n, x" R0 w# I% p" e3 A) H
});
E; G5 ^2 @! n) {* I. j
var scan = null;
; p; @7 I7 v5 m+ S
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭' D: O% O' i4 L- N% P
// 条码识别成功事件# {1 ~! v% Y; W5 F, }# Q: S2 v
function onmarked( type, result ) {
* d7 `6 q% S! d% {, g+ D, {- G
var text = '未知: ';. W# x9 I' t( r1 X
switch(type){9 z3 S; A1 X9 M- N& y
case plus.barcode.QR:
7 e5 q8 ?" y1 y2 ?
text = 'QR: '; // 二维码
; d( X6 g! m% ?. A6 e5 W$ |+ _
break;
4 H2 j/ `+ Z5 D0 l) E/ s- @
case plus.barcode.EAN13:
' M5 N: S$ u4 q3 q3 f/ i5 p
text = 'EAN13: ';
6 H- i# @+ m, ]
break;& s Y+ l% ^: w5 C S8 C
case plus.barcode.EAN8:0 t$ o t& l8 q/ u# B8 C7 r
text = 'EAN8: ';
. Z1 x" M! H+ J
break; P" | _$ v1 ~: N
}
& q( x, Q5 ]5 S2 @
alert( text+result );
8 Q' U; z7 I' W) Y& m) Q4 e/ s
}
( K9 A- f; x% P9 M2 W) g
// 创建扫描控件. V' F% o+ n+ Y V, T3 {
function startRecognize() {
" v( U e/ w/ Y8 Z. { q7 R2 h( `
scan = new plus.barcode.Barcode('bcid');+ ?/ h9 E/ V' s3 M: Y5 u3 w
scan.onmarked = onmarked; . e' u& M0 |+ b0 b- |- v7 N
}
4 q% t$ D3 P) A- V2 V
// 开始扫描
' G8 ]. P; x" z$ B g8 p
document.getElementById("startScan").addEventListener('tap',function(){/ r7 {& v* h6 Z$ [- i
startRecognize();, S3 D# T( g, f* Q2 B
scan.start();
& D& m9 C8 f1 k3 M
})
" t* P$ E5 m: d
// 取消扫描/ y6 E+ V8 v$ S6 m4 h
document.getElementById("cancelScan").addEventListener('tap',function(){
" o% Y4 D: ~7 [) x2 m! a$ i
startRecognize();
$ _! d3 S( c" X$ ~! g3 P" w
scan.cancel();
/ r- }% m$ ]( Z: S
})
6 b, w6 K( j1 N
// 开启和关闭闪光灯; @* U) N: L6 s8 j _' S
document.getElementById("setFlash").addEventListener('tap',function(){
2 f, ^, T. Q3 L0 a7 o2 `8 t
startRecognize();
1 E5 k5 Y' e% ~3 e+ _- y; L. k
isOpen = !isOpen;* }9 Q0 j' v. c" {9 @9 |! |9 e
if(isOpen){3 W/ c) w, X6 L2 ~
scan.setFlash(true);3 T$ S8 a8 h$ H. F3 }
}else{4 w, g1 A0 s( m0 L
scan.setFlash(false);
/ ]0 ]2 f l+ A: W/ ?1 v% d
}( F1 u& ~' u) `& a, M
})
5 j' D. S! y+ t6 k& J- ]
</script>
( \. ]( B- r) Z, s/ ~1 ^! A0 z

复制代码

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

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

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

浏览过的版块