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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
# n- {, Z/ s& z4 W2 c$ u- O& E以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
1 w6 G: ?/ i$ H《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
% Z  q4 a9 o2 Y& B. O《【iOS】CoreImage原生二维码生成(一)》
- L$ p& i  g9 _1 b《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
  P( u; C3 `- Z  n在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
( O3 f$ v; Z' z* \原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 ; c, Q9 }$ u2 w& i
直接上代码,注释都在代码里面了。' ^# t1 \( [. L, w9 O* Q$ H
0 D2 h3 K6 }( n  j0 w6 l* O  Q
  1. <body >
    6 h0 N- z/ z5 T
  2.     <header class="mui-bar mui-bar-nav white">
    ) d9 Q# ^+ M" L3 y, q: x$ Y8 @
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>& _4 _, H: V. i8 D
  4.         <h1 class="mui-title">二维码扫描</h1>1 q$ p0 ]2 E/ R' ^1 }; w
  5.     </header>
    $ b5 ^- D5 w; H: h# c
  6.     <div class="mui-content">* v$ U* Z0 g! n) V
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    : J( o. C; J# s  ~
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    3 E" c! Z9 E2 G" `9 L$ {4 ?0 W' _1 k9 u
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    / r% A5 D) v4 M3 E2 T
  10.         <div id= "bcid"></div>+ T, P8 s5 r: O0 T  u; n* @/ S, N1 A
  11.     </div>7 [# U/ `7 C' S$ O
  12. </body>
    . L: E7 n; _9 @& w- p
  13. <script>
    1 h  r+ @( i/ Y3 r3 n
  14.     mui.init({0 p8 \' e# X9 m, z, {
  15.         swipeBack:true //启用右滑关闭功能
    % y' V5 f+ y7 a7 o
  16.     });
    , J7 q3 A4 r1 {: S6 w8 y* _
  17.     var scan = null;
    0 R. J, F7 Z1 b+ K
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭- y6 j: u! L) D; j( E" O& Q
  19.     // 条码识别成功事件
    & X1 M6 z4 f+ Z
  20.     function onmarked( type, result ) {
    9 I- i( n" L; g& U& v7 h0 J
  21.         var text = '未知: ';4 o/ o. g9 l/ u9 ^3 P' I0 ~& Q0 }
  22.         switch(type){; a' O4 c6 b/ O+ x% I- O& l& x
  23.             case plus.barcode.QR:! v9 ?) D7 s' ?2 F, w
  24.             text = 'QR: '; // 二维码) q4 J: N# P: g# a! K' k
  25.             break;
      L# H$ U( W/ {% Y7 ]
  26.             case plus.barcode.EAN13:
    6 H) W8 f+ [9 `1 M8 [  t! V
  27.             text = 'EAN13: ';
    ; Q6 A/ b- V( t2 {9 v
  28.             break;
    # @; R. z+ o0 b6 I% u2 Y
  29.             case plus.barcode.EAN8:1 Z' N- i, G& ?  C
  30.             text = 'EAN8: ';$ K( e; E0 c/ w& n/ ~& ^. a9 Y
  31.             break;2 v. u' b. r; i+ ^2 `  I
  32.         }
    ( J$ i- Y2 c# D; }1 F0 W6 H
  33.         alert( text+result );
    2 D6 B9 s9 |$ }" c+ g# `+ G
  34.     }4 l5 H% D8 B6 \9 E' ]4 E
  35.     // 创建扫描控件
    1 j0 t- \1 `; O0 g/ J7 e+ Z
  36.     function startRecognize() {9 Z& \2 [) F8 Y) t+ R  ^2 D
  37.         scan = new plus.barcode.Barcode('bcid');
    & \3 I6 r! I7 ^% f+ j# @/ s' H
  38.         scan.onmarked = onmarked;
    % ]! X& n5 x. x. l8 c$ p
  39.     }$ U1 @7 @$ t7 E. c/ G# O% F. x
  40.     // 开始扫描
    9 H4 e: Z$ ^) l* a
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    7 \* F6 G; s1 p9 z; M& G+ l
  42.         startRecognize();
    " [9 f3 e7 L9 N, E, n- W
  43.         scan.start();) a! g6 @0 k) k1 s% R
  44.     })
    7 @) v. U# ^  Y. `; C, W
  45.     // 取消扫描3 s& b' `& c+ i$ t8 y2 b
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){, |( \1 x. R) A1 H# T# c' e( w
  47.         startRecognize();, n( O4 i, f. B! M: }* `* [. E: x
  48.         scan.cancel();
    $ I, w7 k. U+ u- ]
  49.     })! F) c! [; Y/ z7 X9 I1 M
  50.     //  开启和关闭闪光灯7 V& p8 z, i$ M( K+ b5 o
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
      ]- h- {& A8 A
  52.         startRecognize();
    - U; m! F$ r1 a
  53.         isOpen = !isOpen;
    & z1 `7 S3 _. R  F" x1 G
  54.         if(isOpen){
    . [( Q' K! `$ Y% V
  55.             scan.setFlash(true);6 a( s. v5 A3 d/ l
  56.         }else{) \5 E: I% V& i1 x0 O8 O$ |( A
  57.             scan.setFlash(false);6 m1 b: F1 D0 \: q% A4 M# u  Y
  58.         }
    ; _0 j9 v* f3 s2 P0 m
  59.     })# Z7 p+ e2 q& I( z2 ^
  60. </script>
    ' {9 v, F/ l0 z* \( W% \
复制代码
6 |0 U3 ]* u, j) B/ U
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。0 D) D+ R4 Y5 N8 m* W% G+ _

8 m6 W, |) C+ k1 C4 X  i' t  ?4 h
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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