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 >6 f D, I- |1 a' H/ I k/ ^
<header class="mui-bar mui-bar-nav white">6 a1 T6 D" k% z+ p
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
' \- O' O% K+ O3 O! M
<h1 class="mui-title">二维码扫描</h1>0 e5 Y" @ ]8 P" H* H9 S
</header>3 D' T9 Y# S+ \4 p3 h% V, e: G
<div class="mui-content">
2 A2 Q b0 ^1 O, G# k3 v& i
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 \" m2 ^) x+ A/ V4 ~$ h+ ?/ c
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
; l! [) r' f* ~; J, V( m% N
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
* A4 w$ `$ f2 F: Z/ k
<div id= "bcid"></div>8 W {. p; w. G( ]& f& t
</div>
2 m( E; f+ u; \+ w4 C: D# y- B) ~
</body> n( I R7 e0 `1 ?7 ^* c
<script>
2 }9 f6 ]5 Q, ]" f9 a, D& k
mui.init({0 E* Q* L/ B* C+ z- F
swipeBack:true //启用右滑关闭功能
8 p3 ~( P0 v8 p `
});" z7 S3 T: Z6 X5 x" u" B% y G2 a ?
var scan = null;( ]4 c6 a a% @: |: L
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭. E. i; f4 P# ?
// 条码识别成功事件4 E2 n# I' O( _) R! w+ @3 L
function onmarked( type, result ) {
5 M+ n/ d9 C2 f5 c) P
var text = '未知: ';( _) X, r ^" Z
switch(type){
. S' R, V: ]( G4 Y' [0 @4 u
case plus.barcode.QR:8 q& z5 ~. x& f* d
text = 'QR: '; // 二维码7 g% i" G% M# J, f3 z
break;# m( V- [( U2 @* ~$ b1 X
case plus.barcode.EAN13:6 o5 T; x; L* V0 i8 B
text = 'EAN13: ';# y7 Q# b( c2 v5 u
break;& X& F- y% ]& e# _, X( f' [; ~2 N
case plus.barcode.EAN8:
9 N& E5 F6 B* ?- W6 K3 a
text = 'EAN8: ';
( c4 F, }. a2 N
break;4 Y2 I5 ~) _/ ]- J
}" h2 o: Q# e2 L3 n( J, m# @# @% {* g
alert( text+result );
2 F: W2 N- `9 a5 ] o l4 p1 S
}. O" d% \" @' ?0 V5 `1 O: I; v* P
// 创建扫描控件( o6 U1 N0 O! x. N, H' ^- _
function startRecognize() {4 h% w8 ^; v. A+ V
scan = new plus.barcode.Barcode('bcid');2 F+ \& a$ L6 n5 E/ u/ |: a
scan.onmarked = onmarked;
8 V3 ]& _$ N4 T* h. P" Y
}
- \% Q$ \/ K. v% B1 y
// 开始扫描
- k5 _4 w9 b5 q. r6 K6 ~0 c/ c
document.getElementById("startScan").addEventListener('tap',function(){
& f2 X- ?! y% D) I! L, L
startRecognize();. N M2 u- A# N/ I- ?# {8 w
scan.start();+ Z% P& O) ~# F# g4 s
})
* ]) a! y6 k: a t
// 取消扫描
& D6 I- F1 l, d% Y ~( }) X
document.getElementById("cancelScan").addEventListener('tap',function(){
/ ]- i; k. i5 b( t& D, {
startRecognize();' D' K5 ~% n$ T' S
scan.cancel();
8 F2 i, Z/ n& l2 ?! X% P+ ]8 O0 l
}): I+ V7 I! J" G6 c
// 开启和关闭闪光灯
# t6 f8 i) ]+ s0 k" ]# _8 |0 e
document.getElementById("setFlash").addEventListener('tap',function(){8 P9 v; I2 T; L/ x( x
startRecognize();
/ T8 R7 C4 S8 X! d
isOpen = !isOpen;
0 x x5 Q% C8 T2 i5 `
if(isOpen){6 A' V+ Q: {8 \& X. H' p& W
scan.setFlash(true);
: `" `8 X2 F4 L8 f. b
}else{; a7 u' H0 g! z- {
scan.setFlash(false);
; t' u# S/ x$ O2 O
}3 ]/ g. R8 H) V0 p4 h$ k
})$ i5 _. J i+ _+ F' e* f" E
</script>
! D! i) M# k# I6 O9 A6 m, h

复制代码

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

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

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

浏览过的版块