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 H, W- E8 ]5 j' \
<header class="mui-bar mui-bar-nav white">
|+ N, }- Z: W; H; T* O$ G
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>+ l! U. b& X- R, a: ^
<h1 class="mui-title">二维码扫描</h1>5 z+ D2 Y1 \. k1 P8 Z$ O. s
</header>% A& I5 J, ]2 f. k
<div class="mui-content">- s9 p% W% K2 M Q h/ K
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
0 Z$ z; {/ Z' p
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>1 M& y8 K; J4 n
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>2 ^- P2 z5 ?' f4 G) B' F* r5 U6 a
<div id= "bcid"></div>' I% u: D) A9 T& W% Q
</div>( m2 K7 T% @, D8 u
</body>
5 M( W" {% v* K1 W$ L; K
<script>+ h! w |# V1 D5 [8 r' o/ M8 _
mui.init({) r# ~8 D; C6 J; X' @& z
swipeBack:true //启用右滑关闭功能, x+ @. `/ K9 R2 o
});( v! R( I- o) f q% S$ V5 s ^
var scan = null;
5 T! K6 P6 T7 B. \# M. J. a, ~
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭: l* d- N; H$ j8 `1 G. B: |- W A
// 条码识别成功事件
& u" g( \: {( Q! u
function onmarked( type, result ) {
3 l, @; h7 j# t% E, M) q8 ?, H- k
var text = '未知: ';
: e% N/ r6 ]! v- T
switch(type){
# S2 Z4 x9 H) s6 n
case plus.barcode.QR:
. X. C# G: I( @; G
text = 'QR: '; // 二维码
$ O# v) }5 A5 x" M/ r, h
break;
/ C9 _7 Z9 e( y
case plus.barcode.EAN13:
* `. M, r' b* \" N1 _: ]. U
text = 'EAN13: ';# l t: r' l& _7 \ i
break;( R+ }1 i5 k, K3 X7 @
case plus.barcode.EAN8:1 ^6 Q8 O% d5 ?) }' V# m
text = 'EAN8: ';
9 `+ `. R% D! A
break;9 o* I1 L$ W- F f) e* m: I% V/ G
}
& @4 w7 |- x% ]5 j& V
alert( text+result );
/ Q4 N9 S6 Q6 T9 i
}! { M! o: m' c( F9 D/ J0 ^
// 创建扫描控件* B( P* K+ {0 P$ O8 H, [ n
function startRecognize() {
- j! R2 K# ]/ D; `7 _9 Z; ^) Z
scan = new plus.barcode.Barcode('bcid');
% R5 C+ t u+ t1 p9 ] }
scan.onmarked = onmarked;
: t9 f, ^. O" p# s/ ?
}) v8 D- Q6 s& v9 ?" O
// 开始扫描
+ P- S# }( ^/ I. J. ]
document.getElementById("startScan").addEventListener('tap',function(){8 t, N, d: V. p$ r0 }- {; h% I
startRecognize();+ E: {4 C( k2 N) u5 l
scan.start();% U# E2 M- H% Q
})" v6 A- u {) ^1 ?8 `$ Q- ]
// 取消扫描
! ?+ S8 T! O+ O5 E6 N# V4 d9 I
document.getElementById("cancelScan").addEventListener('tap',function(){
' J3 a/ }$ d! }, C
startRecognize();
1 z; Y6 B" T' v6 ?( K
scan.cancel();$ r) S9 m0 c% d+ ?+ x V: n1 K1 j
})
9 ~6 G9 z6 j% `0 s, {- @( B1 b. M( u
// 开启和关闭闪光灯
+ v e; Y7 J9 d$ e
document.getElementById("setFlash").addEventListener('tap',function(){9 N9 M2 M/ {1 ]- y1 L; a
startRecognize();) s, K6 e' N6 t2 p; k
isOpen = !isOpen;0 g6 z9 {1 [& n9 g' t
if(isOpen){
P$ [- a# K, Z+ j. z: E) t: Z
scan.setFlash(true);; h, w1 f# @$ g( h& p
}else{
, h5 M2 a& s @: q4 Y. }
scan.setFlash(false);
3 |( S% |4 U* N1 ?! B+ J$ i* d
}
( I. ?( Q% ?2 r! f" o
})0 w+ m7 M6 U1 ~( h" j
</script>
( E; y, J1 @' h* z" ~1 Y& I) ~

复制代码

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

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

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