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) f: f& E4 m/ ~7 ~! H
<header class="mui-bar mui-bar-nav white">
/ `3 h, t" z0 f. \) ?" z
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
6 X5 V& n. z& M }
<h1 class="mui-title">二维码扫描</h1>" t4 o9 x7 L% `+ ?0 L
</header># N0 N9 ]% E: i0 B% M
<div class="mui-content">' _3 e5 t, f$ Y% U& ?! v! q9 E
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
: `! a: j! B: ]+ j1 r, x) A, ?
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
* z: U1 g1 u: N: @! d' j, g
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>7 c, ]6 O6 j% r5 e8 a
<div id= "bcid"></div>5 @6 Q5 G6 w- f+ b8 \2 a/ K: L
</div>* Y# _0 Z5 Y H' {0 S6 ~ m
</body>7 O) F$ h6 c' l
<script>6 r% z5 d( m' M% ?+ ^
mui.init({
* x" k. O5 Q! ?. B
swipeBack:true //启用右滑关闭功能9 M G- T8 O# s J
});0 g% U0 k: J* ^
var scan = null;
* F% T/ k: w, h: e3 K! ]7 \
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭8 s& }) k K) m; A2 P" y
// 条码识别成功事件% i* K$ M. I* I
function onmarked( type, result ) {
, n; _ ~! A6 f- d8 y7 j* @( l; F
var text = '未知: ';
8 E, K6 Q3 j4 b! @' J o8 O' J
switch(type){
' @4 A1 [8 V0 D" p) Y; Y7 f
case plus.barcode.QR:) `& d* e+ N$ N) }; {; ]* W
text = 'QR: '; // 二维码
" a5 P4 L' \2 J$ a
break;8 R! ?3 J8 d$ U d. }
case plus.barcode.EAN13:2 H9 U: \$ k4 M. \# @. C" h
text = 'EAN13: ';/ t/ @7 f" x& Y6 s) W; E% Q
break;
4 s5 ?0 ^% D. } ~
case plus.barcode.EAN8:5 a, u' K9 m' \) K. p
text = 'EAN8: ';) _% D$ }) k+ h6 b5 E9 I1 D7 c0 l
break;& ^: t: a( ~, u- D
}9 m- |$ i! }0 y6 v k
alert( text+result );6 U7 e- V$ U- J5 J2 ^( O
}
4 \( r: n9 P, w4 Z% R
// 创建扫描控件8 Q5 F$ I# x8 X4 s: I
function startRecognize() {
: C" N& t; @$ L2 r7 B( d/ U' b
scan = new plus.barcode.Barcode('bcid');% W: t, ^( @. ^0 t [, k; Q0 l7 ]
scan.onmarked = onmarked;
% W$ `4 H! e& Y; k. G' t& u
}1 a+ Q5 }; I& H, k; _
// 开始扫描
8 }3 b* E( }/ ?. g1 r
document.getElementById("startScan").addEventListener('tap',function(){& I- n- M- t/ Q# Z
startRecognize();
8 n2 k6 j9 X) e% M; d
scan.start();
0 B$ ~/ r* \/ b1 a- g1 Q2 Y0 E
})9 q- c6 a; e/ U! e9 R6 i( v. Y! P: y0 A. Y
// 取消扫描. k. {8 w7 |+ @
document.getElementById("cancelScan").addEventListener('tap',function(){8 s- U; u2 ^* W8 ]& U" p# m
startRecognize();, E* r7 W0 ?5 V# S l, m
scan.cancel(); j |) S% @7 t; y/ Z2 v5 q! {
})
) l# O/ Q ]1 ]* G# G
// 开启和关闭闪光灯; X; h& Y- G/ D o9 c# p2 z
document.getElementById("setFlash").addEventListener('tap',function(){
$ x4 Q: M- F Q3 `' q7 ]
startRecognize();
" ~3 c' b8 B2 G( k5 Z( M- `
isOpen = !isOpen;$ H* ]- V0 H. c0 W
if(isOpen){
* }: z) L$ f D9 b0 j; E
scan.setFlash(true);
& Z% v: F$ F, |2 j6 S
}else{* Z1 n! R- }! D6 A$ f. Y' g0 K
scan.setFlash(false);
, @# I) F7 U6 t) L' f1 F! q1 o$ s
}" m3 X8 p$ k6 x& w2 \/ P
})
T' h& }3 q: L4 ^9 }
</script>
! }8 A$ [5 h: o1 z

复制代码

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

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

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