管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 9 }6 g) A; j& O8 T0 C5 g
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: : o' k& f% ^% V1 w: I
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 / A" v* c, P6 |0 p! [9 d
《【iOS】CoreImage原生二维码生成(一)》 / l: z6 K0 O- i! E% t0 h
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 - E' l% [0 ]4 ?5 Q, ~
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 8 l( y, t" Y- V- x
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 % m3 b7 [7 ]3 R. |2 b6 \
直接上代码,注释都在代码里面了。- k( i2 L. {6 b+ d
: Y- l- c) @6 O4 ^$ B1 E7 F0 {
- <body >
) B* {- ?) |7 Q4 E2 Q$ e9 s4 r - <header class="mui-bar mui-bar-nav white">5 c% I& i: ]( x `6 H9 j
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
; x. J7 |, s4 g! r* p - <h1 class="mui-title">二维码扫描</h1>
% ?9 Q! Y9 D j5 N$ B3 S - </header>* o3 |$ H6 k* R e8 k
- <div class="mui-content">
`- `* U0 _6 E: U- X - <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( }8 e& }0 X1 e+ a) P' v
- <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
) J* U$ Q- Y) q% k5 a; H# e - <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>) }1 J/ H4 v* a7 Y
- <div id= "bcid"></div>
1 u! e$ D: a& k$ Q. o4 J - </div>
- ?0 L/ k8 _, H0 A' d I+ v# f6 Z, p - </body>
3 i# b6 X6 q1 S6 h2 M( {% h - <script>6 ^/ s! @& Y! t' p% k$ ]4 i( ]
- mui.init({
$ ]( z4 c8 }8 ^3 e - swipeBack:true //启用右滑关闭功能1 R+ f3 T) ]# T' z$ r1 j
- });
1 S: o, n" Y! Z - var scan = null;2 S$ M3 ], d& N7 [% m
- var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭" i$ T ?5 W& H& v
- // 条码识别成功事件7 y# b; C. x6 B8 c' X
- function onmarked( type, result ) {+ V+ j5 V( {# E% l8 S8 [: @" H
- var text = '未知: ';/ @" B6 q* a" D: Y0 k
- switch(type){; T+ k% H/ U. [, W
- case plus.barcode.QR:+ A+ w3 \/ S) M9 }) J2 @
- text = 'QR: '; // 二维码
" C( X# l# B, g$ q) p. h: M" S( h1 [- n - break;5 f) {: t! P: K# c( L7 b9 v
- case plus.barcode.EAN13:
& Z: Y& A' l4 E, K% j1 i! c - text = 'EAN13: ';* N& ]; E. b) Q% m4 [4 V
- break;; W0 Q; F% y( v4 v! {) q
- case plus.barcode.EAN8:
, l K' J0 M* K' d. y2 ^( Y3 p, R - text = 'EAN8: ';0 j ]( W* |, c! r
- break;$ m# m0 U" ~2 v9 y/ r3 W4 p
- }
: H% R9 K9 _% G4 o - alert( text+result );% o+ K7 p# w& ~8 e
- }
) Z: }5 v( @" R! |1 q - // 创建扫描控件. D" G# g( L+ q% F8 d
- function startRecognize() {4 ?+ f. q8 B! _3 r; ?
- scan = new plus.barcode.Barcode('bcid');% q) E6 ?2 x5 H
- scan.onmarked = onmarked;
# e5 K; N. `6 e6 R( E( K6 r% M - }
4 `8 S( B7 w0 c) `/ o7 k" t6 [4 z$ H - // 开始扫描
6 b! D: }/ K( E1 n. J' n: B - document.getElementById("startScan").addEventListener('tap',function(){
& v* ~: c) n' y - startRecognize();
5 } m3 v9 t- N% P. A - scan.start();, ?1 v0 |# X6 D( R7 b
- })
5 ]; N0 z) x8 @0 P( ]( \' c% |% w - // 取消扫描
& s6 i$ F; @3 Q - document.getElementById("cancelScan").addEventListener('tap',function(){0 L% ^3 y- ~) h6 s' E9 e$ ?
- startRecognize();
$ L: d& U! Z, u# \: i& e - scan.cancel();
5 q( F/ k' g( y" [! }- w - })
5 w3 J2 e+ D9 t. P) Q3 |9 | - // 开启和关闭闪光灯
' b! i# W/ Z w3 }$ l1 y - document.getElementById("setFlash").addEventListener('tap',function(){) ? W* B: I7 Q1 N
- startRecognize(); A& E m5 p* f9 A' Z: L( W" r
- isOpen = !isOpen;
" V5 v2 Y- a3 p; F& L; @ - if(isOpen){8 \- n/ O5 P# O; N2 b% A2 A' f. `* X4 F
- scan.setFlash(true);
/ `0 i& O) U( w4 d6 H6 b - }else{
. G8 B6 }1 t( Y% u% _9 _9 Q) { - scan.setFlash(false);
, T1 l% W; S& v' Z; R - }
% J1 y: C9 \$ C, ?( T - })
! c; ]1 s9 k: |/ C8 c; E6 A4 ~ - </script>( `5 d# h2 O O0 E* h. y; U3 h& `
复制代码 , y0 p2 j* h: w* y8 P. H3 P: j
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。# l! j0 P. b* s: }2 X0 J
0 A9 E- y# @3 n |
|