cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
# x) v  ^& m+ ]9 I6 P以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： ! K$ @, ~& ^8 d6 A- U: C8 g
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
! W6 v/ h% E! O% m2 `《【iOS】CoreImage原生二维码生成（一）》 & M3 `7 i" P9 L
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
5 w5 f% K% P4 E1 s/ ?$ _2 m在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
* R* j% j) A/ r4 @* R) Y原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
% [1 U* P/ [' J% E; H1 w5 |% v直接上代码，注释都在代码里面了。& |* r) V7 `* ?3 n: E  M
, O: ]# D) d! c( _. z; Y
  1. <body >" F( p* Z. y& U6 a% A) O8 u4 \
  2.     <header class="mui-bar mui-bar-nav white">
    ! q8 N/ @/ L# E" a- J) T7 n/ q
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    ! n1 f; Y9 r5 y3 D; g, l
  4.         <h1 class="mui-title">二维码扫描</h1>( o, i$ Y* A+ A" V: s5 ?$ `. K2 e
  5.     </header>
    9 |9 L$ S/ s; V/ g8 Q# B
  6.     <div class="mui-content">
    0 r  M. R* V# V8 s) Y2 u% {
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button># o2 I& d- \% x
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    5 ?9 j5 ?( W% F( u2 E4 S$ |0 Y& }
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>; r- d& u  {3 q+ X
  10.         <div id= "bcid"></div>( j! }" a( Y1 k+ U* n- F
  11.     </div>' F  o& z8 i: D" P) k
  12. </body># g2 B. w5 `5 v7 z. a1 D5 a
  13. <script>
    " d4 _4 _5 R& e
  14.     mui.init({; ?9 Y  U3 z2 y" v7 z. X6 ^
  15.         swipeBack:true //启用右滑关闭功能
    - K5 |( y7 @7 e/ e' i5 h
  16.     });6 g( C' R' N0 D& z
  17.     var scan = null;
    + f5 r/ M: o* W( m
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 w3 l7 j3 o: |6 }5 h
  19.     // 条码识别成功事件- Y; S( f/ w! k5 y
  20.     function onmarked( type, result ) {$ Q& b! k: G& a) ]) N8 Z
  21.         var text = '未知: ';
    & ?. X$ T5 B( ]% t) N6 I8 M6 `
  22.         switch(type){: C- J, o( n( d; F
  23.             case plus.barcode.QR:* W2 `8 u" r) u! ^5 c8 b
  24.             text = 'QR: '; // 二维码3 b" J6 k0 P' n% k& g3 t; X) }9 I
  25.             break;
    - J4 K* G0 _& O# y
  26.             case plus.barcode.EAN13:
    1 d; @) |3 H' m$ x1 [
  27.             text = 'EAN13: ';2 j& G$ {8 D' l& ^! |8 J$ i5 M" v; y
  28.             break;
    ) t: U1 d5 A7 U( D" M# W- b9 D
  29.             case plus.barcode.EAN8:
    1 ]; x1 ?' q, k. k
  30.             text = 'EAN8: ';* I. L! N# f+ Q% d. F! q# d% _7 a' c
  31.             break;
    1 n4 J, X1 N0 z, Q1 I8 e- F
  32.         }
    0 O9 m' S* p$ R7 g8 x
  33.         alert( text+result );  F" C; a$ w) v' X# j' f
  34.     }! Q- q4 h$ [8 U: Z! b
  35.     // 创建扫描控件% K2 @) j% f* \; _* j
  36.     function startRecognize() {3 R; h* L; @  m$ ~
  37.         scan = new plus.barcode.Barcode('bcid');
    ( ?6 @3 V2 L/ u2 X4 F
  38.         scan.onmarked = onmarked;
    * ?! a9 \. o0 F/ a' L) j$ W
  39.     }
    5 a' @1 |; O% s& V
  40.     // 开始扫描. Y1 F0 W. C& l# `7 A: D- j9 w% ^
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    6 @) n% Z# U2 Y
  42.         startRecognize();  j8 e8 A6 X; L$ S
  43.         scan.start();
    & V9 D# o3 l; x! t
  44.     })
    9 n- _/ w) M6 o- r/ [
  45.     // 取消扫描2 a2 v5 B( z1 V- h
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){, ]' z3 I1 v6 j* x; G5 S- j, ~$ ~
  47.         startRecognize();
    + j9 m6 L5 p; K# N' O) t9 |" b8 s  m6 }
  48.         scan.cancel();
    ; G$ Y3 q% @8 U5 ]0 h9 g
  49.     })
    5 I% @% g) Q9 a4 M
  50.     //  开启和关闭闪光灯# }; N/ M% `3 P& p) _7 ?
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    7 f* @# H% _6 f' \% B% t3 F) M# }. F
  52.         startRecognize();
    ( u5 X$ l( b( ]% ]
  53.         isOpen = !isOpen;# g" o  L" F) ?9 F+ k
  54.         if(isOpen){
    . N* u; W5 O" o/ t! I5 @
  55.             scan.setFlash(true);0 S" s2 x8 `: t/ y+ Z6 E( J, d
  56.         }else{2 w: r" x3 s% H3 |5 S
  57.             scan.setFlash(false);
    ' C! e  n) W- J4 L4 |
  58.         }
    5 |$ h4 l; b$ j/ m/ p
  59.     })
    9 h! o& Q8 I3 E+ O7 S
  60. </script>, ~3 @7 B4 D% T# Z* P, L
复制代码

2 i4 E4 F$ `  [0 d效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
- W8 L/ A9 {: x: [1 L, U+ q
9 a9 `) O: h2 g7 m& g



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