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( ]8 {$ u3 r, h. I2 k: t+ }
<header class="mui-bar mui-bar-nav white">, v& i+ L: M" r3 c0 T! [
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
4 T7 j- A9 \: y8 p [, ^" L
<h1 class="mui-title">二维码扫描</h1>7 d/ g4 ?9 {/ S/ j0 @
</header>
! f) R/ t& X" ]- q5 o* T7 t* t; D
<div class="mui-content">
- }; w b' \/ R
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>3 ]9 K0 h' U- i
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
" m: j5 Q7 K, J6 ?$ b3 F# E3 Y! V
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>" Q. V j8 v3 I1 x7 V0 R" m/ p
<div id= "bcid"></div>
; h+ Y& f" i: o( [1 O) E
</div>
0 ~7 w; n. q+ p
</body>
( r$ Q( @8 d6 W7 J" K5 a; Y) _6 S$ r
<script>' D/ _: H3 e: J; g( b3 @& c
mui.init({
/ R0 B _$ v7 {. U& Q9 R
swipeBack:true //启用右滑关闭功能0 i: j# @( Q! m
});# N7 d: s f. S- H3 n7 ?
var scan = null;
' X, @ P: I" G* B9 y i" i5 w- g
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
: ~& Z( O% B" w" u3 D& B* ]
// 条码识别成功事件
, L. i9 z: d: P, L
function onmarked( type, result ) {+ k. C$ K' A% t6 o
var text = '未知: ';
% r( w% @* q6 H
switch(type){
3 M# V/ k" ^' q. A
case plus.barcode.QR:
0 V- ?7 D0 z( ^7 ~6 y
text = 'QR: '; // 二维码
# Z6 B8 |$ _+ Q4 {+ l6 F& }
break;+ d; l) ^2 p3 C! a+ A
case plus.barcode.EAN13:* m+ F o% a# X/ \1 Z% {7 [ q- f" r
text = 'EAN13: ';# `' \& R4 r7 C. \' A2 z" X: \! S4 w0 R
break;
# L0 u) v% c! O% T! Z0 T
case plus.barcode.EAN8:
9 @3 s2 G/ z9 }: E0 m+ S3 h0 p
text = 'EAN8: ';8 C- {/ r4 S B
break;* X) D( {" I% z: x$ T) q
}
; @- b# y7 \ E' E {$ c" R! V
alert( text+result );6 O X% K. I% D# Z* W2 f
}. Z" |+ |7 h' _+ K( ~
// 创建扫描控件9 _( }% |+ V# ?, R+ M: J
function startRecognize() {
+ {! s7 ]" G: ^$ y
scan = new plus.barcode.Barcode('bcid');
) S% X$ `# S( O6 M( V! _# `9 ^
scan.onmarked = onmarked; - Q' T, O- ^' X* Z9 I
}( A& Y E, b: K/ o; A" e
// 开始扫描
0 r% ?4 x2 H' U) v9 X
document.getElementById("startScan").addEventListener('tap',function(){
& W6 U9 _2 c3 _, ?9 M
startRecognize();
+ p3 `* U/ c ?/ y
scan.start();6 m) L! ^3 D& N
})
5 {1 }$ W- |% V; S3 T8 H
// 取消扫描0 O. F4 ^0 c6 H
document.getElementById("cancelScan").addEventListener('tap',function(){+ D+ Z! q% e- _6 }0 ?
startRecognize();; G9 }+ _2 E4 l4 G* i5 ^) H
scan.cancel();
$ Y7 \" W5 Y; i3 S% g- L5 b; ]& a
}), Z2 c2 L- S0 A( C
// 开启和关闭闪光灯0 `$ s$ \5 C# W6 R/ m. z
document.getElementById("setFlash").addEventListener('tap',function(){
5 U) e0 R5 V$ }, L" `2 n
startRecognize();- o! X/ X- w9 X) O$ M, k+ ?/ k- x6 S
isOpen = !isOpen;; l" L$ s# F5 a9 W
if(isOpen){
2 m8 m( ]) K4 g/ X5 @
scan.setFlash(true);& J6 K, O% T* O5 |8 P0 z- v
}else{9 D& u9 s: f6 [3 ?8 z
scan.setFlash(false);2 ^( y: I( e! I3 e
}0 ^% s- i7 l7 h
})
1 ~' ?3 c9 }0 F: f: R7 l! y
</script>2 _7 i8 S; Y" ^+ K% `

复制代码

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

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

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

浏览过的版块