您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 13957|回复: 0
打印 上一主题 下一主题

[HBuilder] HBuilder webApp开发(十三)二维码扫描

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
) Y$ a8 F' ]' A1 c以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
6 E& A2 [: s/ g《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
- [/ x/ o# Z  }2 w# \《【iOS】CoreImage原生二维码生成(一)》 * I: |* j. ^% [# w, P" t
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
0 I  f; h* g) @- q在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
& j8 F# w# \; l; N" H原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 ; Q3 p; V" b$ w8 o! V
直接上代码,注释都在代码里面了。5 J. s4 Q) K0 q+ w0 r. ?
2 W' J/ i( X+ P- m( ]5 n1 X# a' w
  1. <body >
    ) G7 c8 b1 W2 P# [! _' B
  2.     <header class="mui-bar mui-bar-nav white">
    * |+ v' t9 `% F9 z7 ^4 @
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    ; ]1 V; x! j: {$ @" p1 M, E& ^
  4.         <h1 class="mui-title">二维码扫描</h1>4 k8 a% k6 t& W/ ^6 G; S
  5.     </header>: b' a9 d, P3 O/ E: ]
  6.     <div class="mui-content">$ L. |. \: T7 s
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    " {( [, t3 b$ @+ G# u) V% U; J/ S
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>: n% k, \- m8 I! ]8 w
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>2 w. h+ i; L* }$ a) M% N
  10.         <div id= "bcid"></div>+ f7 k9 ~0 d# N7 |% X
  11.     </div>( p$ T  f! r& W; ?
  12. </body>
    ( c* w9 ?7 {' U; }. U9 S' Z- W
  13. <script>/ I; s) e# d7 D! E' u2 m2 Q4 |# E
  14.     mui.init({+ u, g& |& \7 t1 }+ M
  15.         swipeBack:true //启用右滑关闭功能
    1 Q0 i. F/ ?$ L% D5 S
  16.     });
    $ T$ f# F& S/ F1 f8 _6 z
  17.     var scan = null;( u4 q% j. L5 h" c3 U
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭$ n! O* k, p9 t8 N
  19.     // 条码识别成功事件& H0 P2 D3 U) M
  20.     function onmarked( type, result ) {
    0 U# B7 |8 [: {& V* y# ?
  21.         var text = '未知: ';1 ]# `: A, A0 O9 K( l7 m
  22.         switch(type){
    # n8 i6 K: S+ ~6 C& P% j
  23.             case plus.barcode.QR:
    $ L  @1 I4 w5 Y. ?$ ]- d
  24.             text = 'QR: '; // 二维码
    . O8 K$ M1 A( z7 }- P+ I. h- L
  25.             break;
    % ]+ e% _( V5 T
  26.             case plus.barcode.EAN13:  M2 L# T4 ]4 E' m, R7 C, d
  27.             text = 'EAN13: ';
    * o1 G6 Q' r# S# o% O% W
  28.             break;2 u6 j( u3 U4 V* i
  29.             case plus.barcode.EAN8:% W, y" f/ a3 s& @+ A! N
  30.             text = 'EAN8: ';
    + @& C: _" X4 ]6 j; S4 L6 I: Y
  31.             break;. t% t" q5 a1 k! G4 I+ i9 L
  32.         }1 ~+ [: m5 _& W9 P5 _5 T8 h
  33.         alert( text+result );- p; I# c2 `) ^. p+ V6 P
  34.     }
    ! ?6 k! l0 ~( X
  35.     // 创建扫描控件
    ' C# s1 l: Y% u4 L3 w, B' k8 s
  36.     function startRecognize() {: L: b. T8 _, y9 `" V* C
  37.         scan = new plus.barcode.Barcode('bcid');, {2 |) }1 k4 K9 G' @% N
  38.         scan.onmarked = onmarked; 9 h- v8 U, k6 u
  39.     }. n3 M5 g* |& u- H8 R
  40.     // 开始扫描
    3 |. A1 O6 @8 S
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    2 t; }, M- t: M5 i
  42.         startRecognize();7 ?. h3 s7 Y! G  F( `
  43.         scan.start();1 K: f  N1 l. J! i0 q1 F. L9 S& M
  44.     })
    ( b% |8 _6 n  e+ ]4 t- Z* L% V9 f
  45.     // 取消扫描2 t- T6 u8 X! Y& G; n
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    6 t# o2 T$ A! Y5 h4 X6 _1 ]8 p2 F
  47.         startRecognize();
    1 k" |: E4 X1 r) N) k
  48.         scan.cancel();
    ; L. y, ~7 e8 u1 _9 r
  49.     })0 {0 B; k* U  b3 b, p  W
  50.     //  开启和关闭闪光灯, C6 |2 Z5 x! K* _4 ?( N: H
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    1 Z0 ]7 }* w+ C3 b& h7 _, ]% }
  52.         startRecognize();
    + [0 l8 f' s) N  e+ }0 d
  53.         isOpen = !isOpen;
    & h  i3 Y, k. [2 T8 L
  54.         if(isOpen){7 A4 @7 w$ ^+ `7 D
  55.             scan.setFlash(true);
    # l/ @4 [& m# d; @  a. C" b  d
  56.         }else{7 r0 ^4 e; J1 e% A9 X
  57.             scan.setFlash(false);* R  \" p4 j! q( M1 \/ Z
  58.         }1 D8 H: k% {5 ]3 @3 U
  59.     })0 Z3 y4 N1 v7 q8 r. `4 X  R
  60. </script>
    + l+ \! m3 Z% W: a, v2 Q
复制代码

# ^& {' a; @. i6 l- k8 L效果图什么的就不上了,和前面提到的文章中的效果图基本一样。0 ^, L! E4 H* o( _3 u1 Y/ z

. w, y0 q. `# Y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 20:18 , Processed in 0.066873 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!