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 >: B2 l X9 O4 A% ], ]1 g8 I( P! U
<header class="mui-bar mui-bar-nav white">+ U X0 m" ^' |1 y) k
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
3 B" c, e9 w0 A% k2 j3 v
<h1 class="mui-title">二维码扫描</h1>( l0 X% h. M; k2 t
</header>$ R3 z& |/ i$ T0 L
<div class="mui-content">4 e" J ~8 z. j
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
, Y/ ?# d7 n6 A% k7 L( P3 W; m/ i3 m
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>. x; Y$ v6 N: Y
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>/ N7 W& j! \! S3 \1 f/ z
<div id= "bcid"></div>
4 D& Z& I8 e: S. b
</div>
" r" X( |* Z" p( C0 p3 U
</body>
4 O; O* E! o5 ]; s' W, J! F
<script>7 i7 p0 M% K9 ]% G
mui.init({# [; T* |( h$ @) b/ w* g+ ]
swipeBack:true //启用右滑关闭功能) p2 W: E+ @, ?$ j. m: u
});
5 X: J" h8 t. _9 e V
var scan = null;
! J" J3 C0 Q6 O; V" o
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭" q8 e8 @1 L1 B! j" I
// 条码识别成功事件
- `& R4 b0 Z s; q
function onmarked( type, result ) {
3 I8 w P: P1 F) C
var text = '未知: ';. o. }9 V2 D9 W" a4 ^
switch(type){# K' n% L+ ~1 y9 G( B: y
case plus.barcode.QR:
, o f+ H" |% K
text = 'QR: '; // 二维码4 {. y4 X: v1 f% R4 z
break;
: q# Y; S W5 w
case plus.barcode.EAN13:* j$ [) N. S0 o$ l. a2 z+ G
text = 'EAN13: ';
' ^4 Y3 e, I9 J
break;" J0 E( b1 ?8 F) {7 s
case plus.barcode.EAN8:+ p2 m" O, Z' }* Z/ I* K. x
text = 'EAN8: ';
; |! {! v: t( Q% R0 f/ f# r& \- `6 v! ~
break;
: a- h5 s) x* a8 J
}( B0 i& R" {$ q+ L I
alert( text+result ); D, C7 v8 H' y8 M" @& `
}; V' E# I4 t( _, x, _: O+ U
// 创建扫描控件9 `9 Z+ C4 F* k# o# L6 ]) r
function startRecognize() {
h* w& {1 S( a* s* U
scan = new plus.barcode.Barcode('bcid');+ T# w$ {4 E1 @* f' o1 g
scan.onmarked = onmarked; & O: D. D0 ?3 m+ L* g7 m7 T6 W& Y8 ?5 g( R
}
$ G* t8 C! D' x
// 开始扫描
H2 _6 D( v. ~
document.getElementById("startScan").addEventListener('tap',function(){
& ^$ |, o- E) @$ n& `
startRecognize();2 x4 X; k+ ]: h9 a+ j
scan.start();/ `! v" Q; {" R8 ~" U5 X: e* W5 R
})
& Y2 u& g. m# K. e- h$ o4 J6 N3 B# D
// 取消扫描, R% w1 y9 w% U3 e' q' w
document.getElementById("cancelScan").addEventListener('tap',function(){
; r0 m5 d( L+ u4 J; N
startRecognize();0 ]; o2 ]* b+ P% ^& s$ K
scan.cancel();3 \% [7 q' b ^$ I
})8 Z |0 O5 x8 |2 d$ x# x
// 开启和关闭闪光灯
+ J1 p2 Z- I9 h q# @$ O
document.getElementById("setFlash").addEventListener('tap',function(){3 J2 G" I; r! X7 r- @* G* k5 x
startRecognize();5 V1 n8 A! H- u. O1 D$ S! c* S% O
isOpen = !isOpen;
0 h' h3 C* O4 n: @; N1 q) ^: I' e/ u3 Q
if(isOpen){. ~2 u' L8 K; j6 S8 T& A: R/ ^, M
scan.setFlash(true);0 N: j7 Y1 H. V8 v7 {# E; G
}else{5 _6 }$ S- m/ F2 M
scan.setFlash(false);
4 Q* V0 v7 u) D6 S. n4 W( ?/ f
}
( N+ B( @/ @- _
})
8 k# l( c, c' e7 k; D# M. @
</script>
; i& m) B4 G* j8 t# }

复制代码

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

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

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

浏览过的版块