cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
  d" B; i0 ]% g+ `以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： & T8 A: R8 O, Y$ [) R: d/ I( |5 M
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
0 J( r' @/ ^  m( u3 L《【iOS】CoreImage原生二维码生成（一）》 ! H4 `; ]. N; R1 z6 O  w8 _
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》 8 i/ U% T/ w/ G
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
9 x) z: ]4 S! i( q! X0 Q  {+ f原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。 9 R4 n0 ]5 n! m; E  ~1 K% k$ s
直接上代码，注释都在代码里面了。0 a; C- ~8 f/ |

# t2 s7 \1 c- \7 Y; ^
  1. <body ># e# c% K& w$ r" b
  2.     <header class="mui-bar mui-bar-nav white">) I  D( ?* [3 w" X  D( j: q
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    + ]+ u. y  P, v
  4.         <h1 class="mui-title">二维码扫描</h1>
    3 b* I, A4 G* e* }  D
  5.     </header>
    * N* z3 V7 }; A- }1 f
  6.     <div class="mui-content">
    : j" P# u! D) g. z; y
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    2 Q0 q" V+ m% f
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>% P% l: J0 w. W+ A! h8 A4 U
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    . w0 d; P* [6 x' l
  10.         <div id= "bcid"></div>
    6 b, I  y$ `6 H6 C
  11.     </div>- q3 v' D* B2 U. F
  12. </body>& x% B7 z7 J" ^4 k  a/ t" K5 y3 Y
  13. <script>
    * R. c" Q8 X9 r, u
  14.     mui.init({1 i7 Z) Q* ^& p0 X3 D1 A2 d
  15.         swipeBack:true //启用右滑关闭功能# g) i0 N; [+ F) Z0 w" ?0 i
  16.     });
    " I+ n& W0 }2 s7 ?- k* O, t
  17.     var scan = null;" k/ a* ^% A+ _. A, b, o% d: ?
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭. a/ v& x: b) e! k" H( u
  19.     // 条码识别成功事件
    / t  T/ n& _& M7 ]- T9 }- P$ F% }  {
  20.     function onmarked( type, result ) {* o* G1 [- S. @; d
  21.         var text = '未知: ';9 y: M3 a; @! }6 O& {# W3 L
  22.         switch(type){
    5 H: j# X' u1 t' g! B8 u
  23.             case plus.barcode.QR:
    ' i, z: h& S8 G0 ^* n
  24.             text = 'QR: '; // 二维码, e- P* E2 ^- @+ M
  25.             break;. ^. y! I/ \5 R# k3 }" R" {
  26.             case plus.barcode.EAN13:
    2 _# F; Q3 X5 G
  27.             text = 'EAN13: ';4 `9 i5 n' z7 ?
  28.             break;
    ' ?% n$ x; A: s0 \- j) K/ f
  29.             case plus.barcode.EAN8:
    , s) z$ }$ Q+ Y. r7 g
  30.             text = 'EAN8: ';' p- N+ B' N# S# t5 }6 Z
  31.             break;! R/ t$ W' H. V5 V0 i0 i
  32.         }
    . ~) l5 a3 Z, b5 e2 I1 p, T& j; P
  33.         alert( text+result );$ K( k" F% u* p: l
  34.     }
    / ]9 B) c1 m. l3 y: @" g3 G3 `5 H
  35.     // 创建扫描控件
    3 w% y+ n3 ?6 i' {+ V% W
  36.     function startRecognize() {
    + V: L7 j8 V4 p, c) B; r, M+ y
  37.         scan = new plus.barcode.Barcode('bcid');' v0 C* o0 c: Y# t- I9 D& W; j9 M
  38.         scan.onmarked = onmarked; 8 E( I* \3 t+ m
  39.     }9 z" y( G6 ~% ~$ y
  40.     // 开始扫描
    6 Q3 n% i- J- c+ w
  41.     document.getElementById("startScan").addEventListener('tap',function(){2 `6 M) U' [% B" P0 a3 P
  42.         startRecognize();4 E9 G3 ?3 R" `5 [' Z# E2 ?2 v( Q
  43.         scan.start();# |. C, b# g% E" s4 H$ Y% M1 N
  44.     })
    , U* S. Q, W8 f
  45.     // 取消扫描7 D9 {9 H" l* r$ S4 c
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){; c5 r2 k! j& `: D
  47.         startRecognize();
    : e" P0 d* K7 T9 d9 e& V
  48.         scan.cancel();: C* |6 D4 M7 |0 L, o- O
  49.     }). Z8 Q2 N0 _- ^
  50.     //  开启和关闭闪光灯- |: G1 O0 T' |* K0 a
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    ; m$ u+ ^) V8 J$ H* z
  52.         startRecognize();2 F. d8 o0 S0 P7 \: n+ R6 u, S
  53.         isOpen = !isOpen;
    , l3 k/ F* V5 o# S; e7 Z/ {# n
  54.         if(isOpen){3 C1 M  }( n9 _6 l( I
  55.             scan.setFlash(true);
    / \% D( U5 [% c: M+ C) w0 X; Q
  56.         }else{9 m% F  W& b+ [/ T8 B6 L
  57.             scan.setFlash(false);
    1 d/ S1 J3 g9 H1 C+ l& W/ U3 ~- l
  58.         }7 a: @8 c* e; f" W3 `6 N, j& ^1 B4 q
  59.     })
    ! m" y$ ?$ r6 g; y
  60. </script>% z* Y( P( M2 L$ a/ _4 I2 C7 {
复制代码
$ z5 Q. f* w7 ]$ N, ]0 Z
效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
3 m( {* g/ _; h2 i: x6 m/ o1 k
4 U- L& e' J3 @" T$ o% O2 }



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