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 >& A' m: ^- k5 o+ E. v
<header class="mui-bar mui-bar-nav white"> H' L5 P) {( e) u0 } ^( n
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>+ {0 A ~. p/ m
<h1 class="mui-title">二维码扫描</h1>; Z1 n; W" f# Y( I3 u" l: N
</header>
7 a2 S5 A& \( X# d& @" J9 t( N* n
<div class="mui-content">8 _8 `2 w7 B* Q Q2 j8 W% A+ _
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>2 b( ] T( F/ \0 s
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
2 M: B+ E7 \# |/ j
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>* n$ Y) |6 K/ S8 K W
<div id= "bcid"></div>9 _ i$ u1 x8 C8 t
</div>/ _8 q! ~9 G0 f& v0 O# c1 q1 }
</body>
8 U( a' }0 k) o J: q r- J
<script>
9 N% V9 X6 n) _3 C
mui.init({
# C+ a1 |5 d1 [: z5 @2 Z' y
swipeBack:true //启用右滑关闭功能/ [1 D! ~6 f1 f0 T+ y2 P
});' c4 h$ X3 `) t
var scan = null;. z: F9 Q+ |1 K! e
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭4 |0 V a# w/ {, n
// 条码识别成功事件" e. z" W# T1 e" X" g) _8 y4 j
function onmarked( type, result ) {
* {2 l2 m$ y+ {& b
var text = '未知: ';
3 A/ h6 @' w6 n+ {
switch(type){
! C0 u3 t3 ?' H. ~
case plus.barcode.QR:5 Q9 Z9 B; |, S2 p( T) T
text = 'QR: '; // 二维码
$ ?8 L& A% b9 z# M' _
break;
1 X3 }5 j4 ?4 b i8 B* |
case plus.barcode.EAN13:
/ J* t2 P3 r0 P1 |3 |
text = 'EAN13: ';
3 p' d! m% I- U# O( i# x
break;
5 `- ~0 M+ D- Z; j( P% h
case plus.barcode.EAN8:
9 O7 W# F) C" J5 [/ S8 u
text = 'EAN8: ';
6 C: J9 o. [/ q9 m/ M2 g
break;
, s$ X& D% y# O
}0 O+ g/ ?+ C F3 c7 R1 o" x
alert( text+result );
) R4 F1 W5 }3 U) k }
}
9 e5 a4 A c0 w
// 创建扫描控件
2 k: L+ k$ `. b
function startRecognize() {1 h. E1 s8 H7 l! ^, g9 F
scan = new plus.barcode.Barcode('bcid');
! T5 F+ C$ z. e% u1 ]( Q
scan.onmarked = onmarked; ( `7 ?) @& p& J3 X+ u. Q
}
+ `7 N1 ~2 d; m; J+ J+ p
// 开始扫描
8 s9 E5 n+ b X
document.getElementById("startScan").addEventListener('tap',function(){
4 w4 n& F' C: ]3 [
startRecognize();
" \/ v% b; F/ Z8 j* x' c! O5 S* a
scan.start();) P- H! {$ E4 `
})$ Z$ l& o5 I" P, L* |
// 取消扫描
9 l% I5 s$ Z9 g1 e* L
document.getElementById("cancelScan").addEventListener('tap',function(){' l2 P3 Q0 B% Q) M0 _& [4 }; Y9 [0 J
startRecognize();
- g$ Z/ g2 l2 V2 a# F- x1 ?
scan.cancel();
1 i0 H0 \; U* d: W
})
0 c. x, y- [& V. }7 Q5 e
// 开启和关闭闪光灯8 s% D; ~" K# C' n$ G
document.getElementById("setFlash").addEventListener('tap',function(){. C7 g. i8 R" q
startRecognize();
9 ]2 Y. s- P+ V
isOpen = !isOpen;( r# V# F+ N- i6 B, L/ }
if(isOpen){4 s0 b6 a- I7 g) r/ [; Z0 ]
scan.setFlash(true);) P% f! I7 A; _, k! p4 Y
}else{
R0 R( O$ S( E5 N Y# g `
scan.setFlash(false);/ i; X Z4 Q( x$ h
}
$ f/ c2 g) F! K" B
})2 m* ~# Q: o- Y9 Z# S9 {/ K9 ]
</script>/ ]0 }. w1 v! L, Z9 ~9 g

复制代码

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

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

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

浏览过的版块