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 >' m/ q2 b, e0 V
<header class="mui-bar mui-bar-nav white">& g. _7 Q" M& W, P0 l6 H P
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>/ [5 e# E$ l. u; t* ? k/ E1 \
<h1 class="mui-title">二维码扫描</h1>5 d. x9 g3 C, }) F- P% ^
</header>
5 M/ }7 Z# I1 p5 F2 `
<div class="mui-content">
) W W1 ~" i% J( M6 o" u j
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>* |& k. V# U8 A' w6 a% d! \% \0 p
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
. k0 p0 ^: z1 t8 F$ x' m; d
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
3 G: L7 B5 [2 M' |# g; _) U2 j; Z* |
<div id= "bcid"></div>
2 Y, p, n6 L$ |
</div>7 V7 r# p9 A7 {% y# T& k' H6 {! B
</body>9 X. O- I! Q; q* l; m0 v
<script>- x2 U/ B0 {/ [& V1 r# h
mui.init({. U4 C' c9 _; p. g' ~, x }3 j
swipeBack:true //启用右滑关闭功能 U) l4 d# C9 I3 _
});
6 r4 V8 A0 D* {' M1 W! J, Q& ]
var scan = null;
1 h3 b+ v( m5 F" _. q% E% [3 M
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭1 y9 o3 F1 K- A" W. L
// 条码识别成功事件
M* n) p% G; n8 x3 q0 k
function onmarked( type, result ) {
% I/ B+ a" ~, Z1 d8 t8 w7 h
var text = '未知: ';0 E2 B7 H* K9 n" `7 x' n! @
switch(type){
/ |0 R6 z/ @0 [- E9 }4 Q$ ]! E
case plus.barcode.QR:1 K* M0 W! k0 a* L$ s2 I
text = 'QR: '; // 二维码
6 H* N& Z- x8 F5 i
break;8 n8 Z- H' F* B3 }1 o8 Y. t
case plus.barcode.EAN13:
- a' T5 H* u& U2 C
text = 'EAN13: ';8 l, e! `* w+ ~4 K) Q' n! ?$ U& v
break;
1 C+ C$ i! }4 c
case plus.barcode.EAN8:7 r+ v7 w8 O, \ f& _* n2 I6 x5 ?: u) s
text = 'EAN8: ';% }0 f' P( A! n4 s% S' W) o! e5 b
break;1 g! T9 C" O) M9 z8 t& h" y
}4 W4 ~1 V l) Z
alert( text+result );2 G( I7 E/ p3 m" m' Z
}
5 }( w1 i% h; n. w' o2 I
// 创建扫描控件
4 H% c2 |8 k* u; n* R2 I
function startRecognize() {9 f* t' V& }3 k1 r8 ^- a
scan = new plus.barcode.Barcode('bcid');
& x# f* W. i* P) u/ n
scan.onmarked = onmarked;
2 j) j; L- t* z N9 p; I( B9 V
}
! Q, Y" k$ g, a8 I, L% w; B9 ~
// 开始扫描3 ^8 P0 c- M: K4 Q" q* p9 ?1 N
document.getElementById("startScan").addEventListener('tap',function(){3 w" F5 D% t% A) P# r
startRecognize();
& ?1 ?4 d& W1 y+ l# M
scan.start();, A5 F: k2 D. ]* v% g) q
})
' F" o' M' _2 M5 f, n
// 取消扫描- Y8 E; o- J- f* U' z4 \$ _0 D% r& T
document.getElementById("cancelScan").addEventListener('tap',function(){
9 i8 A. y$ y @# y: h
startRecognize();
+ m- t- @1 Y8 W: x* v
scan.cancel();
{/ q' z: b8 O
})
' T4 n; A8 _& M( }7 f! \+ f: n
// 开启和关闭闪光灯
8 N* o' ]: P6 @5 Q2 u/ @
document.getElementById("setFlash").addEventListener('tap',function(){+ a& G0 X6 j- K s
startRecognize();4 } V5 j# s: I" ~, t: @
isOpen = !isOpen;% s8 v C0 M+ O
if(isOpen){4 a7 l) ^6 p4 G3 \3 o# {
scan.setFlash(true);
- t- ]0 h& |# V; h" N w4 h! }
}else{
: O. h7 r6 Q' t( F; o- r, K8 g
scan.setFlash(false);
' e6 @: E: [: Z( g3 H0 F
}3 q* Z( E) `% V
})" O9 O9 N z- F
</script>
9 Z9 ]0 J. w/ x8 J" Z* b( ^

复制代码

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

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

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