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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 % r% E0 B/ U1 J6 o& F: n& o
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
6 D( Q0 w, y$ \) ^《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 $ j8 k( b/ k0 s- ~* E  W5 \
《【iOS】CoreImage原生二维码生成(一)》
  j# D3 s! i9 p; g《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
. v- v& ^% W1 ?- Q- W在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 ! h( @  e2 |. r' z
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 3 [! Q- [1 N$ d3 Z* d* ]
直接上代码,注释都在代码里面了。2 e( t2 Q# o/ o6 b+ ]6 j

2 E8 i. l% |8 _: O: `: Q
  1. <body >
    0 O7 s& W) L) t& O
  2.     <header class="mui-bar mui-bar-nav white">( t3 E2 D* l  X: A5 p- P" g, }' f; c
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  _2 q% G8 w  |+ K" h! P  Y
  4.         <h1 class="mui-title">二维码扫描</h1>
    # b- W# `) a7 r  w
  5.     </header>- J7 e0 K* e" Z: d& A5 \5 U9 w
  6.     <div class="mui-content">
    " l+ T% y$ z3 a# C7 o$ B9 C
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>$ E, ?' Y3 }6 I- g3 R
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>7 w% Y; d  |! _* E
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    1 Q; Z; |( ~4 A! F
  10.         <div id= "bcid"></div>2 G( z( N2 [0 Q8 a
  11.     </div>
    , d. H8 K0 W( ^% Q
  12. </body>; \8 A: N. G1 b5 H" O
  13. <script>7 P0 r) q4 ~% V% W
  14.     mui.init({
    ! n6 \/ j8 g8 Z6 M. ]
  15.         swipeBack:true //启用右滑关闭功能& P8 v4 w: D& x9 k4 v8 b' _, o
  16.     });
      X; O; B( z5 d3 o
  17.     var scan = null;
    : K6 c# W) E& I9 K6 {! J
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭! u0 k* B7 S; _7 d: L) z) e# c5 f
  19.     // 条码识别成功事件
    ( O6 w0 J+ t6 Y  X& T& k
  20.     function onmarked( type, result ) {" o& ?9 ~7 |/ s: b8 Q  [+ G+ W
  21.         var text = '未知: ';
    % a: Z8 W! M) ]# d
  22.         switch(type){
    $ \% ^' d0 r9 a8 Z* _
  23.             case plus.barcode.QR:
    5 u8 R6 V9 D+ |: R0 a# t  s
  24.             text = 'QR: '; // 二维码) a1 |! G! K# q' O8 S5 J  I2 C
  25.             break;
    # X7 ^" B6 c' S' n% `
  26.             case plus.barcode.EAN13:6 D: r% \; J; c
  27.             text = 'EAN13: ';
    $ L0 r( A1 e+ f4 ]* ]
  28.             break;
    $ g9 o- \; s  I( g+ R5 }5 z
  29.             case plus.barcode.EAN8:) p; S( k1 k+ P6 h7 x( S
  30.             text = 'EAN8: ';
    $ o/ I9 K% z, w& M0 F6 t
  31.             break;" I4 k, J6 A4 y7 i
  32.         }
    0 u3 f& K" f9 A# Q7 {3 ^
  33.         alert( text+result );
    ! Z3 R8 P  E+ B) X5 Y: z# G7 g
  34.     }; `9 S5 E1 m9 C7 {) W
  35.     // 创建扫描控件& M! Z% g# l3 e
  36.     function startRecognize() {3 |. d7 i- [# z6 G- V9 [1 j
  37.         scan = new plus.barcode.Barcode('bcid');& b- O, V8 F- h- d) r1 s
  38.         scan.onmarked = onmarked;
    ' L9 }; V9 {" Y! e. _: `" }
  39.     }: ~5 L5 p8 M7 A4 S7 i) B* U
  40.     // 开始扫描1 b% Q; _7 L, c: X: w
  41.     document.getElementById("startScan").addEventListener('tap',function(){9 j8 e3 ^  N* g3 Z( @0 l
  42.         startRecognize();3 @( f- M# Y& ^( ^3 y
  43.         scan.start();
    . O" [  h0 U$ u6 q: v: }7 U
  44.     })% U% `6 Q4 V( [) f
  45.     // 取消扫描
    ( \8 O6 a6 T9 a# k; z/ v0 D
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){6 I! F0 O) A: D5 Z* \& F3 I& H
  47.         startRecognize();- S' I# e! {0 }* h$ n/ j+ r; q
  48.         scan.cancel();* S( I: z  |3 j: n# d" F
  49.     })
    ( G; V& ^$ @; r6 L8 H8 r9 T
  50.     //  开启和关闭闪光灯0 N6 O4 u, T0 v2 W: w' M  j* p
  51.     document.getElementById("setFlash").addEventListener('tap',function(){2 `" u. y- m2 f8 ^- A/ {
  52.         startRecognize();9 e/ C( s$ p: l2 `
  53.         isOpen = !isOpen;
    6 G0 e& n& ]/ U8 L# k# ]
  54.         if(isOpen){
    ! [- J2 D$ g. h
  55.             scan.setFlash(true);
    ; U# }" q1 H4 g/ o6 v
  56.         }else{7 X* a7 v9 I3 ?! F4 y
  57.             scan.setFlash(false);
    % c  w$ p6 o  O$ g6 ]' P4 d- r
  58.         }+ W* X) q& {9 H
  59.     })
    ( ?* ^0 \. ^! b3 X% J
  60. </script>9 I7 ~- s  c4 d9 f. t
复制代码

1 U& Y: K& R: d5 M效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
7 m+ k, ~; l  A, T
/ o' r8 E. K' C* B' S# J; Y+ M6 _
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 02:47 , Processed in 0.051894 second(s), 19 queries .

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