cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
3 p2 M+ Q1 |! G$ I5 p+ D; F3 v以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： 6 {) z' n; C9 o7 s; G
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
0 K5 j: H( W9 y) t: J: v《【iOS】CoreImage原生二维码生成（一）》 8 o+ f' w: d; x
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
2 f9 o! a  e* r3 T- h. q在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 * t: M* t2 x/ x
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
$ |% G7 h: D' Q+ o" `6 K直接上代码，注释都在代码里面了。( A; D- ^. H& x& C9 _: d- Y( ^
: y/ v8 B& S- T5 R! Z9 o6 S) A
  1. <body >
    2 g6 Y& ?! C+ E/ q
  2.     <header class="mui-bar mui-bar-nav white">
    6 e: F) l: N9 |" P0 t' _2 B) s: Y
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>! n* M1 a) _& N* }4 `6 j
  4.         <h1 class="mui-title">二维码扫描</h1>( v' ?/ U+ @4 j3 t8 q; ]
  5.     </header>9 r" i* l+ Y' X  h3 u3 |3 C
  6.     <div class="mui-content">
    1 Z# u& x  W, y+ C4 Z3 [; M
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    8 Y8 t4 ^* G3 w/ p4 {0 Z0 l0 t8 j
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    8 {5 k) S% h; p$ g2 g
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    ( i1 ~+ A+ k: E3 Q0 d1 T6 D
  10.         <div id= "bcid"></div>; }% C* ?% {5 S
  11.     </div>
    6 D4 y0 E; ?& X  ^) [$ E  s
  12. </body>
    - `4 V+ m/ b: {) B
  13. <script>8 E/ i; q- ]  ^2 Z" _: f# G
  14.     mui.init({' ?* x7 y' Z( M
  15.         swipeBack:true //启用右滑关闭功能. c, H" D0 M' b+ J$ o
  16.     });+ a+ Q) @4 E# U$ @; T
  17.     var scan = null;) l1 F2 J' w5 r2 U' n+ s1 P/ }
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭  j  T/ q) L; L; {/ v# ~
  19.     // 条码识别成功事件4 x( x% C1 H/ o! F
  20.     function onmarked( type, result ) {6 r* n) Z$ i. N. f, G# o
  21.         var text = '未知: ';
    6 y: b+ E$ ^! `8 L, D( a
  22.         switch(type){" R" ~6 e$ Y/ Y' m1 |' T
  23.             case plus.barcode.QR:1 V# Q; U8 L6 _, u: H5 q
  24.             text = 'QR: '; // 二维码. W; c2 z( H* Z$ g. g- h( \% d
  25.             break;
    " N  m( Y9 z, A4 ?6 j2 E- [
  26.             case plus.barcode.EAN13:
    & O' q$ M" i% }4 x/ q
  27.             text = 'EAN13: ';5 b. C% D9 O; F- a7 k' r3 d: K1 ^
  28.             break;  t  ?- A, t# |% C5 o! w: u
  29.             case plus.barcode.EAN8:
    + ^1 r% C+ z% r9 C4 }
  30.             text = 'EAN8: ';
    , O& u! O; n' X" Q% O. c
  31.             break;
    2 X1 j7 g. }5 b6 P
  32.         }
    ) i3 g/ w' {9 h3 z5 D3 O2 V6 ~" s
  33.         alert( text+result );
    6 m6 F' }$ ^; H# k6 o
  34.     }
    1 E% {' u6 n$ G
  35.     // 创建扫描控件
    $ N% H8 ]' y( `3 V- t9 R9 T
  36.     function startRecognize() {5 ?3 ]8 i6 R+ p2 n# m2 O
  37.         scan = new plus.barcode.Barcode('bcid');; M; h7 M- A- L
  38.         scan.onmarked = onmarked;
    + H6 E) J4 \9 X/ ~- H' L9 f' h
  39.     }
    ' }- e4 |3 h/ d; l# H( K
  40.     // 开始扫描
    3 `; _9 Z6 e* w9 L/ y+ f
  41.     document.getElementById("startScan").addEventListener('tap',function(){1 ^2 Y" _  G- M3 K9 A
  42.         startRecognize();6 I  m3 V( y6 S3 k' v
  43.         scan.start();
    ) B* _& T8 _8 {9 t
  44.     })" e) {% ^! u1 m8 _! F! B/ g8 h
  45.     // 取消扫描
    ! I3 s0 j) y2 `* R) v! Q
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){- p4 b0 `1 k6 R1 j6 Z
  47.         startRecognize();
    1 s& b+ H4 ^* I# t
  48.         scan.cancel();$ c' U- `0 _( ^- p
  49.     })
    3 T" `' `" V. u. [, h9 I
  50.     //  开启和关闭闪光灯1 J' }% U' E- P, e
  51.     document.getElementById("setFlash").addEventListener('tap',function(){7 F( t; V- q# o# l
  52.         startRecognize();% c: A2 }* M; m; W, I/ y0 S9 `
  53.         isOpen = !isOpen;
    ; D4 m4 h2 u  J6 @2 o& M3 D# Y1 X
  54.         if(isOpen){
    ( Y+ m4 d1 V) O/ w( a' L2 p
  55.             scan.setFlash(true);
    4 n' E7 H4 ]: ?
  56.         }else{! m: }$ f8 a2 B; W" C
  57.             scan.setFlash(false);
    ! f% k9 h1 n- U2 o, ~* s2 b
  58.         }
    + J, f& g1 M+ n" e
  59.     })
    : ?; T  q. n2 y/ ~, I
  60. </script>  W2 i* x, R) [+ z# Z3 |
复制代码
) T) D8 x* g- Y* `+ ]' w9 P$ h& a
效果图什么的就不上了，和前面提到的文章中的效果图基本一样。7 q" R8 M3 C; E! r

, I- z3 u. a( b5 k: _! a9 H



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2