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 >) s5 A% E8 A( Q
<header class="mui-bar mui-bar-nav white">
# V1 R" J. e" K9 I3 F% p- `
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>. C; P8 N+ k4 F8 G$ |$ H# U: }
<h1 class="mui-title">二维码扫描</h1>/ ^" M$ }: K& Q4 \3 W( b% d3 s n
</header>0 D" n6 L. e7 n' R- ], Q
<div class="mui-content">
+ D& v8 K5 U+ {6 B* A' s( a
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( ]- J4 D) o- A* S: p$ L8 D
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>% ?/ @8 }$ u% T
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>7 }1 \% d$ O( X7 _
<div id= "bcid"></div>
) h1 O& K% J' e; }, J8 }; ]
</div>
# K" @- ~; w5 O5 S. `
</body>
5 |/ ]9 m0 X& C1 d) z5 x R
<script>( x; d2 t9 F' D! s9 ]! \
mui.init({; e* g% ]) P$ V; R; F' d
swipeBack:true //启用右滑关闭功能
$ M( x5 Q3 I' W# ] h9 x( E5 A
});
( u. P' Z( `) H2 Q( R
var scan = null;
# q, _2 P9 I3 i6 E% y! E: `
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 u A8 q# [! W( @6 s& v
// 条码识别成功事件* t; [" T9 ~/ r: r5 H- @- k
function onmarked( type, result ) {
s3 A& \# U g" b
var text = '未知: ';
% I: r" ]+ s1 u* Z9 A3 P' e4 @
switch(type){
! l& J5 X( G7 i5 D3 w$ S: s1 J- R
case plus.barcode.QR:0 y+ ~! r, j& M( l9 L$ W
text = 'QR: '; // 二维码
7 O* T+ d) E3 x# O
break;$ G. R1 d$ ~) p' k' m
case plus.barcode.EAN13:
6 n2 O. m) y. K, a1 T. F
text = 'EAN13: ';* } {% S6 k2 z z
break;
; T3 Q* ]- z$ ~! y2 r7 }6 ]4 `9 W$ n6 t
case plus.barcode.EAN8:
1 I/ i$ c7 q7 K
text = 'EAN8: ';! D. L6 D4 j4 b, M* A
break;
* u/ T: V" @1 q9 o
}
* F- k2 M; p* _1 M7 F2 Q0 U; B7 R
alert( text+result );! ]. E0 f; t$ j. x" p
}1 o( j/ T* |0 Z0 v6 X3 G f9 J4 O
// 创建扫描控件
" E, ~, p: H2 ^9 L( a8 I6 E
function startRecognize() {, Z; c4 T$ X& S- e A r+ @
scan = new plus.barcode.Barcode('bcid');
: P9 l4 p6 {% m+ G% D- s
scan.onmarked = onmarked;
9 y* Y8 v; t `0 W9 g
}
8 N, Q2 l Y! f- B& Z7 {! O
// 开始扫描& y& b/ H3 p- f! K2 y1 n7 J% R
document.getElementById("startScan").addEventListener('tap',function(){4 x7 E4 J @8 d' N( I
startRecognize();9 f5 r( v% f: V4 O
scan.start();
! U4 T+ S8 \8 k3 C
})- A, k% F. M4 e @6 ?) [
// 取消扫描& u1 \. v2 C* ^: V! Q5 |+ g$ X0 J
document.getElementById("cancelScan").addEventListener('tap',function(){
3 s! ~( L7 f/ G; N6 ?8 u
startRecognize();/ F$ z7 c5 B7 n% _
scan.cancel();
})! f6 m+ V+ z' H$ W( X
// 开启和关闭闪光灯/ U2 `2 n9 H' o. ^! {
document.getElementById("setFlash").addEventListener('tap',function(){3 m0 X) e% s; T# Y8 N- ~
startRecognize();
! y' i' }: Z1 Q {( q/ I, s
isOpen = !isOpen;
' z. P/ q* M! S5 ^2 |7 ~
if(isOpen){
% T: W% f# z7 s9 A" I( b- R; C' U
scan.setFlash(true);) d8 @; A' |1 R, S/ |% S5 H& g
}else{: a% [/ ~+ i8 @% v; W. U" f
scan.setFlash(false);
2 p+ l* r" ]9 F; a& m& [2 F
}
1 ~: k+ t$ c8 ^2 o# T$ ~
})8 ]9 X& Q' u; p6 ]- [
</script>* F+ p, m' _0 t; ~" e

复制代码

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

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

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

浏览过的版块