管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 & |' _7 ?7 c+ N9 r, [9 B# Y
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
5 Y) X. v: Q& K N! c8 [9 Q' D《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
5 }6 D& Y6 N$ _- ?《【iOS】CoreImage原生二维码生成(一)》
/ }! ~8 D5 y0 R《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
+ x! g+ u, O0 K7 ^) T3 {在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 * c0 \) f. d5 _* Z0 A
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 " t: L. Q) n" L$ o9 b6 n
直接上代码,注释都在代码里面了。. s5 _0 G: F! _( B. @ J$ {* f
0 W: f W; K1 ? \# T+ s
- <body >
; T% Y. j0 G4 o+ O; i3 H6 j d* t, n - <header class="mui-bar mui-bar-nav white">
, Q7 Y" g' }7 [ - <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>4 w( j4 X) R3 e7 h
- <h1 class="mui-title">二维码扫描</h1>! B* I5 u/ h% E3 h8 S5 l, a$ p3 d$ s& U
- </header>
+ M) Y/ y5 u! E/ l) j+ |, L0 J - <div class="mui-content">" t+ E w3 A+ E3 C/ A, f
- <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>( M5 F3 N d& A0 I- k+ r6 [
- <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>1 P$ T# L- o) `: g H! ?5 Y1 V- ]
- <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
& [+ Q( m8 ^. W, f - <div id= "bcid"></div>$ `; `+ a" H' ^, o4 u
- </div>5 ]+ s# i" S) A* L, V; O( V% _- ~
- </body>) ~- y* S2 V0 Q6 _1 E" i
- <script>3 v. s3 L c0 ~, R- w: }
- mui.init({" n+ S! T7 t( y: _7 ~+ \4 H
- swipeBack:true //启用右滑关闭功能
. x+ |/ Z" C/ C/ E - });4 h+ R4 f3 `1 g0 t, b
- var scan = null;
3 B! U8 ^$ S& H/ D( p$ Z - var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
* Z( S4 \2 e5 l0 r! L8 H/ A - // 条码识别成功事件
; E: r* W" D0 p - function onmarked( type, result ) {7 |' n4 J/ x: \" ?2 R
- var text = '未知: ';0 m0 e. F4 ~2 [3 b
- switch(type){
- F( C5 h. n* U, D6 ?# E4 Y - case plus.barcode.QR:! N$ w" n) c* i7 J. G! X
- text = 'QR: '; // 二维码
. b' C( T w9 ^ {0 D - break;
5 c/ g) C2 h3 M - case plus.barcode.EAN13:
5 S- D1 m/ K5 u( u( h - text = 'EAN13: ';
% ]' @( M/ y1 g7 S - break;
/ Y, y4 i8 U$ r4 i7 V1 v - case plus.barcode.EAN8:
: ?/ x$ `( \0 J, i - text = 'EAN8: ';
" V; y6 F" @1 t* x - break;
j. V! d. G% P# s; b, ] - }
) K- U" D! H% w; Y7 B8 b+ u9 F - alert( text+result );) f# R& _3 q# I: M4 I
- }' }- d: h/ S. {4 Q& ~) V
- // 创建扫描控件
: j! y+ X+ H. M$ W - function startRecognize() {5 M4 `4 @( k) q( M9 P; g1 M- i7 N- d
- scan = new plus.barcode.Barcode('bcid');1 r" `" R6 q* r7 T$ V/ K
- scan.onmarked = onmarked; 9 c& Z- O |. c2 b
- }
$ ]6 p% J& H3 X$ ?5 _& y! K - // 开始扫描
5 e4 p! ]: l+ `( B! M8 ] - document.getElementById("startScan").addEventListener('tap',function(){, u3 Y3 v9 Z: E' t9 X2 ^
- startRecognize();( ?+ q5 x! N7 c. ~& F6 _9 e3 E8 g
- scan.start();& b) ?& n* f% U! i/ G% l6 D. Z
- })' e1 X+ h/ Z) ^
- // 取消扫描
+ U- c# R) B; M2 S, s d/ H8 r# ? - document.getElementById("cancelScan").addEventListener('tap',function(){6 I c" r+ g9 N M% Z; [! B# }
- startRecognize();
3 s3 R& E2 J, O% q3 s8 n8 U* h - scan.cancel();
2 @" D. B# D6 Y% L+ Z! o- J - })$ G N0 u- _5 A# {, \
- // 开启和关闭闪光灯
0 C2 S. b s) {9 } V - document.getElementById("setFlash").addEventListener('tap',function(){, F0 ]# z# F7 i" }, V$ D
- startRecognize();
* v1 R7 I5 P; X4 Y3 i8 ? - isOpen = !isOpen;; ?, k# E6 r7 r/ ~% E T5 [
- if(isOpen){ e2 n2 Q- Y2 U, J
- scan.setFlash(true);
# F: p; \5 a3 H+ z - }else{- o2 M$ r6 f1 U7 X
- scan.setFlash(false);
+ U8 j# h. ~2 W5 q, M/ f* `- C - }; E) a; U, T8 A* N" U! O
- })" ^4 R0 m& g' \0 z( d
- </script>
" m: N9 F% g$ Q
复制代码
g' n& ~0 ~, I* g8 F- T效果图什么的就不上了,和前面提到的文章中的效果图基本一样。; R2 T" g5 e& a8 q0 z! T& r
7 Y( @) u! Z7 C5 h- C
|
|