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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 5 ~1 t- h" R6 P; l0 K: b+ O+ ?
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
! v+ T1 D8 x  p# F* n, N* R《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
. e6 p0 h" w( X. W《【iOS】CoreImage原生二维码生成(一)》
) D+ L3 J, D+ N% ?% L7 H8 f《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
. ~. k3 G% u$ u4 |$ H在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 9 ]1 u. W5 ?$ p" t$ ]0 W* ~, n7 q3 e
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
8 e0 C9 p5 v" T( N直接上代码,注释都在代码里面了。
2 }8 L- f$ m0 r( w- A" t& c% }8 V3 v+ d2 Y8 S0 u, s
  1. <body >
    * M( v. T2 G+ F* C5 O7 c" x9 V/ q0 b) e
  2.     <header class="mui-bar mui-bar-nav white">
    & p+ U+ x$ M1 w+ ^" ^' @! S2 `
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  `6 `+ n1 A4 ^0 Z" T
  4.         <h1 class="mui-title">二维码扫描</h1>2 l, s$ z! y# N& Y+ Q
  5.     </header>
    : @( O/ o* f- y8 j. K
  6.     <div class="mui-content">& S9 `) T5 \0 t: c6 {% `9 i4 i
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    $ J. j& B; C& Z' r+ X
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>9 \) D& m+ p9 M( T7 h( K  c( y( ^  R
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>8 E6 t; v. }/ v" ?9 {' L, w! d
  10.         <div id= "bcid"></div>" z- W; V" K0 n+ P0 o
  11.     </div>
    2 C0 [/ `0 e8 M) ?& ]
  12. </body>
    & R3 E3 R- r3 `9 e% C' F  Z" f
  13. <script>
    : p: r) T1 Y7 |! Y9 K
  14.     mui.init({
    # h" @% W$ z8 a0 B/ S( A
  15.         swipeBack:true //启用右滑关闭功能
    - v  e% k3 f, A
  16.     });
    & [$ S8 v$ S$ H
  17.     var scan = null;
    6 F# e4 @0 u9 ^+ S6 u. d, q/ {
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
      \& n9 [. @/ j5 M  y% d2 e
  19.     // 条码识别成功事件
    , p% M/ C. }2 F& `2 }, `0 E
  20.     function onmarked( type, result ) {2 z. @. M( w. P
  21.         var text = '未知: ';
    1 [4 e% F+ i4 Z
  22.         switch(type){
    4 x" L6 N  p1 D+ y2 o
  23.             case plus.barcode.QR:* t. u, [* }8 K: P
  24.             text = 'QR: '; // 二维码
    9 M7 V: V6 }6 h: H% Q1 B$ i
  25.             break;+ n5 W) |9 j) a' _/ t: H6 r
  26.             case plus.barcode.EAN13:
    , |% o; j& W8 v
  27.             text = 'EAN13: ';
    4 ~8 f0 Y8 G: ]/ a5 X; W1 R
  28.             break;
    $ D5 G9 W6 P3 H  K4 g+ x) n' [# W
  29.             case plus.barcode.EAN8:3 |0 y+ C$ ]5 h# y: U9 r
  30.             text = 'EAN8: ';
    5 W& \; \+ p) |, p2 g4 D
  31.             break;
    ( A7 Z) }3 O$ J' Z. M6 @) N
  32.         }" [/ B4 {0 A" K; c6 p
  33.         alert( text+result );
    6 y) `) K7 ^/ @; A% E  p7 w" }# P
  34.     }
    , X1 f) q" h' L, B' ]" M, C+ n
  35.     // 创建扫描控件
    + k) U9 x0 g5 o! l
  36.     function startRecognize() {
    7 W5 x$ u2 ~' K) x" K
  37.         scan = new plus.barcode.Barcode('bcid');
    5 e" u0 |  ^7 M
  38.         scan.onmarked = onmarked; 9 D/ c$ G/ V  ~
  39.     }
    & L9 m% c1 y9 A7 \
  40.     // 开始扫描
    ) P6 ^9 g3 X2 ?4 o1 j" o
  41.     document.getElementById("startScan").addEventListener('tap',function(){' H! q. x( }( _6 q9 j
  42.         startRecognize();5 z1 I1 q- |; q" I* i, K0 S
  43.         scan.start();
    - G1 H1 {, U0 H7 S( C$ e
  44.     })
    7 c" L2 i, l6 P
  45.     // 取消扫描
    ' Y8 o3 ~  D/ D! I8 L
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    # \+ w( g7 V" o; }, l7 l" k  k2 `
  47.         startRecognize();
    / Z  J5 y& T/ H) H8 u- d5 k( s; {% R
  48.         scan.cancel();
    4 }. t6 v7 A+ {; v" h# U7 L4 Q& \
  49.     })1 ~1 ^7 a0 G6 f+ o3 i  y5 r
  50.     //  开启和关闭闪光灯2 F! F) g# i& S. X  O6 E* e: x
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    : ^5 W& }( H# L5 d8 _
  52.         startRecognize();2 _; H2 c3 S' w, k5 k
  53.         isOpen = !isOpen;1 O9 I% P  m) o- ~2 J
  54.         if(isOpen){! @. B0 p/ Z7 j8 }
  55.             scan.setFlash(true);3 @! ]% k  q( E0 n
  56.         }else{/ {3 h: f+ N& r# u2 H
  57.             scan.setFlash(false);
    $ T. J$ y4 m9 Z9 z, g' M  E  ~& C
  58.         }
    ' Z/ u: S1 j  f# i' H9 W' X) a* _
  59.     })
    " C6 d5 l0 J8 j* t4 a5 Q
  60. </script>/ F$ I! t( M/ y$ ~# h
复制代码

5 c0 T8 ?; P3 X# w# Z. F8 s7 `效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
1 O- w) E) K+ Z: \) d% C5 k0 v; e" O$ n
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 04:08 , Processed in 0.056747 second(s), 22 queries .

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