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 >
+ G$ u$ l1 s. a! n' N5 Q
<header class="mui-bar mui-bar-nav white">" i. q; h5 ^% Q3 \. r! _
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>& E- _ G% w' u7 @( G( l
<h1 class="mui-title">二维码扫描</h1>
% t1 O5 b! Q/ C0 W3 r9 H
</header>- |) p/ U. R) |/ Z5 D; ?0 b
<div class="mui-content">
% \. {; B" Y7 x- Q2 ~ ], a
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>. ]2 r& ~. H9 F$ o
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>+ p- |# p. A1 N8 k4 e* E; K7 U
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
& L+ k, r7 E. A1 @9 u4 g
<div id= "bcid"></div>
. s$ x* b% _& W
</div> h; a' |/ A: C: ~
</body>7 W. ^. M% Y; q1 u* ]0 B( x
<script>; W k# g: y" P0 o+ a* J! Z) y
mui.init({
/ d2 H5 [& k! f) L
swipeBack:true //启用右滑关闭功能
a. c8 ]! T* B m' \
});6 Y; I; Y3 A* k1 h) s" \' l2 _5 S
var scan = null;0 e# ?2 y o* t' a) Y! L3 o8 }
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
% d* e. s: ]1 D$ D) y' ~0 r2 b
// 条码识别成功事件+ y7 v) o2 ~: O+ t
function onmarked( type, result ) {. N/ R5 @+ p8 {, a' P* G+ v' V
var text = '未知: ';" k8 A4 a1 L! i, T, i) ~% O
switch(type){* j" L# o3 v; z8 x1 q
case plus.barcode.QR:1 B$ d+ L& P3 x) y4 t5 h* H6 h
text = 'QR: '; // 二维码' o8 L Q; ~ Y2 G! R2 c
break;2 H2 l' t; y2 `7 T! m' n9 r) i* E
case plus.barcode.EAN13:
: L! ?+ m- _& e
text = 'EAN13: ';
- r9 {8 b8 @& a! v' P( y4 U
break;& r2 e+ H8 }) @8 B
case plus.barcode.EAN8:
{2 w/ {7 t7 N1 m
text = 'EAN8: ';% y- s7 \8 l* p4 g
break;9 W: I& N% s2 \! x$ w4 f
}5 q- s5 O- o) z1 X
alert( text+result );7 P% j" [1 ]- j1 C* {
}
P! G' s, _) K* q$ r/ P2 X
// 创建扫描控件0 L* {+ ^# i F3 z) _
function startRecognize() { c2 a1 z5 C/ j1 t V4 L
scan = new plus.barcode.Barcode('bcid');
q# n, F& D+ \
scan.onmarked = onmarked; , f* F, r$ n% Y8 ?
}
4 y* n% |% R% y
// 开始扫描
7 `0 Q( m: n% |% s9 @6 t6 }
document.getElementById("startScan").addEventListener('tap',function(){, d% l, |, N( w9 t, e
startRecognize();3 z, S9 n: I' y2 G7 u
scan.start();9 }* }# ^& w" T" H6 X- ~6 s
})) t9 k3 s' z% X6 ^: n" a% @
// 取消扫描! }3 W3 K U! H+ N
document.getElementById("cancelScan").addEventListener('tap',function(){
1 _; F# v; d, T0 S
startRecognize();
2 Q: k: t% e+ A% \3 o
scan.cancel();
- W& t7 K0 |+ S# Y
})8 \- v; x( J0 k$ ?; y F
// 开启和关闭闪光灯
# l; h7 d) V9 K7 a5 P D
document.getElementById("setFlash").addEventListener('tap',function(){6 | A1 r' r2 G% [' a: J
startRecognize();/ q, Y u9 |- r! J
isOpen = !isOpen;
5 z6 I2 z# k R( E( h9 d3 t
if(isOpen){9 y. q: B' Q) P" y
scan.setFlash(true);" [9 s& p9 u k+ v3 e' ^( @
}else{
* S$ H" b1 t, a% R) m- C; e
scan.setFlash(false);
% n+ c% `% Q- P! A5 p+ m
}
5 X6 [5 w8 E1 U0 o, ?9 x9 R
})
& L. }# e% q. u+ r; C) H* d& u; R
</script>7 m4 r/ ]6 `7 \; K9 u: y4 J; F! b

复制代码

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

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

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