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 >
a0 a% g* T c+ T4 J
<header class="mui-bar mui-bar-nav white">/ x# R0 @' C2 [7 ]* k( ]
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>; o8 K0 |/ N% w* m
<h1 class="mui-title">二维码扫描</h1>0 f* H5 \& e/ q2 T$ K4 U/ _& ]
</header>) a+ Y" n; Y5 D! t- ?
<div class="mui-content">7 E# B3 I: t3 L( z8 X7 }
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>1 d1 e. F5 q- I; o" [4 g. Y
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
8 Y& h! x+ d4 X( {
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
+ c+ Y6 }1 _2 e+ B, j
<div id= "bcid"></div>8 F- l) ?; X( P. F" O
</div>/ q1 D& J' M, s
</body>
1 `- h5 W. H9 p: o2 j) X2 E7 Z8 ?( A# f
<script>
1 S9 s! }! h1 W- J3 \
mui.init({
) y) p) d6 A5 z
swipeBack:true //启用右滑关闭功能
1 d6 f' F1 _; g9 J E( j% Q( h+ k" r
});' B, `$ d& g+ \& v: M+ |
var scan = null;3 T! ~2 u; w" p) }7 y! G- }8 E
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭) O6 \+ @' e1 b
// 条码识别成功事件
! t3 d# B+ l \" m7 ~" Z+ l
function onmarked( type, result ) {
( R0 p7 d0 ?8 ]* c
var text = '未知: ';: i: n. U) f. ?/ g! O3 p% I
switch(type){
& U @+ A7 K( ]# ^" E, K; `! ]
case plus.barcode.QR:
9 f3 w' J' R- B
text = 'QR: '; // 二维码
' g& b. L m4 D* x( L) B
break;& l4 [8 I9 Q4 t
case plus.barcode.EAN13:
; [. K& ]; p/ p. S" t# d
text = 'EAN13: ';# I# r: T2 e/ c, O% t9 \; c
break;
4 i; r, G/ k" b5 X
case plus.barcode.EAN8:
4 t; ~2 y- H: N; U, H& H1 \. |, L9 b
text = 'EAN8: ';; T, x. _ X: V: L
break;
& j, h* X( `* K' w( a
}9 i2 @$ \- b, j5 w+ [
alert( text+result );
; V [4 C/ ~3 Q, O* d9 t3 B
}. [8 W, n5 o9 I/ }4 x1 m
// 创建扫描控件
) B7 V5 v9 ~6 X3 d& A9 C
function startRecognize() {4 j8 o, p, l# s- J+ ^* Q
scan = new plus.barcode.Barcode('bcid');. `( {$ x& X# |/ p* ?, `! F% S
scan.onmarked = onmarked;
- r8 y2 j: r. G
}
6 T$ q/ E' g! [' R8 J# I: G: P9 _
// 开始扫描
) b# D7 h+ E7 x7 K. x6 O
document.getElementById("startScan").addEventListener('tap',function(){
0 o9 x6 H9 F2 L( m6 z# `* o
startRecognize(); H; e1 M, |2 E7 W7 Z2 i) X
scan.start();
# O+ I( `8 \0 r' p( u6 V U
})
; L( ?+ a1 R) n+ T$ y! m
// 取消扫描7 L/ q, E6 e. `4 s2 v" z& Y. L4 d
document.getElementById("cancelScan").addEventListener('tap',function(){
, V* E: d( F1 F3 z0 x7 D
startRecognize();: e6 j1 W- a S% _) D/ g& {
scan.cancel();. E r4 X w' ^
})7 W+ f( c8 f" r: A( i9 M0 t
// 开启和关闭闪光灯( Q. P1 |) _9 [! S/ s; j! g/ Y
document.getElementById("setFlash").addEventListener('tap',function(){/ m- r: F' _( Z3 P. k8 f* M
startRecognize();& L) l. V8 V$ N7 C* ~
isOpen = !isOpen;
9 g2 k2 }9 B" J" {
if(isOpen){
, M, f% a; j# U
scan.setFlash(true);
3 v& o3 S, d) G* V: Q. d; D! ~$ `+ M
}else{6 h& @; G( Y' G+ I
scan.setFlash(false);
- r5 b5 l' R @% p& E
}
8 j* f+ C5 a8 q$ J# G5 B# |
})
8 s4 t3 I! k D3 x1 k
</script>7 J, F& y7 k( ^

复制代码

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

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

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