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 >
7 j; r* L% {* X" C2 }* K+ p
<header class="mui-bar mui-bar-nav white">
5 k7 t- r. d7 }+ i9 c
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
; \8 s9 g ^: O8 I/ A
<h1 class="mui-title">二维码扫描</h1>
( k! a: L4 N4 r% f! j
</header>
' ~+ R- _9 F6 L% ?
<div class="mui-content">$ M M+ ~) I: Z; \* g
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>. C: z6 a% F9 h$ P
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>5 k0 \( C: y5 r/ W- f ?( R
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
4 G* M) Q/ m: H+ R9 T2 L- j
<div id= "bcid"></div> }9 t" w+ G$ e; z% W7 e( o! Y
</div>
! ]; G6 b; N; z; z. |
</body># ]$ ]: @- Y6 H; s* L
<script>( L( y3 ^7 h; O. V/ {
mui.init({
+ k/ U/ o2 g, S+ f _( L
swipeBack:true //启用右滑关闭功能
2 r1 P! d1 M' }8 |$ \
});
3 Z: g& x7 N1 o8 ?! {+ |
var scan = null;
/ V- j4 j$ ^. h+ W# J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭; n# J5 P6 g$ ^1 I, u, S E: y9 t% H' f
// 条码识别成功事件8 j) W) }" X' k: F) ?
function onmarked( type, result ) {
5 V% U. Y6 A( I7 @+ C5 [
var text = '未知: ';( B- v; k- I. X$ B- k7 A5 ^
switch(type){$ a! T. a+ ]1 X/ e3 E, q
case plus.barcode.QR:
) Z$ D, }% `7 b3 h4 _& K$ T
text = 'QR: '; // 二维码
/ y( R- {6 q! x, F! r
break;
* {/ W/ i- V4 f/ m U8 ^" [
case plus.barcode.EAN13:1 M1 i0 ^" d; X6 H
text = 'EAN13: ';
- j. ^, a8 q( u: p) Z
break;/ F8 x5 Y. q+ ]6 G
case plus.barcode.EAN8:6 D- Z5 ~; ]0 d
text = 'EAN8: ';
. h; a4 r1 ?. e, D
break;7 _; `% a! Q8 T" F- d: w, [: w
}
9 d% f. n6 v( q7 \0 F0 Y
alert( text+result );
8 h$ X2 @% y) Z' [4 ^# P
}
7 t+ p) f# A' K5 w, t& f$ i6 _
// 创建扫描控件
0 W6 J0 l# }/ A: `
function startRecognize() {9 u# c/ w0 {7 n6 ~
scan = new plus.barcode.Barcode('bcid');
) f) {+ g+ j5 r1 b: ]0 Y$ x
scan.onmarked = onmarked; & i5 I/ n* T3 Y& c
}2 k2 Y0 ?# p* i
// 开始扫描5 h/ D) P/ e2 o% x3 F9 N- t
document.getElementById("startScan").addEventListener('tap',function(){9 N2 A& i% |. @% z9 k; r( `* I
startRecognize();' i! [ F8 h0 n7 W$ s, r. V
scan.start();! m3 J$ |- P, ]& A. i
})2 h: z, {3 j/ E# U
// 取消扫描) X& i. t2 {2 r8 [
document.getElementById("cancelScan").addEventListener('tap',function(){
* \- }; z5 q+ O/ p$ o# h; [
startRecognize();. }; N* N+ I; |% {0 P
scan.cancel();
" z q q3 b! p; X. }1 R
})/ s! c' a7 |! V: w y
// 开启和关闭闪光灯
4 A- Q/ @8 F! e: s: l% c
document.getElementById("setFlash").addEventListener('tap',function(){; u2 \0 h# X! F% m q: t
startRecognize();+ Z3 p$ H4 N4 U/ Z" B: J
isOpen = !isOpen;
8 z0 w3 n6 c2 l+ G- i: k# z
if(isOpen){$ j& G) @' v& Z. X
scan.setFlash(true);
: z: U; j: I( A. m
}else{# F ?+ ]' q; k" K/ T
scan.setFlash(false);
: B. m2 j. `- F$ y' o- J2 [7 m& t
}5 k" X- h7 f! i6 Q2 O! @) N
})
+ C7 v8 j' v8 i: }9 d
</script>
4 J) ?+ v5 A* y; ]) x o

复制代码

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

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

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