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 >
+ I% b1 D. ^" a6 E% n
<header class="mui-bar mui-bar-nav white">
* d- O1 [( B/ @" p2 W. \: K# K
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>2 K. v& R- C2 r' n2 Z1 T
<h1 class="mui-title">二维码扫描</h1>' b: y3 D6 L$ h; t g* E8 o( w" e* d5 O
</header>
, z, S2 f7 L3 x
<div class="mui-content">
0 B7 W7 E5 h m$ @( g9 {+ \) d
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>4 L0 q$ p; R p" i# c8 M L
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
9 a( X8 r/ e! \! h3 i
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
& J A4 Y; T9 b4 w/ G* z2 w
<div id= "bcid"></div>$ @) a$ \+ c2 J; S# m
</div>
4 W" {8 x; C# T v0 H
</body>) q e2 V/ f0 h3 Q G
<script>- T) B* X8 m$ }' S3 W
mui.init({
1 o% |5 Q4 K. X/ x" f- |7 }
swipeBack:true //启用右滑关闭功能9 [2 R2 M/ \; f( f! D
});5 d5 a' ?$ a& k) [: @' C
var scan = null;
1 z# T0 c2 H6 m
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 `3 K" T* u' i
// 条码识别成功事件0 a0 T0 A% G! t9 H4 b! S& y
function onmarked( type, result ) {
( H0 Y2 Z: g9 s% v/ p
var text = '未知: '; _$ Y+ z" C# P) h& S$ x+ g$ k
switch(type){
& M4 l, |1 U" U0 @
case plus.barcode.QR:
4 {; Z- ~- L1 F( h5 N% U
text = 'QR: '; // 二维码
2 q) r, `) {% `0 u+ O1 H& a8 d. |8 q
break;
5 y# W& D; u( |) u. K' F+ i
case plus.barcode.EAN13:
& e& L$ m* s, S# I
text = 'EAN13: ';
* K: n4 ^. ]" i
break;. V5 ~/ V# W ^1 V# J# ^
case plus.barcode.EAN8:# G2 |5 P- h6 J9 D* F
text = 'EAN8: ';% f$ a) U" S, v1 H
break;
9 x. G% k; H% `
}& \6 Z- X- o# e+ X6 _/ a- e2 `! ?
alert( text+result );1 P7 G8 R- z3 J" _& F
}! Q' t- ?! `# P
// 创建扫描控件
3 ~& @% i$ L# M4 d
function startRecognize() {$ m6 P: Q# G; P8 T1 J' M. E7 t0 ~2 J
scan = new plus.barcode.Barcode('bcid'); o6 o8 g( S4 V! m. L; |% d
scan.onmarked = onmarked;
$ ^2 L% m' G2 m0 v
}
" w) B+ H4 @! P: n7 a/ l8 g
// 开始扫描
3 i! F9 _8 ?3 Z' z! ^
document.getElementById("startScan").addEventListener('tap',function(){
+ z( {# W8 J3 A. g3 X
startRecognize();
3 H* O0 R: r* g9 |& |
scan.start();+ H. F# w, B$ c% K* R6 V" l
})
1 G. i* F5 \: I" X$ F# H
// 取消扫描5 _, g* [. p- k7 W
document.getElementById("cancelScan").addEventListener('tap',function(){4 Y, C* Q1 O! S; h8 j4 F& U
startRecognize();1 M% S" ^1 @; k
scan.cancel();- v8 Q* j3 f7 h
}) }8 z! ~+ {) N3 Y, d8 g
// 开启和关闭闪光灯
~! ~; w. m9 y' b
document.getElementById("setFlash").addEventListener('tap',function(){# b4 t: B$ L5 b
startRecognize();
6 S l, A9 A8 H% D; `+ v, K
isOpen = !isOpen;
/ L1 c6 p6 \4 w* b0 ^7 Q; E
if(isOpen){
0 d1 a* R6 u. g0 z: F
scan.setFlash(true);
& t* c# I0 w& x( x; q9 V
}else{
; V9 }, a$ O- ?1 y" H
scan.setFlash(false);
% u( O" I% Z$ k2 ]/ F5 q5 B
}3 y( J0 n6 u* V. U# ?! M2 N' y
})
# e& n3 J4 |# v1 p# }8 k! D
</script>
. J9 }, H- v3 i3 z* v

复制代码

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

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

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

浏览过的版块