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 >( g0 I6 r& t+ R: O
<header class="mui-bar mui-bar-nav white">( x, ~. l* v/ d7 }& j) E
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>. |- I! c+ Q) X, j: ]7 d
<h1 class="mui-title">二维码扫描</h1>3 A" c4 ?# ~; d5 X% Z, O9 @
</header>
; f+ Q+ b% X' e. v- O
<div class="mui-content">' y7 u/ D2 y: |
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 ?2 k9 d1 r% n" u( Y& O
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
j8 n( W |7 ?
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>1 t" |) U7 n: e. i+ m, \
<div id= "bcid"></div>
$ b0 G7 i. D h0 v5 p, C
</div>
) z" Y" b/ ?# v2 ~, H4 r( Z
</body>
* d& p! ~) \7 E: b
<script>% g- d" [6 F) a6 g- p" ?
mui.init({8 ^2 g, @: n" D( g+ r
swipeBack:true //启用右滑关闭功能
5 W- @9 [4 ?# Z+ ]2 j3 H9 L! r
});- H9 O5 a" _$ d
var scan = null;. {: R1 w# L2 o2 q/ ?
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
% Q0 I6 a) X( G x
// 条码识别成功事件& C h( J' V' d2 S5 _) [# f
function onmarked( type, result ) {
/ D9 F! x h0 J% ?2 l/ t
var text = '未知: ';
# {$ J5 s# N$ O; k7 z y# F. X- q1 y
switch(type){( ~( H& a( V5 J0 L$ Y2 V
case plus.barcode.QR:
, l) a; [0 r& O+ H! _3 u$ Y
text = 'QR: '; // 二维码# u; \2 c+ V r' P) ]: E
break;7 ?$ R' N) q0 c4 |* |
case plus.barcode.EAN13:; `' V& K; e# E) Q1 p9 f
text = 'EAN13: ';4 q k d9 i8 B7 V3 b( R8 k5 u
break;
& V9 x: e; T: h* }
case plus.barcode.EAN8:% ~2 ~# P5 R' | [/ I
text = 'EAN8: ';& Y# x: y3 u0 p
break;
$ [" g* w, w# k( a
}: T; U+ d8 D4 {$ p( [6 ^. Y
alert( text+result );
4 K* i) W! e2 b+ p. e! V
}% V( R6 y( E; u. _
// 创建扫描控件
4 A& z! ^& k/ a% k! x% `1 z
function startRecognize() {
8 ]9 T! `4 Z( q! ]
scan = new plus.barcode.Barcode('bcid');* L) g% a1 T/ X* n$ ]9 ~& G; t
scan.onmarked = onmarked; 9 Y6 l& J! \0 U1 y2 U# G
}
! V. |. @7 V( {* P
// 开始扫描1 h- M& J1 z' ~6 d8 ?1 b5 N+ A
document.getElementById("startScan").addEventListener('tap',function(){
5 J I# ], W7 N% ~- }8 Y1 b: ^
startRecognize();4 d9 _$ j8 U2 N8 a
scan.start();0 A5 j6 L& G$ s# \ U6 e9 A+ f
})
; x$ z7 S5 R) }8 W2 `) n7 v7 e
// 取消扫描 H, M9 \ w) R
document.getElementById("cancelScan").addEventListener('tap',function(){
3 O* o% q' x; b2 ?
startRecognize();+ L) J* N/ K1 j8 Q
scan.cancel();
& N; r$ C6 N/ \3 K, S# g
})" P7 {8 B f& h% V/ c% r
// 开启和关闭闪光灯+ |5 i4 q/ M2 L6 T; @5 y
document.getElementById("setFlash").addEventListener('tap',function(){
P3 W5 s" r$ E+ f
startRecognize();
8 _7 T' P& v! D7 Z
isOpen = !isOpen;3 f1 B$ d! P. t- @
if(isOpen){8 L! l2 y6 s. d
scan.setFlash(true);
9 C e: _+ t6 [+ }4 e
}else{9 o7 p' a4 t2 q( q
scan.setFlash(false);( c0 w/ s; ?/ N0 A- q W
}; P; i d8 F, J
})
& E J* }$ b B
</script>
% ?$ {7 J5 J* V4 u

复制代码

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

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

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

浏览过的版块