管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
9 n6 [2 q( m9 k7 V7 ~以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: 7 ~3 L$ X$ [, {% R
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
& {4 H, G5 Y+ o2 b" @( G5 c《【iOS】CoreImage原生二维码生成(一)》 ) E9 S8 o3 H7 _+ F4 m( \1 {) Z) D2 b
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 + K u" x" l1 n" y2 x# g
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
& J) Q) n9 a1 @9 ^. q6 G原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 & r9 h5 r" K% _
直接上代码,注释都在代码里面了。; s$ i3 U* z& S, y# ^+ q* f
7 e! F, L6 c% i
- <body >: R) O( I' j" g! d
- <header class="mui-bar mui-bar-nav white">
+ j& [# J, U% p% F9 [; n$ s - <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>% g: @/ S, B+ N
- <h1 class="mui-title">二维码扫描</h1>. C1 w0 Y3 w3 e1 B8 d7 O f4 ?
- </header>
& X, x; ?* l! C( N - <div class="mui-content">
, N% ~: }; S" H4 I$ _ - <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>8 s' G% u2 ?1 G0 k" o S% v. G& Z
- <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>( Q4 J' J: s$ E. C: T& p
- <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>! f/ ~# ~, _* J6 a6 [5 F1 n! f) D
- <div id= "bcid"></div>
" A- V7 L' X0 |; t- X w/ Q/ a( q - </div>
4 x* q0 }3 p& }! j - </body>
4 H/ r2 s7 J+ j# ]% m% ^% T - <script>
. x5 e5 `- l8 ]5 @. u: c5 U, Z0 m - mui.init({* d T0 ]1 w/ T8 s$ N
- swipeBack:true //启用右滑关闭功能8 n- M% B1 W/ e- S
- });
7 v4 F4 H; W& o- q6 V - var scan = null;
; \8 K. C3 Y/ |0 o6 t* W+ p - var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
d0 R* r; i, d - // 条码识别成功事件
6 m' @" d( V5 J$ q. C* i' } - function onmarked( type, result ) {0 i- N0 j( d, l2 P) g+ S
- var text = '未知: ';
6 W9 x# f8 X5 ^1 }2 U: j" X - switch(type){6 r; C7 F8 y e3 B
- case plus.barcode.QR:5 |3 E7 \# U, y J) @
- text = 'QR: '; // 二维码
5 [$ [5 T2 p7 d F - break;
9 p- Z8 @; T9 Z4 h" l x- i - case plus.barcode.EAN13:8 }& c* [* J; K: o8 ]; j J R
- text = 'EAN13: ';
) n3 ~' Y% ^; [# @! z6 ~ - break;$ k( V+ k1 F; I5 `+ Y" P: |
- case plus.barcode.EAN8:# s# D; h$ l8 a: b! x9 W
- text = 'EAN8: ';
5 @3 K. H5 v2 Z2 O; D2 g - break;
, b+ M: U, [: N+ x - }+ g; f7 B: ]" Q) r4 V9 o
- alert( text+result );
- n0 i9 L% M* p - }/ |$ g4 d. G* t
- // 创建扫描控件
! i0 Y- [0 Z1 Q R2 { - function startRecognize() {0 ?! K4 ?7 @5 S
- scan = new plus.barcode.Barcode('bcid');
& y$ s; L8 r8 H% M4 ^/ K }' i - scan.onmarked = onmarked; 4 `0 _0 J, d- z4 t0 h4 T
- }$ m; F2 s; Z% D7 `
- // 开始扫描3 b- z* f" }5 N! S
- document.getElementById("startScan").addEventListener('tap',function(){
8 p0 y8 e _& S! p' Y( O$ f0 [: Z - startRecognize();9 U3 P# b+ W+ \
- scan.start();# L! k1 H) m v6 r
- })
8 Q h2 j/ O* o; e. q - // 取消扫描; o& I, f1 }! |& F
- document.getElementById("cancelScan").addEventListener('tap',function(){9 T5 U4 ~) o; y6 `) `1 E
- startRecognize();
9 u# _$ s: g- D+ T/ e. } - scan.cancel();7 H6 W- M3 h( ]" R: ^( O6 I
- })8 r: v2 l' z6 Q; Q$ F6 i
- // 开启和关闭闪光灯& V6 I& \: @! `. V5 }* l
- document.getElementById("setFlash").addEventListener('tap',function(){
" h. m" m; F# r- { - startRecognize();
/ g2 f* n2 \% h - isOpen = !isOpen;4 h% L7 b! \+ u5 g2 Y8 d
- if(isOpen){& d+ i3 E1 A/ p E
- scan.setFlash(true);
; @$ H. V5 n$ p6 |* R" T# w! i [# C. n - }else{3 i. ?! n3 t7 m7 K) e
- scan.setFlash(false);
4 Q7 x& ~# u: P" d7 ~ - }9 u( u/ o6 m/ \/ u
- })
5 Z% T, E# F5 A8 E5 u# _ - </script>
& b7 `9 E/ p( U. M
复制代码
) S0 t2 Y! Z- A/ }3 F# b+ |效果图什么的就不上了,和前面提到的文章中的效果图基本一样。/ v2 X# r) Z0 }0 e& n
3 Y9 I3 r! M4 g* F |
|