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 Z" M M+ N! p- C/ ?" H
<header class="mui-bar mui-bar-nav white">
$ W) [: x1 N1 M! A7 ?
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
: c; O! _, M$ `+ F2 E5 W9 m+ j
<h1 class="mui-title">二维码扫描</h1>
) ~8 D- x7 W' L4 e5 g1 v
</header>
' ~! E1 E" \* m" M9 l- K
<div class="mui-content"># }3 D' \4 Q# z2 l
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>+ _8 |7 g- F7 C5 {# X
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
0 p* M ]5 R" X+ \0 S
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
* r; X5 J* O: \' l" m4 u" M& u+ I
<div id= "bcid"></div>
- t( v) t+ w/ u6 M+ W
</div>
( W# [7 m. c2 {9 o t" K& ]
</body>* n8 a6 z7 ]. D' g# U+ n ~+ ?
<script>5 i9 w8 y1 J6 Q M6 U) |( \/ i
mui.init({
" @1 m7 n i1 f1 E9 V0 x
swipeBack:true //启用右滑关闭功能
& _3 K% w7 i( C( s- G/ n# ?
});
- N& w! d% ~/ J: P% @" C. Z
var scan = null; ?; g$ T9 {7 _! `6 ]( \8 O
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
}6 J9 [0 H/ K3 Q
// 条码识别成功事件% E2 f* K0 Q/ Y* O4 m
function onmarked( type, result ) {
' b( u1 y- R7 B9 X: ~3 L
var text = '未知: ';% U( ^: X: t4 {* Z4 D
switch(type){* J3 b7 p) Q W, u9 p3 _& P% r
case plus.barcode.QR:
9 ^2 n. c$ _6 l# s$ L( q
text = 'QR: '; // 二维码
' L7 T7 E% a3 w, b
break;3 s! T: {) k! O Y0 I
case plus.barcode.EAN13:
& e& t4 K& v. U& u$ ^, D' @
text = 'EAN13: ';
; i E; S( P- j4 c7 U1 |
break;4 @3 D5 p$ l! c4 K4 i
case plus.barcode.EAN8:
. q/ o7 i q' z& ?
text = 'EAN8: ';
! X; e- {/ o- [% p
break;$ y _1 l2 b; Y9 F- E- r- ]5 C8 Z
}
& p3 Z( K5 v, M
alert( text+result );% P+ g' T2 r5 F+ o0 [" h3 }8 b a
}
{& g0 u; c1 \0 \$ Y, p0 @0 `* e
// 创建扫描控件) R- b x0 H% b2 v+ c7 P3 B6 X6 |7 _9 _
function startRecognize() {
1 y5 Q& K8 G" h4 D6 `1 a2 y& ^
scan = new plus.barcode.Barcode('bcid');
- a) |0 ?% K3 \8 F* W! D
scan.onmarked = onmarked;
) c. k! d4 q1 T9 w& K s5 t
}
+ Z, Q& X j9 c \, s- l' k
// 开始扫描
2 i) o2 v# n$ `$ z
document.getElementById("startScan").addEventListener('tap',function(){7 ~1 f) e! q0 y- g& j
startRecognize();/ |: [" Q8 M( o- {; T
scan.start();/ A8 i+ c0 p8 [! z. x( T- X' U z
})/ ~& O: h+ w' Y- o1 V9 v" j
// 取消扫描
9 B8 f$ y& Z# X* z$ w5 |
document.getElementById("cancelScan").addEventListener('tap',function(){* Q( e0 V5 Q; X& K& E- H
startRecognize();! B% x3 T! X9 X9 L
scan.cancel();
! i4 j; a" ^# S" [
})/ j! W5 Q4 X, E! Z X9 B* ^# X
// 开启和关闭闪光灯
; N, ?5 H( b5 \2 h, [5 v5 C5 M& l
document.getElementById("setFlash").addEventListener('tap',function(){
8 @* X- q/ Q) ?1 L! \0 _
startRecognize();
# [- ~4 E3 j8 s
isOpen = !isOpen;
) _* m* q2 [7 P& n) j$ V
if(isOpen){0 S# Q& Y* @; Y1 E; l6 M2 e
scan.setFlash(true);
0 @& m- P; v4 |8 Y; d
}else{5 r$ ^6 ^$ @7 e- F) ]; R m7 o
scan.setFlash(false);) F. c, }7 e# A# r' Y
}! q6 D5 ?* l m+ P% z5 S( d
})
% }& w, A1 K# P; G! o7 E
</script>
# m7 {% l1 { S' E' c7 a. u5 B

复制代码

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

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

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