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 >5 R* v1 F- Q: a8 v6 |
<header class="mui-bar mui-bar-nav white">
. M9 f" [1 X$ y
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>9 v1 n* K2 P6 J4 o" ]
<h1 class="mui-title">二维码扫描</h1>0 }$ t5 e) H3 w$ s! K
</header>
3 I1 D- z& e' d y7 ]/ S/ Z
<div class="mui-content">
! x, s$ U! Y" s# L9 z
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>/ {- g. m4 s5 {/ x7 E! l
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
/ W# e- {4 F0 d' d
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>4 \% n( s5 x+ S. b- G+ ?
<div id= "bcid"></div>6 B$ ~# k( y! F3 y# T# T: j/ `, H/ G
</div>" `" S7 C& r9 Z5 F7 K
</body>' i5 j/ f: @5 [$ d" d+ z) e$ c8 ~5 E
<script>/ }6 E; g5 _' F* z; A, r* y
mui.init({
# L% b6 P+ V! h1 r1 R
swipeBack:true //启用右滑关闭功能: ?! h8 ]+ h8 f- G1 o5 E
});
; f" ]1 B: @# B2 v0 C
var scan = null;
, x3 s6 s! Y/ o) A* Q' s% o* ^
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
' v: z+ r6 A- c$ D1 R$ F
// 条码识别成功事件% v, K5 U. B, M9 h, E
function onmarked( type, result ) {" I9 x" ^& i% m' ?% M) o# _
var text = '未知: ';+ {# q- ~/ _5 U
switch(type){
/ f- c, z" T& c. {/ Y7 a: \) e9 B5 `
case plus.barcode.QR:1 a" M9 }) u+ {2 e0 i
text = 'QR: '; // 二维码/ l' z' F! t& n9 x3 m: Y
break;
4 u, J* _( Q: l9 N: G! e. n9 q' m
case plus.barcode.EAN13:
! ?, W0 Q2 h1 X' T4 E
text = 'EAN13: ';
& m6 G7 \5 d6 a6 d0 u/ c/ ^
break;% i9 c( k/ i; c+ \& w$ M: {8 x( r
case plus.barcode.EAN8:0 D- J/ R0 p( U9 e0 l; l
text = 'EAN8: ';) ?" Q- z, r3 u2 E5 c
break;1 U4 J4 A# E% ]/ Z# n/ d8 H
}4 Z& y& u. k. U
alert( text+result );/ l" r. ~, J4 y
}" S, ~8 V7 `/ |1 u4 ~
// 创建扫描控件
( ^1 A! Q- h. K; g2 P
function startRecognize() {* q' G/ Y4 }0 d( V o
scan = new plus.barcode.Barcode('bcid');9 F2 n- S1 h/ K" T" V
scan.onmarked = onmarked; * M- a; ^9 P {! F" t9 k. B) f
}
# f4 ]; j8 p2 L4 W, ]3 @
// 开始扫描% E E1 d; T( W9 k. Z9 T
document.getElementById("startScan").addEventListener('tap',function(){' S" n1 Z- J& [
startRecognize();
& \! l+ v% X9 M1 I
scan.start();' Z2 P2 H9 b7 ^$ o
})
$ \3 o# d" Q1 l
// 取消扫描5 n5 J- I {& i2 m7 v' p
document.getElementById("cancelScan").addEventListener('tap',function(){. ^) ^+ e4 `2 I' Y* I
startRecognize();
1 Q7 S3 P5 |9 P. _- v5 ]
scan.cancel();& _; X% G: c& | s5 u4 p
})( ^2 i; f& ~" C- v& h8 E! Z/ w
// 开启和关闭闪光灯
6 [- H( ]4 F$ K2 q1 j5 w8 `: a: V
document.getElementById("setFlash").addEventListener('tap',function(){
3 d6 h( p& S0 [( U! t* Q- P
startRecognize();
+ ~( y% `5 ~( z) L* e9 c, r
isOpen = !isOpen;
8 l) l+ d1 T" H p; M" @- `, v
if(isOpen){
$ F. F, @' b. e+ E3 H
scan.setFlash(true);
# E" S+ {1 ~- `& P; G
}else{' h) ?/ c; t: I( o
scan.setFlash(false);
0 F) i" M# _, y' c# J- I1 N1 D
}1 A( i2 ?$ o4 [: D% L8 I: @
})
& z Y L( r) J
</script>
7 }0 w, j1 [& F3 C( L W

复制代码

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

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

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