cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。 / ]4 m$ d# r; S: J- S5 h  n
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： 5 m( a- [6 l% [% f% ^6 m; Y
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
+ _0 [4 B! t1 p+ n8 t* I7 o* Z《【iOS】CoreImage原生二维码生成（一）》 4 ~' b( {% M; X( N: x" j8 H, [
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》 & i: P8 k  y" `
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 $ y/ E# @! }% }1 Y
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。 ' a$ v: c" M: r7 l! n1 Z7 Z
直接上代码，注释都在代码里面了。
6 r( t5 H$ `0 Y. _- _/ E' W0 u% K8 O/ B. f2 b
  1. <body >3 H, P' G( A/ m! w: S$ d3 o
  2.     <header class="mui-bar mui-bar-nav white">& B- N- [0 {' }/ n6 E% S( B
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    9 b2 n2 L$ {; |, q8 {6 |' g( v
  4.         <h1 class="mui-title">二维码扫描</h1>, W3 l' {4 L- M7 I
  5.     </header>
    7 y* F/ c/ S, e& b2 I5 r; H
  6.     <div class="mui-content">
    " e; z  y6 ?, L1 p4 {- f
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 e0 \% Z% Q, j. z$ m  J/ l
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    / T1 L* K! Q+ M9 O% c, f  U7 l/ p
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    2 L* }+ |1 L: J! g% a
  10.         <div id= "bcid"></div>4 P1 Q& B3 C, c+ ?
  11.     </div>) ]7 o% i9 P6 _$ c
  12. </body>
    : b% P5 r% o, r7 a& a
  13. <script>/ b- {. x0 _) p3 k% o3 P' t3 I
  14.     mui.init({
    ( z% F& @  l3 ]- f! U$ K
  15.         swipeBack:true //启用右滑关闭功能
    & H9 b2 E" k# I2 W) J- ~' m5 G: T( z
  16.     });
    $ N  f* v9 p4 f! t2 |1 H$ `2 M; t. N
  17.     var scan = null;! p, ?& S0 l5 t
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    " R! v3 C8 S& H
  19.     // 条码识别成功事件
    ; I; u' j" ~9 d& m9 @3 n3 w
  20.     function onmarked( type, result ) {3 h0 b& `: w6 x8 G) c' E
  21.         var text = '未知: ';% o2 \6 R. d2 k  c( D/ R
  22.         switch(type){! @# Z. P: Y7 v  b! V" y
  23.             case plus.barcode.QR:
    $ a- O  L( |4 t1 {: {8 `
  24.             text = 'QR: '; // 二维码
    + l, v6 l% U( J% _- U2 y2 a- B8 u+ w
  25.             break;
    & R% j1 T2 Z: L2 F$ x& d
  26.             case plus.barcode.EAN13:, h1 l% ^* U; A2 s( s( ?7 m8 R0 R
  27.             text = 'EAN13: ';
    3 }7 y4 E- E; P& z" Q
  28.             break;
    9 B( V6 z' B( Z9 |
  29.             case plus.barcode.EAN8:# A$ r- N- h' {
  30.             text = 'EAN8: ';
    0 Z9 r- K: F0 t) E) G
  31.             break;# z: B. j2 w. d5 k% Y0 J* A) ~
  32.         }
    6 Q% R! O; r# O" \/ j; p( T
  33.         alert( text+result );
    # n1 S+ v) s$ V- }4 X- Q2 t3 P
  34.     }7 o$ E: m6 a8 q! I7 u
  35.     // 创建扫描控件
    ! T* y0 L0 l) d) _- a- F. c6 z- y8 J( ~
  36.     function startRecognize() {( }3 t& K/ o: m% B% t( [' }+ ^: u
  37.         scan = new plus.barcode.Barcode('bcid');
    ; w$ q& b5 T. o3 d0 a/ [" r* E
  38.         scan.onmarked = onmarked;
    ! Z8 x  \- [. z- A) I8 o  v
  39.     }) U( n/ C1 W% p
  40.     // 开始扫描# L* m( j; f7 l9 E9 g) l
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    4 s4 v/ X% A+ e# a1 ~9 r7 O3 }- V
  42.         startRecognize();6 `7 q0 x" v# q; ]" O0 y
  43.         scan.start();5 Q2 L- d3 V+ c! [3 r; W* O" x
  44.     })
    % x5 l# D3 f9 r6 @+ i5 y
  45.     // 取消扫描5 o( U. D! d' B4 _. ?4 c) k4 K7 |9 u
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    # g* `/ V: v( B$ T2 R
  47.         startRecognize();  ~5 d7 D" S$ J  x% V; `
  48.         scan.cancel();
    ( }5 G; C. d$ S! H) F6 j& P, i
  49.     })0 P8 T9 Y& |' i) z
  50.     //  开启和关闭闪光灯4 \$ _2 V$ ~* l3 ^
  51.     document.getElementById("setFlash").addEventListener('tap',function(){; V; s. A, `( H/ s
  52.         startRecognize();
    7 W% _6 P( j& @8 z
  53.         isOpen = !isOpen;$ m. O" M! ^( x' Y: R8 ^  h0 B
  54.         if(isOpen){
    . j1 w' r) Q; M9 [8 z
  55.             scan.setFlash(true);
    2 P* }$ [8 ]- v. @+ t
  56.         }else{
    , @& ?3 o. _1 g# Q9 F: u
  57.             scan.setFlash(false);3 k) i$ ?. T5 y( ~
  58.         }
    ! Z& M) ~) L& E6 L5 E' d+ x
  59.     })7 f0 G! Q& b, ~5 b$ ^% |
  60. </script>. p8 ^2 y0 C/ S8 T& c; d4 Y
复制代码

0 Z& W! C) J4 x效果图什么的就不上了，和前面提到的文章中的效果图基本一样。3 Y( P& z7 _" b1 R" t! `7 Z

- P! ]. W4 T8 u7 W# M- Z) P, ^



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