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 >) M* b2 H; S/ M, @
<header class="mui-bar mui-bar-nav white">
; P, b# h1 C) B) L) N& {% i! `
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- T" J- n0 F' {* n
<h1 class="mui-title">二维码扫描</h1>
" C1 r, E* V A$ L1 y, ?( z
</header>
1 X) K5 m9 h. J% z1 n& W. ?
<div class="mui-content">
- \# W8 d8 B$ a8 Q( D4 Z2 L4 M4 m
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button> y, z9 J7 ~8 E _( K* W* B) O
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>6 O4 Y) I5 m1 }4 ]* |
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>$ ~5 n3 I7 [! x. H R
<div id= "bcid"></div>. d2 h5 H; l' D% d
</div>
5 s, v. V" ^: m! Z
</body>
5 e! K# L3 {1 K
<script>
Y3 o9 ?- J1 q6 X5 t8 R2 H1 T8 v: {
mui.init({& z [& F" P) k& y# e7 D
swipeBack:true //启用右滑关闭功能
8 r R- h; ]" k3 R k
});! ]& L8 A' A, w d1 {* ^- ]+ r: a
var scan = null;
0 j! f* N/ D ]4 b: r2 p8 D
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
+ h& n. b2 k: D8 f0 @! e. \
// 条码识别成功事件
# e( |4 [/ {6 u6 z+ b
function onmarked( type, result ) {' b6 [! ?9 I: j: ~4 n0 _
var text = '未知: ';5 d. }' h! K1 W! Z8 u
switch(type){
7 \6 ^* p B; }0 h" ~2 n
case plus.barcode.QR:: G8 O8 B8 S2 w1 g
text = 'QR: '; // 二维码
, R6 t% t8 s8 |" N
break;: U- A( A' `; B+ a$ f) v; G
case plus.barcode.EAN13:
! S3 C3 z' |: k" h- |
text = 'EAN13: ';3 U+ J2 R0 c$ F' V; I5 X
break;0 U# S# @0 m3 }& y) s
case plus.barcode.EAN8:+ V/ p2 \* j4 v& g0 n R
text = 'EAN8: ';6 f" s! d9 D* B9 M" F# J
break;* _4 e r% S" L
}, A3 M( q* _. P: o3 z9 i E
alert( text+result );* m' P- s3 Z* e, P6 R3 C
}0 \- r/ m: Q7 X) X
// 创建扫描控件
7 F( ~+ L% R3 `& u
function startRecognize() { f+ e- T6 t2 }2 [
scan = new plus.barcode.Barcode('bcid');( z; }+ n& S% s; @+ Y }6 h
scan.onmarked = onmarked; & a6 s+ R5 V1 g
}& n; {* _" A7 h) B) I
// 开始扫描6 Y0 _- h+ @* I2 w7 u
document.getElementById("startScan").addEventListener('tap',function(){) K6 ?$ [; Z7 Q( B5 B
startRecognize();
P8 R+ g5 V s
scan.start();" _$ H, Q) m2 [
})
9 s) o& @9 k/ @, i9 U
// 取消扫描5 Y9 l0 c3 z6 c4 P
document.getElementById("cancelScan").addEventListener('tap',function(){7 I8 w/ P% H2 ^8 x
startRecognize();7 U/ g! Y* P0 U/ n( j' v8 }9 J
scan.cancel();' t3 e5 d- _' K" H( D
})' n9 e9 V S: k8 b* |
// 开启和关闭闪光灯
5 g1 X/ K$ l6 ^# i9 W" }
document.getElementById("setFlash").addEventListener('tap',function(){. ` B# h% _7 r8 }: N: X g
startRecognize();4 b1 X- J h" \- ?3 e
isOpen = !isOpen;
' \1 G* B: X9 D; w w
if(isOpen){0 ]$ X" A! t1 q
scan.setFlash(true);
9 R! g* `. s6 s" A
}else{1 p J1 Y9 R& [- z8 |, y3 i& V
scan.setFlash(false);
; V ^" U& s3 v% I3 N+ q+ }2 R
}
6 ^3 b/ x" h, ]0 h
})
, j9 ^7 a3 T$ m1 t, R
</script>+ O3 p% c. ]5 [1 o: C4 T

复制代码

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

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

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