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/ _4 i2 }4 Y8 B$ b
<header class="mui-bar mui-bar-nav white">
9 Y" [# C1 P: z! y# R
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>0 y E1 |" y; y
<h1 class="mui-title">二维码扫描</h1>: \( w! v+ E, i5 y& }
</header>, n& Q4 i4 G$ j7 P: r5 f7 P
<div class="mui-content">
0 H4 d# G7 h& o- {( ~5 u
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
/ x/ z0 R) t7 |
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>* ~+ `6 `, b5 ` W2 n! u
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
, H# E3 G$ _6 V% D7 B. y2 u
<div id= "bcid"></div>
2 e9 q0 \( ~5 o4 U* ^0 m
</div>
8 G. O. @6 }6 N& g
</body>
6 t, U4 B( M2 {' A# Q( ]
<script>+ f) R E& w! g9 u2 B) m% [+ `6 x2 A
mui.init({7 m& ~4 e3 w; q E/ J
swipeBack:true //启用右滑关闭功能
7 _" S9 K8 w; s4 L
});
, P- t" e4 t( a6 U4 k) Z' I
var scan = null;
6 c; c" v7 {, a7 t
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
; }" I: S* x+ P0 N ~3 y% c7 l
// 条码识别成功事件- D" x' a* ^" _7 X* B
function onmarked( type, result ) {! r, N/ G# E( U) A2 l
var text = '未知: ';9 H6 K( T) b5 u# {; A0 V
switch(type){
5 x8 `4 Y9 U4 e7 B
case plus.barcode.QR:
& a6 i/ E& W3 |
text = 'QR: '; // 二维码& f! H2 D7 Q& z/ D
break;
8 m" C+ \: ]3 u" ~9 G
case plus.barcode.EAN13:
1 p& i% c& ^% w$ @
text = 'EAN13: ';
3 `1 K( v- w- P) C
break;) r1 ^0 D7 m, s- B" z" I0 Y
case plus.barcode.EAN8:
7 E( [: ]* u6 J: A/ R% d
text = 'EAN8: ';
* v( n+ k/ |( T! y0 |( d
break;
% i6 U3 k# b1 `8 ~' h
}
+ J5 ?8 z. _- _+ E2 v* }% @
alert( text+result );
/ L: a1 \" p+ G4 D' G
}& Z1 {8 }) B& o' Y2 A
// 创建扫描控件3 f3 s. l! x8 W0 p1 R0 S* V9 v6 C
function startRecognize() {
% H) u- Y5 T, B& i( M* h+ t8 w
scan = new plus.barcode.Barcode('bcid');& u% o; w$ [9 o# C/ v# x6 h2 Y
scan.onmarked = onmarked;
, P1 i3 h! [- V
}: B3 y4 @2 o* ^2 }# @
// 开始扫描
* d+ R5 ]& s9 H0 m5 \' g9 }: s
document.getElementById("startScan").addEventListener('tap',function(){4 v( \2 A9 o% f9 E$ r
startRecognize();
5 M( A; q" B2 O7 F8 ~) ^$ W
scan.start();
# R0 h" h" }4 j
})4 ` d+ k* U2 S; \% A" Y
// 取消扫描 W- t: i- Z! v8 m
document.getElementById("cancelScan").addEventListener('tap',function(){
$ M" f" ^' X' f) b5 j
startRecognize();
% w# ^6 \; w+ R& f- z* A
scan.cancel();
6 q( A5 E2 @6 L* C
})
$ B& R' ~) h4 O) a3 z
// 开启和关闭闪光灯, H6 D0 W0 [ R& R* {
document.getElementById("setFlash").addEventListener('tap',function(){
0 m* T4 U- Y/ B* J- Y' j
startRecognize();: T! Q1 s4 m: O& J$ U0 I
isOpen = !isOpen;4 v4 P5 t/ r3 K X3 |4 O* [$ d
if(isOpen){$ ^& v. q) r# d8 a
scan.setFlash(true);) |9 f) S% I8 s* q2 |8 T
}else{
0 i7 {" W4 C# g- u) ]0 X
scan.setFlash(false);( e" X( ^& ~! j, ?
}
( V" X9 @2 d8 e- ?" P) Z
})6 g- `7 W) h1 P9 {3 ]; y- h: s
</script>
9 g% N) ]) _3 ]: Z

复制代码

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

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

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