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 >8 W; G8 H6 U4 t: \
<header class="mui-bar mui-bar-nav white">2 b4 K+ d6 `) q- j* e# q1 K
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
' ^) c4 F3 F( K
<h1 class="mui-title">二维码扫描</h1>$ l( n0 \" ^, C' U# Q
</header>3 X0 n3 o1 y3 U$ f6 x
<div class="mui-content">* R6 ?3 b6 u+ x0 v. z1 x. o, G
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>$ ?2 w g+ y4 O" j7 B5 K
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>9 A& |/ Y! ^9 ~$ I4 a
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
3 H7 U. m) @3 b( H" J/ E
<div id= "bcid"></div>. x) Z& U$ s; X0 K. w
</div>
9 J- G6 @' ]2 `: E
</body>
" _. a7 o$ \3 X7 j5 W' ]
<script>
' {+ D/ B1 m( j0 R* C$ e$ N
mui.init({3 e( g) K }: ]# e( h: a$ I
swipeBack:true //启用右滑关闭功能
, g5 E) g( \! }: `: h. u
});
+ @2 o4 L$ T! B$ y7 p
var scan = null;
7 q2 U; O* f, V9 v7 ^9 `
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
) o7 O; H5 y$ E8 U- f
// 条码识别成功事件
$ e' z/ {. A. q0 Z6 p) _9 P
function onmarked( type, result ) {. x# b5 |5 X- f
var text = '未知: ';
9 j* Z7 ?) Q/ e- i
switch(type){/ x) a& T, s' H/ m/ e7 s
case plus.barcode.QR:
4 e& o0 k9 j" V0 L4 y6 r
text = 'QR: '; // 二维码
* }0 x8 l& l! ^& Z" s. }
break;
( N/ e) O/ p$ Q0 a( c/ R
case plus.barcode.EAN13:
& D+ Z; v- c+ W2 S. e# x% {
text = 'EAN13: ';
1 }4 @: _" O6 ^. [
break;
. C! e; b. J% d6 w- ]
case plus.barcode.EAN8:/ `( p5 R6 g8 F6 O) h9 }
text = 'EAN8: ';
* Y, T8 y; i# w5 U% G* [9 |+ y O
break;# z7 A/ F1 C3 K+ e9 p
}, v0 |/ l3 {4 c2 e; G
alert( text+result );. U5 U6 i0 J* s
}4 D& ^/ J3 X( p
// 创建扫描控件
2 r" D8 ?. A9 ?7 D C+ F" v" \
function startRecognize() { y. A/ V( U" m' \. V
scan = new plus.barcode.Barcode('bcid');
" _0 ]" I: v) O% }# m
scan.onmarked = onmarked; 2 G1 J3 T* P: Q9 K" I8 O
}" I( z. p1 e" K7 W) I; `
// 开始扫描1 \1 t0 L8 ~% Y5 q% p8 j
document.getElementById("startScan").addEventListener('tap',function(){7 ?6 d. |- g8 m8 X
startRecognize();. H/ t1 i) r3 O* U6 x1 z2 F% v; J
scan.start();) G1 Y/ ~: B; `1 Y5 X! x
})
* w; j( E* G- N( v
// 取消扫描* N- o7 {& S& N1 p
document.getElementById("cancelScan").addEventListener('tap',function(){3 Z7 _5 J. Q& n/ n8 L \* G2 D
startRecognize();& S5 `8 ~" @/ C( ^
scan.cancel();3 u/ L9 Z& m# m# }6 }
})
" b7 W' B! }& L7 v. P
// 开启和关闭闪光灯
& U. D( d4 j/ a
document.getElementById("setFlash").addEventListener('tap',function(){
9 F' H- h/ h; Y
startRecognize();+ _3 e; B$ S3 i2 f
isOpen = !isOpen;
* d' k, ]* @6 Z- G0 L$ q
if(isOpen){0 v; c: n- t9 A# W
scan.setFlash(true);5 W0 J+ {6 b6 q; l
}else{
* j$ n) W% g7 r
scan.setFlash(false);) W* A. l: |; E: U( e" p
}( R! r4 c& @2 t0 t
})( H9 C8 o' ?; S6 G6 C7 b4 V" F q
</script>
- s' |( Y- N4 Z( J0 h

复制代码

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

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

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