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 >) y0 O: |9 v/ E# I& t$ Q* J$ Y7 r
<header class="mui-bar mui-bar-nav white">; Z5 @# ^, Q, c
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>6 F& s# x1 ~8 ^' ~ F, W+ s/ C6 a
<h1 class="mui-title">二维码扫描</h1>
) ` }% U# a6 @3 s
</header>
9 j9 i5 D: ~" L2 W' t# P3 f
<div class="mui-content">% s- r8 U* a) ~9 ?+ n1 l
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 s. w Z5 Y3 t; y* J8 ?. d* P
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
. X- X q6 v$ L1 s& _/ a
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
! j! P# @6 Y6 A. U1 k P( j
<div id= "bcid"></div>. v% G9 `. U3 X
</div># [+ k; i1 w( F* ]
</body>
N: T7 ?6 P8 ^' j
<script> A+ X6 G7 ^5 K
mui.init({
2 x+ F/ G) H6 `7 y: T/ L; H' A, t
swipeBack:true //启用右滑关闭功能; Y. J1 U, `& m) e& i
});. Y/ s4 e2 {7 x: Y# n1 Z9 n% {: O& i
var scan = null; y# ]/ W% Z0 h$ @" e, |7 r3 l3 R# h& J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
' f; U6 d {" s) t4 J: ]4 R: x9 b" P
// 条码识别成功事件# g5 m& M; [7 `/ P- G4 F
function onmarked( type, result ) { n0 _9 P5 r: \; d: U) @0 ~6 g
var text = '未知: ';
- D" ~5 N/ F# V( t8 w5 e6 b1 \% T
switch(type){ _ `! ~4 K3 ~; w9 f1 Q' H6 m
case plus.barcode.QR:. e6 }: _( s$ O4 C
text = 'QR: '; // 二维码$ d9 ]5 Q8 d9 d* u
break;; P. Q9 [& m. O
case plus.barcode.EAN13:$ G g0 V+ p/ G
text = 'EAN13: ';
D1 u# _* t6 G+ ~( D
break;+ R( J! Z, a3 L- X5 M1 `0 W7 n: @" h) ]
case plus.barcode.EAN8:
6 R2 q" L' R4 c# b
text = 'EAN8: ';
' o9 b3 x* Y. k* \; u
break;
0 H( T6 a5 I w
}
5 T. |5 H; y' t8 `3 j
alert( text+result );6 [. A" j9 Z9 j9 Z' T4 b, Y* d
}
$ F: w" n6 e( a7 H0 V. {! Z* R) w
// 创建扫描控件
5 Z, S9 g1 z" ~- d" k
function startRecognize() {: g: F! d6 c1 Q
scan = new plus.barcode.Barcode('bcid');6 J* Q( Y4 r X) `
scan.onmarked = onmarked; # b Q5 T2 b/ m7 ~: q
}
- {2 ^* B( Z) T% u- w
// 开始扫描
6 R' a/ h0 B; B' W; P
document.getElementById("startScan").addEventListener('tap',function(){3 i7 w6 l; E7 s
startRecognize();
% i6 m6 a; ~# k6 F4 M- M1 @
scan.start();# F) _* p1 ^1 _$ j/ t, V) h- V
})
4 m; [& ], k. P5 F8 j
// 取消扫描
; [" F8 K( T7 i* _; u) D
document.getElementById("cancelScan").addEventListener('tap',function(){0 p: ^2 _8 U J! X% k
startRecognize();
4 U9 H3 n/ L3 A N' u( A, L
scan.cancel();
* \3 Q$ u& ], B$ p0 M
})
* `1 u& W) ^# F6 K, J2 f7 [
// 开启和关闭闪光灯
) J7 m, V& v' P, Q, k: }
document.getElementById("setFlash").addEventListener('tap',function(){
* l3 P1 f L9 a+ A$ @8 `+ g& \& w
startRecognize();
+ {- g1 r& Y% Y- e" K: g
isOpen = !isOpen;
. V5 r# [) i5 f2 y' y' ?, O
if(isOpen){
& B6 i. n) r* X( s( n# Y+ u; u
scan.setFlash(true);& c5 C8 B7 t+ [6 [3 D
}else{% d1 i- |" h$ e; R& I' y
scan.setFlash(false);$ k7 H6 V8 H) j' I
}! t& T" {$ N5 q
})( Z* O1 i4 G0 L; ~0 j$ E' N+ p
</script>
/ B @1 \! E2 B: E9 g# Y1 E

复制代码

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

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

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