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 >
+ d% {% B6 F% |; N! x( j
<header class="mui-bar mui-bar-nav white">
, a: C3 R+ x" |) R7 b& ]1 j
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>2 F& J* P& V* }6 t
<h1 class="mui-title">二维码扫描</h1>
1 \2 G( R* y5 C
</header>
<div class="mui-content">+ Y K2 Q- Z7 x: |
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
% i6 `; X& b8 Q" r! t
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>6 P6 g1 Z& H! k$ h
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
( Y% t0 o% K7 R7 z& Z1 W
<div id= "bcid"></div>
J3 R% S' a' ?& F
</div>+ `8 O2 U% O0 z6 f' y% R( F
</body>
! z/ R4 `- Y/ L' M
<script>
3 o- s+ h2 z4 T6 C3 T; u# \8 T
mui.init({0 E% T7 b9 M, N4 s5 p& o) e
swipeBack:true //启用右滑关闭功能( `' G& ~7 Y* ^' S
});4 g4 B+ m, Z+ }% S
var scan = null;
: B& Z1 `5 D- J6 L
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭9 q' {0 P) q3 h$ `. }" d6 E
// 条码识别成功事件
7 F7 B, i8 J* [. x: S
function onmarked( type, result ) {
5 g% x0 D- z- P' V+ M7 G: i
var text = '未知: ';
$ q8 Z9 J) C# x
switch(type){% \( K8 J2 q* H* ]/ Z
case plus.barcode.QR:+ u/ R1 j# S- o! `
text = 'QR: '; // 二维码! n+ s/ j" o" g+ x4 Q
break;( G' b. O6 o& [) ~' ?: a
case plus.barcode.EAN13:
! W5 n9 j8 Y; c/ O: g
text = 'EAN13: ';6 i, P6 f+ S y7 G- v9 F
break;: v2 x: a) e* Y& g9 B8 f' I
case plus.barcode.EAN8:
' h; {" k$ _. k; s
text = 'EAN8: ';
5 I4 `$ {- O* ~/ }) D
break;
" e9 [4 j0 n! E- N4 F
}
) n, R" }/ C6 C) `$ r" d
alert( text+result );6 R( R, q o0 z7 Z. F% v9 g
}+ L$ e6 \* j% K0 K& Y( l: i9 [
// 创建扫描控件6 T( f& W* E# N8 T9 h
function startRecognize() {" @" ]4 X* O2 W; R( h* r, o
scan = new plus.barcode.Barcode('bcid');
" T, [* F& k. m: p4 G6 K* h
scan.onmarked = onmarked; 9 [ s3 `- h$ }- |
}
- H# |' U5 s/ z
// 开始扫描
3 K: e* C3 z5 T/ U) H$ m
document.getElementById("startScan").addEventListener('tap',function(){
) t* z- U- x8 u( Y( s: L
startRecognize();4 R9 e+ b4 V- t9 n: v, C
scan.start();
1 w/ E+ r9 h; q) N' l) p
}): m4 l4 F3 r/ b5 T+ k8 H
// 取消扫描) z# x2 e; _! {$ d" d2 r: n# l8 ]* R9 ?
document.getElementById("cancelScan").addEventListener('tap',function(){
1 q: }; S% O0 R1 U1 l
startRecognize();
8 ?; n0 i9 t- U. S5 S
scan.cancel();: n) k: u* e0 a/ F# ?
})" {$ O5 V: e7 t( @3 |, j
// 开启和关闭闪光灯
( f. t, {" A: X6 T9 @2 [
document.getElementById("setFlash").addEventListener('tap',function(){: f8 h" E4 {7 H" G
startRecognize();
# c7 D, J( E) Z9 J4 B8 S3 }2 ~
isOpen = !isOpen;+ V$ r0 A( b# P
if(isOpen){
' D! y: a8 o" d6 N
scan.setFlash(true);
: i0 P& I" _7 ^: O. ~9 a6 R
}else{0 U, G5 S1 `, @% J x4 g8 N
scan.setFlash(false);0 X7 S* R& \' Z `. J! f
}
# ?/ ^) P5 J" @: p
}), [8 h1 `0 R: I7 x8 b
</script>
4 F6 A. o: ]' {: O( T0 _; `

复制代码

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

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

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