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 >
' [# d6 w. r; t/ `
<header class="mui-bar mui-bar-nav white">9 r ~& k. Z* A' z5 a+ {: O# F
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
0 |+ i" N7 i: n+ x: I$ I/ ]4 i7 `
<h1 class="mui-title">二维码扫描</h1>
# x4 J9 y+ e8 W! k* B+ J! M
</header>; j, c! {/ _! w
<div class="mui-content">9 f+ j% a* v4 V9 C" Y$ b- t: c
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>! }5 @7 u: U1 l
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
, Z) X) `! Q# W) w& b, ^- z8 P
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
0 [2 W) O4 X: ]2 _8 c6 R
<div id= "bcid"></div>
; f# f& M5 f8 X: Y, L" v* d" ~$ `
</div>
; b: ^' ^* j" [3 r4 S. s& z
</body>/ x) H, A* p0 [+ O4 U( c5 y6 A9 |, E
<script>
5 X; a" c3 A" z0 @" m% K. J% l
mui.init({' Q$ A- C3 M- ^* f: q: N8 g( e
swipeBack:true //启用右滑关闭功能9 f7 g6 Z7 N( H1 h% F% @2 K& ]
});. P3 }" ~, h. F/ w" H
var scan = null;
; J2 n2 y' p7 H* u3 l: Y, j$ G
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭7 c, V e$ ~: H& ^: d* H
// 条码识别成功事件: d( q, |' `& M6 m
function onmarked( type, result ) {
3 H, G( ]7 u8 e- i" `
var text = '未知: ';
; @) S6 O& i& v+ ~4 u8 j9 Z
switch(type){9 E: g5 @" Z( a. r6 n2 b
case plus.barcode.QR:! D0 N" ^: \( U% s0 T& t& O. q/ q
text = 'QR: '; // 二维码9 @ f' Z: r( i: b" U8 ], x5 H
break;$ M: f7 |* V7 {( m. m4 {* O6 F- ^& k
case plus.barcode.EAN13:- V+ e6 p. z9 u
text = 'EAN13: ';
) q& \+ d: `+ `5 q( [; \
break;9 Y2 v6 v$ S. U0 ~7 _) ~7 y/ P
case plus.barcode.EAN8:( O3 {& [0 Z+ H: f% w' x" |' p
text = 'EAN8: ';
( Z5 b; h4 V: W0 z
break;
% `/ g7 d& M8 i! e
}
1 `6 p9 v7 q& D
alert( text+result );
/ ^) c/ S2 M: Z6 g5 E% s
}4 k9 ?1 L3 B! u, B! U {2 u. O
// 创建扫描控件* K( a8 g; ?, O
function startRecognize() {
* [# D/ [' U& o; d
scan = new plus.barcode.Barcode('bcid');
% s8 E# x8 g& ? G: k
scan.onmarked = onmarked;
% X' x1 x: |" f3 U& X+ X3 `& S
}% V _, A" s6 M) v: Y
// 开始扫描4 H* t. ~ t( e
document.getElementById("startScan").addEventListener('tap',function(){0 ^2 p z) m6 Y8 M, X$ ?# H
startRecognize();9 s! B# H9 K2 |
scan.start();
2 Z- E: G* o) L9 y5 e7 |
})
% C6 m! e8 |/ z; ?
// 取消扫描2 m" I$ b9 s" O! p% s
document.getElementById("cancelScan").addEventListener('tap',function(){
- x0 w3 V& p% `6 F$ M5 P+ d' c2 }2 q7 ]
startRecognize();
6 M9 Z8 O( M2 e4 u
scan.cancel();0 l z0 q# |; i% O
})$ v. t: q. D7 q$ u! b3 N7 D
// 开启和关闭闪光灯3 }. x6 \. s% c+ |8 F
document.getElementById("setFlash").addEventListener('tap',function(){6 h2 f$ H) t& N6 }$ V0 S: d4 T
startRecognize();; `5 i/ M" j5 Z; M
isOpen = !isOpen;0 O$ W" w0 a; i
if(isOpen){
: L, |4 x* t- ] c: {
scan.setFlash(true);0 a+ T8 v9 q4 m# N1 e$ s
}else{
/ o' Y1 @ k4 `5 r" V7 q! Y
scan.setFlash(false);1 j% c, M# N' Q2 y- b# u
}
. S: E1 Z% X% v
})$ Z! B R* D- S+ n7 v' t+ ~! {
</script>+ R0 G: a3 }8 f1 U, {

复制代码

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

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

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