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 >% H: O% C% z2 k/ b' _
<header class="mui-bar mui-bar-nav white">
+ H, D9 P: v' w4 S8 U% M
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>" w+ j% I9 Y0 b% S h' G' i/ ]
<h1 class="mui-title">二维码扫描</h1>
. s' D% V/ c0 f, H) d# @& S. ?, Q& D
</header>: n; h9 P- @# Q+ c
<div class="mui-content">
3 I( L; p( u$ e$ R. T
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
c u1 p* i9 I) s7 o m) a
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>% H( ?3 `1 i' I: o2 x) @
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>, b1 H( ]! t* w7 e: P
<div id= "bcid"></div>
# N4 _7 b7 o% R. m5 R4 d1 G) F
</div>; r3 l' b2 i S$ U Y2 C2 D9 T
</body>$ i# v4 ?/ B7 j$ `; }: a+ M
<script>
$ A7 }+ ?/ M* h0 g) w: a' q
mui.init({
" e3 z5 D( V. h/ f
swipeBack:true //启用右滑关闭功能
8 ^* h* f: j) t& ~% U# j1 e
});
( P7 N! t+ w9 T
var scan = null;
5 @. o l2 t& y/ @) v- j
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
5 V1 V, K' X" S6 C8 _
// 条码识别成功事件; d* Z& V3 X5 f+ q- d
function onmarked( type, result ) {
! o n" C) X3 J+ @/ }9 ~+ B+ b
var text = '未知: ';; J8 p7 ^: W0 y7 |0 [
switch(type){' c9 _9 c: V" e! m1 `
case plus.barcode.QR:0 z2 z$ }1 a) V. e
text = 'QR: '; // 二维码
7 z- E8 z6 }# M- q; X
break;+ v" B# s: m ]0 S* f/ T
case plus.barcode.EAN13:
0 [+ M8 Y- C, U2 F" {
text = 'EAN13: ';
, W& q( z5 j7 w1 e- `4 B
break;! k; B4 V! O1 ]
case plus.barcode.EAN8:
# ~8 s& H, C% z' Y9 Z
text = 'EAN8: ';' c1 l5 d" A) U. T
break;
/ k1 O8 x5 H8 f" i f8 V
}& b7 ?- c8 r7 T" y
alert( text+result );" K/ O7 Z' U; O9 m1 m+ H# k6 }9 L
}
# z% p# U8 I7 n, F c' P
// 创建扫描控件
3 q$ j( Q) d" l; A4 H
function startRecognize() {/ }0 J, d; A- c% f
scan = new plus.barcode.Barcode('bcid');
. D( \/ l. y5 X& c s- f
scan.onmarked = onmarked; 8 D( l; j# |. b; O- b
}
* \ v! c! ]' Z1 j8 x
// 开始扫描
0 h# Q$ o- l( M% E- J# K
document.getElementById("startScan").addEventListener('tap',function(){
, }# O0 Y! S0 m7 \- T: z
startRecognize();
' I0 p4 W0 r+ u; t0 C
scan.start();
* M' G( E2 C5 P
})
( [6 R7 D$ }7 A1 w# @% s9 Z6 q
// 取消扫描
2 }- D1 ]4 |, {& Q0 d6 F
document.getElementById("cancelScan").addEventListener('tap',function(){
7 S! D& }7 S, O; u8 b- j8 u& q
startRecognize();- J5 ~0 c- v8 R/ K1 D, i2 H
scan.cancel();
3 `7 ~$ Z2 }9 U6 }1 |: O; `
})
! P% k- I; l9 u6 E) Y/ `( S
// 开启和关闭闪光灯
* `4 `5 f3 B: b
document.getElementById("setFlash").addEventListener('tap',function(){
/ a* J0 M. \# g) t7 @8 d
startRecognize();
2 }& K5 W- z3 O1 R e. i
isOpen = !isOpen;
* G! `' y1 C3 T2 ?
if(isOpen){
! Y% `* v7 |# u8 r0 T
scan.setFlash(true);
% o9 ]# i3 O! }
}else{
+ m b) U2 t; Q" B0 M
scan.setFlash(false);8 V3 Z7 W5 v' l5 t! _# @7 @
}
* P3 ?5 q9 \6 ?8 o6 V$ y9 ]
})7 V" R$ S' f( b, O/ {
</script>2 G+ y* K: B* `; f& b

复制代码

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

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

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

浏览过的版块