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 O$ B6 P/ t3 Z5 I+ z, Z6 T3 z
<header class="mui-bar mui-bar-nav white">9 h6 F& e1 {0 o
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
& P: o& K9 {( i% T$ ~( ]5 x
<h1 class="mui-title">二维码扫描</h1>
% }% b: j% K5 [" x- u
</header>
. t& N8 C0 ^! l6 g; m
<div class="mui-content">5 r; ?3 z/ c/ K8 T* g2 `9 N0 ^3 r( L
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
! B6 f5 n( P( t" O8 a
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>6 R- J, o+ ]% N) E; h- a- {
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
0 }8 q1 A- [3 q- M" Q; c
<div id= "bcid"></div>) g e% ^) R' y) J9 d% M
</div>
5 b- q% Q0 h: C& S7 g! T
</body>
( a2 c# H1 s/ d; \5 O" A1 b: M! q
<script>% `5 A- W' P/ ^& C
mui.init({
3 n* u; y. Y3 ^# n1 `
swipeBack:true //启用右滑关闭功能
6 y R- _. V; A, m( B' q
});6 e& d. L* ~) }- h( m- l$ `7 j
var scan = null;; W" N4 H+ R7 q6 \
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭/ e7 @! e) y) R: B7 _
// 条码识别成功事件
5 D0 W- r* m; m# V l9 b
function onmarked( type, result ) {
- N& ]5 u. g# x" O7 X! M
var text = '未知: ';. q7 l7 n1 Y: X" k4 ~- o
switch(type){
5 \/ j' R6 B: ?4 W' Y
case plus.barcode.QR:
6 e( o: _% k( W n# }
text = 'QR: '; // 二维码5 I' l) C" [4 ^4 i2 G
break;' w* d, |$ z; F. q0 `% r5 p& a, x: N
case plus.barcode.EAN13:
6 N; N+ o: t" o/ s! P* ~! M
text = 'EAN13: ';
0 b$ a1 a% L2 ?. K4 |
break;- r5 L0 L1 K1 N. P
case plus.barcode.EAN8:- h, C! V' }; ^2 u- t, o% L
text = 'EAN8: ';1 ^0 G9 z+ s5 u
break;
1 H* B- _! @* ^# I
}
6 \9 i5 u3 d; V' O1 g
alert( text+result );% i, k& f. o- w# T2 D; w, \
}
3 V) Y! H" |' @* E# N8 E
// 创建扫描控件
* J2 F) j6 E; X* w q
function startRecognize() {4 i9 g/ M( d) }- L
scan = new plus.barcode.Barcode('bcid');$ h3 K) i' x0 _& _+ e6 z
scan.onmarked = onmarked; 1 q1 D% ]1 h9 e2 `, Z4 K
}
w! L2 } b Z* C- J! S
// 开始扫描) y8 ]0 y) ~+ c
document.getElementById("startScan").addEventListener('tap',function(){
( u! s1 H$ P4 c
startRecognize();
1 a7 z6 A5 `+ C7 ~0 [
scan.start();* X* n. u, M8 }( Y6 f9 A
})
4 K, b, E# ?9 f7 u! R
// 取消扫描" E/ } l8 C7 v0 I
document.getElementById("cancelScan").addEventListener('tap',function(){
# }) p1 ]6 }# s
startRecognize();; e: P' Y5 \4 g* q. L% G5 t
scan.cancel();
& W$ T* U7 b1 g# `: ?
})
* h, N) T- G8 n" b
// 开启和关闭闪光灯
) x' r/ n4 ` j
document.getElementById("setFlash").addEventListener('tap',function(){2 w A# J* V" |+ \$ r
startRecognize();1 ?. L+ \3 P) s0 B: }: r# N8 o
isOpen = !isOpen;, q r! ?+ b( _2 T7 |
if(isOpen){
/ Q9 {. D: Z" i q
scan.setFlash(true);* I, k& |3 w6 Y& Q
}else{
: D" B5 b1 L* A+ Z, _
scan.setFlash(false);
( P4 A: |2 J! d0 t# k
}+ C9 {5 n) h7 T. `, t$ j
}): X2 v* x3 O2 C
</script>
' B& ]# d3 n) p2 T

复制代码

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

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

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