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 >
5 Q- D [8 n" P' R! ]0 R
<header class="mui-bar mui-bar-nav white">
2 E2 m% O' V& b, b! u6 L3 J
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
3 z6 T8 T0 m; W; i7 j! @
<h1 class="mui-title">二维码扫描</h1>
& [( Z# E& q' X4 \
</header># C8 b0 y- c* l9 C* {4 E
<div class="mui-content">
. k, U* W5 V9 q. l( r
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
" k/ z5 q. B, U. V: e' b
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
1 O0 [" z0 z! {6 R0 M
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
8 M7 [$ J- C! w) c! k: c E3 e
<div id= "bcid"></div>8 k9 n$ T9 V9 r5 i! F
</div>
/ W! K, `" X! D# ]
</body>8 N' h6 ~5 i* s: @
<script># {- E9 O! O- Q+ {/ X
mui.init({$ W8 T: r* }1 l1 {0 D
swipeBack:true //启用右滑关闭功能4 O+ r; i9 {' I0 |! Q
});
! a4 S1 [$ D: J: L/ J, p8 i
var scan = null;. c4 y9 P$ x9 }& S: C3 V# z: ~
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
& E+ \4 J& Y _* L/ k( d4 |
// 条码识别成功事件( k4 R! X/ t0 i) x! Y& j
function onmarked( type, result ) {' g, O! f# C; C \7 _ ^# I( d
var text = '未知: ';
+ `1 h T% w+ o0 [+ P
switch(type){8 Z' h: R0 G; H, H3 \
case plus.barcode.QR:
2 f) p# o% t6 @9 P( m8 [) A& T9 S& Z
text = 'QR: '; // 二维码
* V+ W( H# C4 R- C: B
break;
. O- |; I7 H- H- g: o4 D0 A. H
case plus.barcode.EAN13:
, f# A5 s: a6 B; O6 |
text = 'EAN13: ';
1 _2 \. v- y/ R" _9 n& i
break;
7 b9 ]2 I3 j. A/ h1 p
case plus.barcode.EAN8:" O& U. }! x7 Y- G
text = 'EAN8: ';
% n: Q, i* B4 f8 a; Y" }
break;
1 r( w3 D7 R) C* g( R2 c) D2 v. [* T! C
}2 `, O! J6 H7 K0 V
alert( text+result );' u7 K# u8 D, z0 E
}$ e# q) P" _0 o( k, J; E& ~% w
// 创建扫描控件
8 X) [8 w1 u% N+ t9 c" q: O
function startRecognize() {0 \5 ^# m' n! J0 |
scan = new plus.barcode.Barcode('bcid');
# Y0 R1 x* B" r) e; E
scan.onmarked = onmarked;
$ u$ O+ V, s; h* [
}7 z- E6 J9 ]+ a5 a! m
// 开始扫描) v0 G9 u) k+ t( J
document.getElementById("startScan").addEventListener('tap',function(){ j5 A" e- J2 L4 r- l
startRecognize();2 D/ e. Q2 I9 O6 l
scan.start();9 ]; L, k$ @3 k% A! D% E# s$ o: K
})& `, ~* l7 C5 B; F- N( i; V
// 取消扫描0 |# |( }4 {, D2 B8 x7 y% K; o
document.getElementById("cancelScan").addEventListener('tap',function(){
9 N9 P/ s% I2 Y7 j, ~
startRecognize();$ K; v$ A. U4 l( V* T9 y
scan.cancel();
1 Z0 x8 c* y8 J$ `
})
8 ~% Z; i( w9 ?& s! d
// 开启和关闭闪光灯
8 e) c7 j4 ]: s* M |- R
document.getElementById("setFlash").addEventListener('tap',function(){
2 r! q% P1 Y; F- z% Y+ r" w
startRecognize();" @3 I; U4 S8 {: m& ]
isOpen = !isOpen;# o+ _- V1 W# j, z( t6 `
if(isOpen){
: _# P1 o+ ~& M" B% }' P
scan.setFlash(true);
" ~7 R; } A( V' O' E4 k7 ^
}else{. l3 W8 \1 s: a2 y6 O5 D
scan.setFlash(false);
0 q+ V2 v/ r) K1 |( B. W# {
}
" G6 A. z! i- V$ x- Y4 N# Z
})
6 o! P; x7 G+ T3 K7 j
</script>% U$ d( O7 p f

复制代码

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

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

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