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( v. T2 G+ F* C5 O7 c" x9 V/ q0 b) e
<header class="mui-bar mui-bar-nav white">
& p+ U+ x$ M1 w+ ^" ^' @! S2 `
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> `6 `+ n1 A4 ^0 Z" T
<h1 class="mui-title">二维码扫描</h1>2 l, s$ z! y# N& Y+ Q
</header>
: @( O/ o* f- y8 j. K
<div class="mui-content">& S9 `) T5 \0 t: c6 {% `9 i4 i
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
$ J. j& B; C& Z' r+ X
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>9 \) D& m+ p9 M( T7 h( K c( y( ^ R
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>8 E6 t; v. }/ v" ?9 {' L, w! d
<div id= "bcid"></div>" z- W; V" K0 n+ P0 o
</div>
2 C0 [/ `0 e8 M) ?& ]
</body>
& R3 E3 R- r3 `9 e% C' F Z" f
<script>
: p: r) T1 Y7 |! Y9 K
mui.init({
# h" @% W$ z8 a0 B/ S( A
swipeBack:true //启用右滑关闭功能
- v e% k3 f, A
});
& [$ S8 v$ S$ H
var scan = null;
6 F# e4 @0 u9 ^+ S6 u. d, q/ {
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
\& n9 [. @/ j5 M y% d2 e
// 条码识别成功事件
, p% M/ C. }2 F& `2 }, `0 E
function onmarked( type, result ) {2 z. @. M( w. P
var text = '未知: ';
1 [4 e% F+ i4 Z
switch(type){
4 x" L6 N p1 D+ y2 o
case plus.barcode.QR:* t. u, [* }8 K: P
text = 'QR: '; // 二维码
9 M7 V: V6 }6 h: H% Q1 B$ i
break;+ n5 W) |9 j) a' _/ t: H6 r
case plus.barcode.EAN13:
, |% o; j& W8 v
text = 'EAN13: ';
4 ~8 f0 Y8 G: ]/ a5 X; W1 R
break;
$ D5 G9 W6 P3 H K4 g+ x) n' [# W
case plus.barcode.EAN8:3 |0 y+ C$ ]5 h# y: U9 r
text = 'EAN8: ';
5 W& \; \+ p) |, p2 g4 D
break;
( A7 Z) }3 O$ J' Z. M6 @) N
}" [/ B4 {0 A" K; c6 p
alert( text+result );
6 y) `) K7 ^/ @; A% E p7 w" }# P
}
, X1 f) q" h' L, B' ]" M, C+ n
// 创建扫描控件
+ k) U9 x0 g5 o! l
function startRecognize() {
7 W5 x$ u2 ~' K) x" K
scan = new plus.barcode.Barcode('bcid');
5 e" u0 | ^7 M
scan.onmarked = onmarked; 9 D/ c$ G/ V ~
}
& L9 m% c1 y9 A7 \
// 开始扫描
) P6 ^9 g3 X2 ?4 o1 j" o
document.getElementById("startScan").addEventListener('tap',function(){' H! q. x( }( _6 q9 j
startRecognize();5 z1 I1 q- |; q" I* i, K0 S
scan.start();
- G1 H1 {, U0 H7 S( C$ e
})
7 c" L2 i, l6 P
// 取消扫描
' Y8 o3 ~ D/ D! I8 L
document.getElementById("cancelScan").addEventListener('tap',function(){
# \+ w( g7 V" o; }, l7 l" k k2 `
startRecognize();
/ Z J5 y& T/ H) H8 u- d5 k( s; {% R
scan.cancel();
4 }. t6 v7 A+ {; v" h# U7 L4 Q& \
})1 ~1 ^7 a0 G6 f+ o3 i y5 r
// 开启和关闭闪光灯2 F! F) g# i& S. X O6 E* e: x
document.getElementById("setFlash").addEventListener('tap',function(){
: ^5 W& }( H# L5 d8 _
startRecognize();2 _; H2 c3 S' w, k5 k
isOpen = !isOpen;1 O9 I% P m) o- ~2 J
if(isOpen){! @. B0 p/ Z7 j8 }
scan.setFlash(true);3 @! ]% k q( E0 n
}else{/ {3 h: f+ N& r# u2 H
scan.setFlash(false);
$ T. J$ y4 m9 Z9 z, g' M E ~& C
}
' Z/ u: S1 j f# i' H9 W' X) a* _
})
" C6 d5 l0 J8 j* t4 a5 Q
</script>/ F$ I! t( M/ y$ ~# h

复制代码

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

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

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