管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
+ Q4 G" W- n4 x- V: L以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
' E/ |7 L6 Z0 J; Y! K% F《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
. W( `9 B. U# B# g3 F《【iOS】CoreImage原生二维码生成(一)》 & @! e& S7 S% @" b
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 ( j$ S. p2 p1 R3 C3 L/ o
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 ' J2 u6 w5 `) L4 L5 g
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 & m4 R, Z+ b2 _0 K4 W# N$ q
直接上代码,注释都在代码里面了。8 U1 Z; v3 ~. J5 U
9 R( h' n- J: H& v, H. v6 u
- <body >8 ]1 I+ e- d, y5 Q& E; c. J
- <header class="mui-bar mui-bar-nav white">
( m/ H5 {+ i7 T4 v( | - <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>7 Y3 z' L6 }, |- _/ D, b% Q ~
- <h1 class="mui-title">二维码扫描</h1>
; `5 U; z/ g6 e; j( s - </header>
( T( k& M# G6 h2 k3 v8 }8 Q+ b - <div class="mui-content">5 V' X3 {( p- \8 n' S( f
- <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
, C4 X2 \! y* V - <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
( P* v, `1 z ]7 E: l2 l - <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
5 I) i% ~( c. y. D: t! W2 ` - <div id= "bcid"></div>
2 H) y7 E9 R9 ^/ E' f# { - </div>* A6 f' u6 Q* ]+ w
- </body>
3 b% O* `# B2 ~( U, z7 b - <script>
8 r/ `! i0 n. g* ~5 s. q% A0 y1 ` - mui.init({# N# w6 k4 O7 |! Q* W5 U5 y- r
- swipeBack:true //启用右滑关闭功能
: ?2 E9 k2 |' z' P. ^ - });: w( E1 B8 `# g
- var scan = null;
; m! X: T. C/ p" {! j& E) }, Z - var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 ?% y: w1 Y6 o g/ B
- // 条码识别成功事件2 Y K; [/ h7 o0 t9 i' y; h3 e
- function onmarked( type, result ) { ]2 }3 H4 a5 `! s( B p
- var text = '未知: ';
! t3 j6 b& `7 M7 W, L6 ~ - switch(type){, M3 `& f9 O/ T$ g3 |
- case plus.barcode.QR:
2 G1 V* N" K! V# W/ l% | - text = 'QR: '; // 二维码
* g' u9 x' v5 B& _) x$ ~& o - break;
2 b- S1 v( l2 c9 j# f/ p! T - case plus.barcode.EAN13:2 e! L B; K }
- text = 'EAN13: ';
& Y% S* n4 g/ {4 G8 ]+ `+ Y6 ] - break;5 W" r7 i- r" a! }8 c q
- case plus.barcode.EAN8:' x5 O/ c6 H6 Y _1 @
- text = 'EAN8: ';
7 x3 p3 s1 q' g* {2 n8 h - break;! f4 f% c0 s! p$ P
- }
! ?* j* U7 z9 A* A6 h& M - alert( text+result );4 ^" X6 i/ m1 T5 C4 u( L
- }' t# ]& ]! \* h& y
- // 创建扫描控件
% L; h4 `; w g! k4 D4 `2 M9 Z - function startRecognize() {
" y; b( A3 F5 ?5 ]# l- E - scan = new plus.barcode.Barcode('bcid');
. w$ K( J+ L+ ?* } V. }2 f2 U1 L - scan.onmarked = onmarked;
+ U u* U0 g4 b - }
( b6 O2 Z, N3 Q* g$ B' T0 b - // 开始扫描
3 B1 o1 F+ ~# v# K1 p+ R - document.getElementById("startScan").addEventListener('tap',function(){
' T: P! h- j7 X& z - startRecognize();
5 F( T" v6 o5 T; ?. E - scan.start();# K( W, M0 m% \7 { f
- })
0 \5 p' U! o0 ]3 N- {+ s8 L3 m0 P - // 取消扫描8 z* k+ E0 o) \' T3 l
- document.getElementById("cancelScan").addEventListener('tap',function(){1 S/ L/ N/ w/ K& Q! r, ~
- startRecognize();. N% I0 l- G$ F
- scan.cancel();8 e+ O m' Q- F. G: ?! V4 e8 M j
- })( D; b9 o5 A1 J a3 D: c! i
- // 开启和关闭闪光灯4 x$ i" O9 y, ^3 T; o" B5 V: S2 D9 J
- document.getElementById("setFlash").addEventListener('tap',function(){
# Q( A3 C8 T2 { k& e" _ - startRecognize();
; v- ^6 ~9 L+ l3 K0 H - isOpen = !isOpen;3 x+ }! t7 |! f3 {! p9 r/ A9 M
- if(isOpen){
: Q. q0 ]2 a4 ~ j1 K - scan.setFlash(true);
3 h- H$ N# Z, G' L( ~) X - }else{+ b: A: F* r) l
- scan.setFlash(false);, s. w J" v" g. Y/ ?: D) ~
- }
0 I+ Q+ j) {1 [ X9 e - })
5 @1 y# n: b, F6 y/ j - </script>/ H# Q2 @% ?. }3 x( w
复制代码
: y# a2 E" ]# G8 Z4 S效果图什么的就不上了,和前面提到的文章中的效果图基本一样。& p |8 a, k5 t1 q( f3 \
: x9 X. T t8 C5 _% a
|
|