cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。 6 m% S" N: W, ?% e
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： . q( F+ T! A- T5 f, Y+ L- g
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 . n+ Q  E9 h( E0 @
《【iOS】CoreImage原生二维码生成（一）》 ; o6 N4 l4 E3 ?6 e
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
8 ?. Q9 @, u* Q+ x在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 - D* \' R6 K5 S/ x# V) X9 {
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。 ; q% _& ^0 E( Z8 i! d5 g7 T) P
直接上代码，注释都在代码里面了。
* j3 B: S: L+ S( O& N0 v  h- t* _8 L& P/ j+ ?0 k
  1. <body >+ \3 h. N% ~$ i3 J9 V4 R
  2.     <header class="mui-bar mui-bar-nav white">
    + @& n; m! R" z8 N" l& O0 X  T& r
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    % j6 @! S9 a" d6 j
  4.         <h1 class="mui-title">二维码扫描</h1>
    0 X( q: U4 A1 G) E
  5.     </header>" b" T' D0 E) t+ H, T9 G
  6.     <div class="mui-content">0 n. s" `$ D, O$ D
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    4 B7 t+ i1 q6 l7 L6 C
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>% C3 i0 H- K4 Z. g& _2 i* [  d
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>3 T2 c. |" W& [1 ]
  10.         <div id= "bcid"></div>2 w- x8 C/ e; q
  11.     </div>
    9 H* C2 w+ @, l3 Q2 `" Q7 i7 b$ m
  12. </body>
    - p8 j' i! w; h+ d: J
  13. <script>$ Y2 Z, D. w4 u/ I; K
  14.     mui.init({
    # U% m: F: h# _, S8 Z1 w
  15.         swipeBack:true //启用右滑关闭功能
    2 @; I% J( \$ ~( X0 |8 @; B. j
  16.     });9 s7 f2 y' s5 L9 K
  17.     var scan = null;
    % C8 f* n! m! d( X8 `
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭# @& ]+ d- f9 m6 @7 `1 N/ [: B
  19.     // 条码识别成功事件
    $ w; e( P8 ]* }3 x$ D
  20.     function onmarked( type, result ) {
    ; M# J) E1 J& G0 K' F
  21.         var text = '未知: ';( M( l- \) s! E( @$ x
  22.         switch(type){5 e2 f! p( I8 R* w' Y: s
  23.             case plus.barcode.QR:
    8 _2 @$ B& h# f9 o  t2 E
  24.             text = 'QR: '; // 二维码
    / J4 k! _  D  B9 p
  25.             break;
    % r! Z6 P- x5 d% ~+ C
  26.             case plus.barcode.EAN13:
    ; q3 ~3 }/ K. x( J$ w/ f! v% v
  27.             text = 'EAN13: ';
    8 D. R2 j4 {6 o; T" M+ `
  28.             break;( M8 Q4 R/ D+ v8 C
  29.             case plus.barcode.EAN8:3 E2 J  E4 N( Z. S; l% g8 p6 p' Q: S7 Q
  30.             text = 'EAN8: ';6 C$ Y) U. T) R* z- R9 o
  31.             break;7 P6 H" z/ s- V, ^$ M+ o' U0 e
  32.         }' K  M8 [* s! n) K( z1 ~: g! R
  33.         alert( text+result );. n( |/ h$ n$ h" {" H3 g
  34.     }
    % w  n$ U6 m6 P4 D% B1 c
  35.     // 创建扫描控件
    # w% W* a8 ^0 S) E- e$ N8 a, F  Q7 E! A
  36.     function startRecognize() {
    ! M6 H" ]* F" I7 ?
  37.         scan = new plus.barcode.Barcode('bcid');
    3 H" \. b# W3 C3 w
  38.         scan.onmarked = onmarked;
    3 R. n  h/ D- @# V0 j4 T& H# ~
  39.     }3 j3 I& c, l( c# b
  40.     // 开始扫描5 c+ z  `3 p  [) q3 }/ y3 h
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    / f; ?  V* R% l
  42.         startRecognize();7 c3 }( [' ~4 m" C) N
  43.         scan.start();% J) E( c7 ?, c% b
  44.     })' k0 I6 j3 ]! O) q$ {2 l' I! Z9 s
  45.     // 取消扫描& G/ A% E2 H; f) n1 L
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){6 F% p3 V" X1 h  E7 R
  47.         startRecognize();
    & h3 q/ s- ]! @8 e
  48.         scan.cancel();
    9 K( X( k& k/ |
  49.     })
    - P0 N, V3 L9 r8 J# I; f! s! a
  50.     //  开启和关闭闪光灯0 c) q" Y: s9 ^1 Q( j/ A+ c7 k
  51.     document.getElementById("setFlash").addEventListener('tap',function(){" ]+ P2 o$ f9 g, P
  52.         startRecognize();2 y& ]( X8 m( r
  53.         isOpen = !isOpen;# X& ^) ~3 X& ?5 x
  54.         if(isOpen){3 e6 u3 h% b' O2 t/ w, R4 t: x
  55.             scan.setFlash(true);
    , V3 |( _5 z1 u; [1 P! ~3 C
  56.         }else{& g2 T! h5 T2 l9 t3 ^
  57.             scan.setFlash(false);
    ( r- |: Q2 h7 Q& }
  58.         }7 \" @. \' v* E+ F6 E
  59.     })# t; ?" @; Z6 G0 ?; x2 ?1 a7 N5 f
  60. </script>
    9 }2 S( p/ N$ L7 a3 h1 i3 E% d0 D, N
复制代码

5 y* p% R- V& x* t6 s$ W! p2 g效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
  z- a, _/ j: c3 _' F8 V7 n* v* y' P% b" {




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