cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
, b) C' u) Y' c& |' C( a8 L3 h6 U4 X以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些： 9 t( U0 x$ q+ C  A/ ~; u0 ?- b
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 % \& k0 H* p0 D* q* c! e
《【iOS】CoreImage原生二维码生成（一）》 $ H! p8 P/ ^* P% M4 h1 P% i
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》 ' h; M4 ~+ o  ^
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
8 \( O* N) L" K0 {1 A原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
! E: J7 A; O/ m8 H, i直接上代码，注释都在代码里面了。  ]) f* \! q; `  @8 y) s6 C# H2 h% n

- |+ ^6 ]: b, L3 R3 b
  1. <body >
    ' `8 {9 P$ ^& J0 K% A! e
  2.     <header class="mui-bar mui-bar-nav white">3 B$ Z% q5 j( p* |/ A: `# U; Y) t, C
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    & N; J) U6 r; N+ W4 \
  4.         <h1 class="mui-title">二维码扫描</h1>
    1 l! E$ Q# C# }9 `
  5.     </header>
    ; J; M: N' e2 q% l- y
  6.     <div class="mui-content">) q5 G. }( S& T+ f- G( S+ m- V
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    ( T$ b: }' M7 _) u( j+ w+ ?
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    ( x' k7 ~3 e+ J/ w$ {
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>0 i% M2 R6 L. D& U/ r0 h/ [
  10.         <div id= "bcid"></div>
    7 Y" k. a; M8 l2 l; a% ^9 L- R
  11.     </div>' k7 G, p  ]9 d1 Z/ W
  12. </body>
    / n. s8 m* o$ M$ E6 @: j
  13. <script>$ Y8 T" D6 n/ i4 k
  14.     mui.init({! ~5 m0 [8 y+ E' q/ n5 @
  15.         swipeBack:true //启用右滑关闭功能9 Z. O8 g: _  ]5 {& o! ^
  16.     });' G: @7 ?: Y9 \- j( D
  17.     var scan = null;( G( u" r5 {) J5 x
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    : a5 |; g& u9 Z/ J
  19.     // 条码识别成功事件
    ( G, \( ]; v3 Z
  20.     function onmarked( type, result ) {
    % ?! `5 w" Y' z8 P% Z7 ~4 }$ N( v5 _
  21.         var text = '未知: ';, h# J0 B) O" z2 U6 H9 ?
  22.         switch(type){
    " z) U/ ]) S- g. H/ T+ v& O
  23.             case plus.barcode.QR:
    3 e  n. H* {) n, y! v
  24.             text = 'QR: '; // 二维码- A5 m% W: S( Z; {" m  W" n/ z3 \
  25.             break;
    7 T% [3 {  V6 R3 {1 y1 s! T
  26.             case plus.barcode.EAN13:
    4 S2 P: s- d6 d2 z* _
  27.             text = 'EAN13: ';6 t: y# ~- K# u  v
  28.             break;
    - }- O/ [: D4 |) G" E1 H% [% U
  29.             case plus.barcode.EAN8:
    / o! m) _" P2 f+ W" r+ D5 j
  30.             text = 'EAN8: ';1 I$ }7 p: z- i
  31.             break;% b* L' ]7 u8 @: O& E' r5 y: k
  32.         }0 i6 U3 r/ v1 X# O2 ~
  33.         alert( text+result );
    " B8 P! ~# x' N$ ?
  34.     }+ F6 C) a# U& G+ j# L- `3 _
  35.     // 创建扫描控件7 u7 T. G, T: s, U
  36.     function startRecognize() {
    4 q4 h4 m6 T+ j# K/ j# l
  37.         scan = new plus.barcode.Barcode('bcid');8 G3 i) Z" V1 V4 Z( H
  38.         scan.onmarked = onmarked;
      X. h/ a6 W: i6 v: r1 [+ R6 o* H
  39.     }1 R8 [4 _0 ^' Y( o) @* ^# O) L  a, [
  40.     // 开始扫描) w$ o# D' K) g" _, L4 O
  41.     document.getElementById("startScan").addEventListener('tap',function(){9 I- X  H/ j3 X6 ]6 `
  42.         startRecognize();
    6 p1 x' D% S1 U, ~* ~
  43.         scan.start();
    % z/ `3 U1 I3 j
  44.     })
    $ b9 p/ k9 D( w+ X# I. M5 i1 ]
  45.     // 取消扫描( B' N( L/ d9 d! N0 i1 l
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    , [- B# o& }8 A! {" }2 |
  47.         startRecognize();
    ( P. @$ i4 m( n5 k/ y. d
  48.         scan.cancel();
    & f3 y* q1 c& h8 m/ Q
  49.     })
    / D# S4 j: P0 K. W* V, u- W+ l
  50.     //  开启和关闭闪光灯
    % ^! z0 ~. v6 Z( P' Q2 _. A3 e
  51.     document.getElementById("setFlash").addEventListener('tap',function(){6 g, o/ }0 w# \, O! {* n
  52.         startRecognize();7 Z$ h6 F$ q6 F0 U6 H
  53.         isOpen = !isOpen;8 e: p9 B  V: z; E+ G, D
  54.         if(isOpen){  g  h/ c; v! G( o3 M# T2 f
  55.             scan.setFlash(true);
    2 \! [; k! k: Q) ?+ m; j
  56.         }else{
    , V* x& I8 o* {- b/ e, T: p
  57.             scan.setFlash(false);+ V( A+ ?, z2 A/ n! [. s/ d6 l' s
  58.         }! b* T/ g! v2 M/ U6 b% p# F
  59.     })
    6 J, \8 y6 H: ^! N( q
  60. </script>
    / U1 M9 k* ?9 l( m1 r' C# _
复制代码
$ R6 ]8 o+ u; q0 }8 x+ b
效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
2 x% m. _  x# }/ R- v
( b/ t: y. A4 m( R# k



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