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 >
# v) O; `6 l, f
<header class="mui-bar mui-bar-nav white">
1 l( W+ ] X$ R& ~- l
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>$ B) e1 b8 g2 ]" ?
<h1 class="mui-title">二维码扫描</h1>/ P2 \ f( c: K
</header>
5 E+ ], C h. \$ _; p
<div class="mui-content">$ z0 a) t% I9 f0 |. `0 R
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
6 n; w5 }* n' X$ L: @* X
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>7 J: O4 G9 C( k6 T2 r
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>5 h2 H q* y+ C% s) V5 B( b$ |
<div id= "bcid"></div>9 h& u2 m+ H. Q- u9 D' S. j
</div>- q. L8 p# R0 J8 h( W+ i
</body>& R, p& C1 O$ c
<script>: m7 m0 ^3 q* ?3 d2 Q# B1 m8 ?
mui.init({& e; w6 H; ]: O+ \. e) P
swipeBack:true //启用右滑关闭功能
- N) R/ S- ~& @5 i1 y
});
, f U# N/ K- f' O7 e" X8 X
var scan = null;
5 ^ e1 N' b, P
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭5 z5 q" v3 L6 ~7 N: P/ E
// 条码识别成功事件
$ _/ X9 T( m( d! f; B& F
function onmarked( type, result ) {2 w2 a/ `) p1 V6 o: b: c
var text = '未知: ';
, ^$ W, \ h; G+ P
switch(type){
3 V5 T# v% u2 b/ f, ^$ A
case plus.barcode.QR:
& ~- k; L$ X6 V' |; H
text = 'QR: '; // 二维码$ k9 a. a. y( Y" P- Q
break;
H; ]" z' S5 o* m* r, J
case plus.barcode.EAN13:7 R) |- `0 z$ R7 s7 o
text = 'EAN13: ';
1 Q X: v" z) ` |+ {
break;
G( R! w f+ Z# o# ^* K
case plus.barcode.EAN8:7 Y- q* e& _3 ?' n' Z7 i0 s& B
text = 'EAN8: ';
$ P$ ~9 V) j8 [
break;
# p7 Q' V: F+ i# J3 d. K
}
6 j( q3 a7 ]* m0 F
alert( text+result );
3 D# c8 a: l' s: f) ^ F
}3 K7 {3 E* ]" {' C3 k% i
// 创建扫描控件* g: u8 o3 c b; L8 f8 Z8 S
function startRecognize() {6 V# ~$ T0 H# P- K- n
scan = new plus.barcode.Barcode('bcid');% t3 v* l! ?6 M' `
scan.onmarked = onmarked; - X+ s' q1 Q) y% v) _
}4 c! m8 m, h% z0 N9 Z! ^! p5 P
// 开始扫描
8 w2 J1 v2 ^9 o1 Q$ d- p3 V
document.getElementById("startScan").addEventListener('tap',function(){
2 c( @3 o' I4 U l% T( S9 K
startRecognize();" Q, {& K; p8 F0 g, m( Y4 H
scan.start();+ e2 }3 b# ?( \ [( w" y9 v
})
3 c. N/ y; ~; ^
// 取消扫描
& s+ ?( Q( z- X
document.getElementById("cancelScan").addEventListener('tap',function(){( h. u! H8 Z8 G, i4 N; c
startRecognize();* w) w6 S- ]4 O9 J" e( ~% h2 z
scan.cancel();
7 A5 x$ L! U! T" a: I
})& I% z& m3 ~$ }$ u/ h0 z9 D6 ]
// 开启和关闭闪光灯! r2 U/ M* T. u, G" r/ N# O
document.getElementById("setFlash").addEventListener('tap',function(){
6 k, x9 D% t' _% l3 \
startRecognize();
0 Y& C( ^/ x* r) w5 ~$ u
isOpen = !isOpen;
5 b3 l" s$ K3 e# N7 ]' N
if(isOpen){! q l& [$ E7 h+ J- R3 ^# b
scan.setFlash(true);
7 ?+ B8 T" a) `
}else{: D+ t& L9 H( L6 y
scan.setFlash(false);8 f) v/ n! q( N" K5 I" I
}' s' |, l* g; f2 l t
}), R8 S* [6 h7 d ]* M
</script>; R4 V/ ]4 ?! C% ^; X

复制代码

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

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

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