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 >
0 Q0 T! q2 A) [" S9 c
<header class="mui-bar mui-bar-nav white">* B$ B1 X4 N, L2 D: j
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
% Z# ^, k5 D* x' F8 e
<h1 class="mui-title">二维码扫描</h1>
3 s- k) e6 Z2 e: J+ q
</header>, j- G1 q0 }/ ]/ D7 ?
<div class="mui-content"> F w- _- l0 P2 m
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
2 ^; E6 q: a8 ]+ H% {) X( ~
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>- {! D4 h* }& B, Y4 p% S, r
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>! X# v3 s5 y) t# ?
<div id= "bcid"></div>" z, J o; B4 \
</div>
; J5 Z. l$ l6 n- F5 Z" y. l
</body>* i3 ^/ v" Q1 X$ S/ _2 Z7 ^
<script>
5 x' _6 s9 ` R! l5 w5 E9 e1 p/ B
mui.init({
# z& ?+ B! ~- @# u. k. y+ S" m' U
swipeBack:true //启用右滑关闭功能! ?8 `8 t" ` V u1 @" \' W
});
/ \( x1 ^. t$ B9 @" C& o
var scan = null;
8 N1 Q9 `4 v, j# {3 D+ k
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭9 M9 l; D6 s$ H# ~$ v) |
// 条码识别成功事件
. n3 Y6 C5 C2 k+ I, L! N5 b
function onmarked( type, result ) {
o4 |, N6 z2 x% E
var text = '未知: ';/ P" {9 ^- S6 Y7 [$ B# b- T7 X
switch(type){
# U+ _5 H# T H8 @. P& C
case plus.barcode.QR:
$ S" V0 ^) Q5 ?4 A% K; d) i9 Q2 T
text = 'QR: '; // 二维码; ~/ H; Q2 S: G% d& s5 A3 B
break;
! @& a! R5 ^7 m5 Z
case plus.barcode.EAN13:
) q5 L0 L+ n9 |' Y9 q- m$ j2 U# l
text = 'EAN13: ';
# y6 X# X" n$ e3 t) T3 u
break;( _0 ?8 }8 a. W0 ^& w$ R0 L
case plus.barcode.EAN8:1 V" N0 {6 |# E/ n
text = 'EAN8: ';
$ p' v) M% o4 i6 a) x; w. G0 I( M
break;
' a. Y" `! s* C! N1 V! B R
}" }+ R8 N$ r; l# p& q
alert( text+result );
- O. o+ m' B0 ~) P0 m- M, H
}) {9 h" m0 _6 n5 k( n
// 创建扫描控件
; }; o' f+ t! Q
function startRecognize() {
( A* B3 o7 x3 a. F) w
scan = new plus.barcode.Barcode('bcid');9 ^0 T; ?! L _% Z8 j
scan.onmarked = onmarked; % \* L- ^0 h/ U- A5 y& |
}
2 r+ [& R6 B+ f% y; l! }
// 开始扫描7 X O- m( ~4 C( `$ f3 O8 }" w
document.getElementById("startScan").addEventListener('tap',function(){
& f; [1 k1 l8 M" y
startRecognize();
T. b8 t g$ C) T `2 W' M% b
scan.start();
! N) z# _0 I2 t5 D- J
})
, ~* r5 d+ }: i, `
// 取消扫描
+ i5 \7 m4 g1 }+ k+ V
document.getElementById("cancelScan").addEventListener('tap',function(){
1 {& [; y+ ?1 M* Q$ f3 [% C+ B
startRecognize();
1 ]6 B o4 S [" e( ^
scan.cancel();+ B0 Q# E& Y& r2 @6 B) w( ^
})
$ w1 U4 \+ n% v! k% p
// 开启和关闭闪光灯
; {( f5 ^+ b8 q! O% C
document.getElementById("setFlash").addEventListener('tap',function(){- Z3 t7 }' I4 r) `, y* n, n
startRecognize();; T+ `! T6 ?3 K5 Q
isOpen = !isOpen;2 C5 i. d0 m9 V2 m& f
if(isOpen){
9 X8 u) {6 e- b* S3 d5 }' v5 q
scan.setFlash(true);/ |& P/ E7 A% t& H4 ~ M0 _ N
}else{
! \7 L! _. B: }0 X3 ?8 e6 @
scan.setFlash(false);1 i U) f' n2 f; ^, }; a( x F; @# ~
}; E: _9 A- N! }' p0 Y: J3 L* s
})
4 c! \ U) G" h2 T
</script>& v' _# `/ D* l& x; W

复制代码

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

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

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