cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
! Y* ^5 j, J5 I$ d' V) U以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
9 q, C& _' c8 K5 O《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
9 ?7 z3 a, z, J" Y9 T- y+ ]5 |《【iOS】CoreImage原生二维码生成（一）》 # Y9 H! K* ~4 M: \9 N* C- ^
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
6 y7 D( e$ S% ^) h$ I( h在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。   I2 w, @$ s  a2 G
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。   j: K# W8 M2 ~  t. V! p* V7 V
直接上代码，注释都在代码里面了。
* `$ e+ p! m+ N- ]
( _& A  c5 [7 [* u' y
  1. <body >
    " k3 [3 d. U2 Z2 |
  2.     <header class="mui-bar mui-bar-nav white">; C% a' Y8 b8 x% K  v  r. s
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    $ _6 t2 N( u- |+ a" N+ L
  4.         <h1 class="mui-title">二维码扫描</h1>
    ) p9 B5 V. `0 O, x" E1 {5 C
  5.     </header>  c, k+ y  n8 @# q1 d
  6.     <div class="mui-content">
    # v( z* t& Z9 G) g& g# T
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>& Q5 ?, S- D0 S  G& m9 `! A& Z
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    4 O( x7 w0 e( Q1 a+ C
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    ! G0 F. {/ s5 }& o$ o
  10.         <div id= "bcid"></div>
    & o2 d# p8 {: H' |- m
  11.     </div>6 j, D, Q8 K9 B6 N% ?# j2 j
  12. </body>
    * y, b( F; V  r* }- e" k- {
  13. <script>
    4 |  c; D4 d9 l2 c- I7 o% C
  14.     mui.init({1 [8 O1 q" N3 X; Q7 g
  15.         swipeBack:true //启用右滑关闭功能+ T5 Q+ |3 i5 r# d2 ~9 k
  16.     });4 R4 p! ?) p) H) P
  17.     var scan = null;
      N2 A% n7 E" k  f% [- u6 a
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    ) q) Q7 y1 l0 s5 T) ^9 F+ K& \1 Y* Q
  19.     // 条码识别成功事件  Q+ }) x3 b. _" b; R
  20.     function onmarked( type, result ) {
      i# ]% I/ V' O: f# g6 f
  21.         var text = '未知: ';
    4 }' z! m: \! ~$ j& y
  22.         switch(type){# O- i8 V- j- O* k7 n2 C
  23.             case plus.barcode.QR:5 I" Z3 W* `: r/ p
  24.             text = 'QR: '; // 二维码: Y3 v! S3 |' W  u
  25.             break;
    & D3 u8 t" x. @, r! p
  26.             case plus.barcode.EAN13:5 J3 Q2 c6 |+ V% o$ Q, J; o
  27.             text = 'EAN13: ';
    2 h3 X% z* |0 M$ n4 d4 @
  28.             break;
    # U0 z( J& I9 V' x. e# N4 [
  29.             case plus.barcode.EAN8:
    " _8 |* Z7 F# P# {. \
  30.             text = 'EAN8: ';' Q- a- L% t# s9 B1 r6 p$ i! R
  31.             break;
    ' R$ X  W! k7 n2 l, c
  32.         }
    & ~9 X( q4 I: w5 S+ d; P0 m
  33.         alert( text+result );
    6 O, I1 z1 A' w' y& l5 p! K
  34.     }) H' I# V$ x6 o$ W5 I
  35.     // 创建扫描控件7 w% `& `+ f* Y
  36.     function startRecognize() {& \% i  z% C$ f9 |5 @
  37.         scan = new plus.barcode.Barcode('bcid');
    - F8 v: f0 m8 J7 U5 @3 U: g8 A2 a2 G' P
  38.         scan.onmarked = onmarked; $ j( Y, R- F1 t' F
  39.     }+ b4 n0 C' F: f% u6 u) F+ b
  40.     // 开始扫描  G  t; y4 b) I3 F; y  v9 m, ]' l# s
  41.     document.getElementById("startScan").addEventListener('tap',function(){+ O9 n. ~3 B* ]# L# s2 x
  42.         startRecognize();
    , P! @- ~  r8 `& a
  43.         scan.start();
    + b( {/ n# q) U5 b5 {+ h8 d
  44.     })
    6 n2 U1 L/ l* m# E8 R
  45.     // 取消扫描
    9 r$ m$ ]" k! Q* B1 Z( ^; E4 J
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){/ E3 d& I- I/ e" W7 G: e2 Y8 A
  47.         startRecognize();
    4 s2 s  c! d: g' [* u. S. @. ]
  48.         scan.cancel();" e0 ?7 H1 Q, K
  49.     })
    % h2 S1 s& o3 [2 {" ?  ~
  50.     //  开启和关闭闪光灯
    & o" x0 E- O+ C# H2 Y: g# z% O; w
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    0 ]# S: \( [) u& M" v2 b
  52.         startRecognize();
    . G- p/ v. _% m
  53.         isOpen = !isOpen;. T3 @0 r( p6 t2 l8 ]7 q# ?, e) U
  54.         if(isOpen){) P4 ~. v  D8 H" y* K7 c$ `2 k
  55.             scan.setFlash(true);& l3 }) n1 k9 Y: B
  56.         }else{# ]6 E0 X* y& ^; k8 @& M
  57.             scan.setFlash(false);
    * e/ E# D- |! a; j+ |
  58.         }
    7 N. w% \. p- ]0 x
  59.     })
    / ~9 ^! k" B5 |4 E! A
  60. </script>
    6 A$ V% g' H2 U. }
复制代码

7 `  B$ M0 P* P! @效果图什么的就不上了，和前面提到的文章中的效果图基本一样。; x: W- W; b7 K+ p5 e( J
7 C9 S$ Y# a- D0 R/ M" _




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