cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
. w. L$ J  O; U- o& P1 i9 g以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： ; r. v% ]- Q- g( k8 ]
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 ' ]2 t$ }( v. J8 o) k
《【iOS】CoreImage原生二维码生成（一）》
: c- B; U) S1 x6 x+ p《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
4 Q1 J% A# B5 G7 B1 q( W& D8 c在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 & O- ]8 y+ D2 t' {' f) o
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
3 `+ X8 {+ N+ T' T& C直接上代码，注释都在代码里面了。  b# B1 J4 b: H- V) `' y
! D: v( ^6 \: [
  1. <body >" h6 R9 b9 W$ i' J, f" `" J
  2.     <header class="mui-bar mui-bar-nav white">
    " R4 P4 p! Z/ r
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    ; W3 Z! I. v5 k7 k" B3 B
  4.         <h1 class="mui-title">二维码扫描</h1>
    4 `  E# W; [" z1 r
  5.     </header>' n2 j! ?$ R+ X- c' B/ v
  6.     <div class="mui-content">
    - v# Z2 h; [: w9 |
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
      |+ A* r  I" S; N, a
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>$ h' d& r- }* j" g1 w& \2 o* X/ p* r! n3 r6 B
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    5 K8 D8 m' ^, |# M6 l
  10.         <div id= "bcid"></div>
    ! P  @* H# S( A; A5 z. I4 Y
  11.     </div>4 ?& ?$ p6 R# O; G
  12. </body>6 J+ o/ c' Y, Q3 H' {8 Q
  13. <script>8 [0 [3 g9 P+ }
  14.     mui.init({
    0 H$ n0 n  c" ?6 t, M6 Q' e  R- ~
  15.         swipeBack:true //启用右滑关闭功能, c: H3 G% G8 \# I9 m$ `
  16.     });% n/ Y( S2 H& d) S
  17.     var scan = null;7 p! `  [9 ]6 z' _1 j
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    " t7 x& g/ ^% D( w
  19.     // 条码识别成功事件0 c6 O/ ~0 `, F3 r2 N& w
  20.     function onmarked( type, result ) {7 P" O' j% S) K1 ]- U4 x5 N7 a
  21.         var text = '未知: ';7 M' q5 ~" r  b/ r% s
  22.         switch(type){
    2 f& c3 }- r  A
  23.             case plus.barcode.QR:
    1 v6 n! o- ]' V' c  ]% b1 Y5 K. f
  24.             text = 'QR: '; // 二维码
    5 v* g! _' `9 s0 P9 E7 F2 A6 O
  25.             break;
    5 y: R$ J7 o6 V3 j3 }( n7 Y' V
  26.             case plus.barcode.EAN13:1 f/ `/ @0 s, x$ u% R- Q9 g, Z
  27.             text = 'EAN13: ';# L% m) [4 j9 q2 I- U' s
  28.             break;
    * G7 m: @8 d1 e  J- X
  29.             case plus.barcode.EAN8:; F3 C- z/ v3 Z8 y/ F3 x
  30.             text = 'EAN8: ';
    , G/ a$ z/ O& |* T
  31.             break;" j2 Y6 c- A& V+ i4 b. A
  32.         }
    ' A( h7 O( U/ \
  33.         alert( text+result );1 B4 ~3 \. M* i% B
  34.     }0 Y5 F% |8 N1 e1 [( P
  35.     // 创建扫描控件: {- o) C" ]. t$ G
  36.     function startRecognize() {$ X7 U1 |, W7 p! W% q" h
  37.         scan = new plus.barcode.Barcode('bcid');0 G6 c/ u3 s* a' c" N
  38.         scan.onmarked = onmarked; " H! }+ Q6 d. J/ t
  39.     }
    2 i; M3 m( r. @
  40.     // 开始扫描9 g8 ]3 j' X. w& Y
  41.     document.getElementById("startScan").addEventListener('tap',function(){; l9 S: k& i, i# ?% ~* {+ a
  42.         startRecognize();% B: k& l. X+ }( A4 k3 ?+ k
  43.         scan.start();
    2 p5 G1 [8 E3 s) |7 F" J
  44.     })
    2 [. k  V! s* C' R! c
  45.     // 取消扫描* t  P, w, |' T# @# }( _/ ~
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){2 i$ G. H8 `9 j& L, V- W
  47.         startRecognize();. L1 V( _5 _1 P+ ~
  48.         scan.cancel();
    % m: g; G5 l5 P/ _# G: Y
  49.     })
    8 y! O' P0 y6 |: {, `
  50.     //  开启和关闭闪光灯, q9 M  l: w* Y8 u8 W
  51.     document.getElementById("setFlash").addEventListener('tap',function(){0 `3 M7 A0 w& s8 |7 J4 Q
  52.         startRecognize();; O+ Q3 N" V$ L, U: V
  53.         isOpen = !isOpen;1 |; Q$ d) e+ i! W7 E- N1 Y
  54.         if(isOpen){
    ' c, B3 w. K- \4 Y3 q
  55.             scan.setFlash(true);
    / v1 i1 ~/ f3 s0 v
  56.         }else{* s* `8 Z7 ~/ c. Z. n% c
  57.             scan.setFlash(false);
    ) ^/ x- [9 `% [2 t' j# `) l
  58.         }
    7 T: M5 b& ^6 e2 A% M
  59.     })) l! [1 F- l$ |+ _/ L- B- J
  60. </script>
    + _- H) b1 `6 k- g
复制代码

$ J% ~- G! T4 ^- L效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
- D% s( C. `# z0 e! c1 q8 C8 s" Y) B) L$ x




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