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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 6 Y* {7 C" v, P5 q- P/ C
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
2 F( l+ R5 ~0 s; ?& h《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
% q2 [/ S8 v. D# s% L《【iOS】CoreImage原生二维码生成(一)》
: H+ O2 N: b% U8 }" v% ^5 U《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 $ o1 G+ E+ ^8 A. M, X
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 8 M- T2 L/ J) |& `2 M) g( V
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
, V  w& ^( D' `- d+ B; g直接上代码,注释都在代码里面了。
" j  P, ~4 {) Z& W* K
" [# K) l3 c5 v- X1 p+ b
  1. <body >5 R* v1 F- Q: a8 v6 |
  2.     <header class="mui-bar mui-bar-nav white">
    . M9 f" [1 X$ y
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>9 v1 n* K2 P6 J4 o" ]
  4.         <h1 class="mui-title">二维码扫描</h1>0 }$ t5 e) H3 w$ s! K
  5.     </header>
    3 I1 D- z& e' d  y7 ]/ S/ Z
  6.     <div class="mui-content">
    ! x, s$ U! Y" s# L9 z
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>/ {- g. m4 s5 {/ x7 E! l
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    / W# e- {4 F0 d' d
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>4 \% n( s5 x+ S. b- G+ ?
  10.         <div id= "bcid"></div>6 B$ ~# k( y! F3 y# T# T: j/ `, H/ G
  11.     </div>" `" S7 C& r9 Z5 F7 K
  12. </body>' i5 j/ f: @5 [$ d" d+ z) e$ c8 ~5 E
  13. <script>/ }6 E; g5 _' F* z; A, r* y
  14.     mui.init({
    # L% b6 P+ V! h1 r1 R
  15.         swipeBack:true //启用右滑关闭功能: ?! h8 ]+ h8 f- G1 o5 E
  16.     });
    ; f" ]1 B: @# B2 v0 C
  17.     var scan = null;
    , x3 s6 s! Y/ o) A* Q' s% o* ^
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    ' v: z+ r6 A- c$ D1 R$ F
  19.     // 条码识别成功事件% v, K5 U. B, M9 h, E
  20.     function onmarked( type, result ) {" I9 x" ^& i% m' ?% M) o# _
  21.         var text = '未知: ';+ {# q- ~/ _5 U
  22.         switch(type){
    / f- c, z" T& c. {/ Y7 a: \) e9 B5 `
  23.             case plus.barcode.QR:1 a" M9 }) u+ {2 e0 i
  24.             text = 'QR: '; // 二维码/ l' z' F! t& n9 x3 m: Y
  25.             break;
    4 u, J* _( Q: l9 N: G! e. n9 q' m
  26.             case plus.barcode.EAN13:
    ! ?, W0 Q2 h1 X' T4 E
  27.             text = 'EAN13: ';
    & m6 G7 \5 d6 a6 d0 u/ c/ ^
  28.             break;% i9 c( k/ i; c+ \& w$ M: {8 x( r
  29.             case plus.barcode.EAN8:0 D- J/ R0 p( U9 e0 l; l
  30.             text = 'EAN8: ';) ?" Q- z, r3 u2 E5 c
  31.             break;1 U4 J4 A# E% ]/ Z# n/ d8 H
  32.         }4 Z& y& u. k. U
  33.         alert( text+result );/ l" r. ~, J4 y
  34.     }" S, ~8 V7 `/ |1 u4 ~
  35.     // 创建扫描控件
    ( ^1 A! Q- h. K; g2 P
  36.     function startRecognize() {* q' G/ Y4 }0 d( V  o
  37.         scan = new plus.barcode.Barcode('bcid');9 F2 n- S1 h/ K" T" V
  38.         scan.onmarked = onmarked; * M- a; ^9 P  {! F" t9 k. B) f
  39.     }
    # f4 ]; j8 p2 L4 W, ]3 @
  40.     // 开始扫描% E  E1 d; T( W9 k. Z9 T
  41.     document.getElementById("startScan").addEventListener('tap',function(){' S" n1 Z- J& [
  42.         startRecognize();
    & \! l+ v% X9 M1 I
  43.         scan.start();' Z2 P2 H9 b7 ^$ o
  44.     })
    $ \3 o# d" Q1 l
  45.     // 取消扫描5 n5 J- I  {& i2 m7 v' p
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){. ^) ^+ e4 `2 I' Y* I
  47.         startRecognize();
    1 Q7 S3 P5 |9 P. _- v5 ]
  48.         scan.cancel();& _; X% G: c& |  s5 u4 p
  49.     })( ^2 i; f& ~" C- v& h8 E! Z/ w
  50.     //  开启和关闭闪光灯
    6 [- H( ]4 F$ K2 q1 j5 w8 `: a: V
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    3 d6 h( p& S0 [( U! t* Q- P
  52.         startRecognize();
    + ~( y% `5 ~( z) L* e9 c, r
  53.         isOpen = !isOpen;
    8 l) l+ d1 T" H  p; M" @- `, v
  54.         if(isOpen){
    $ F. F, @' b. e+ E3 H
  55.             scan.setFlash(true);
    # E" S+ {1 ~- `& P; G
  56.         }else{' h) ?/ c; t: I( o
  57.             scan.setFlash(false);
    0 F) i" M# _, y' c# J- I1 N1 D
  58.         }1 A( i2 ?$ o4 [: D% L8 I: @
  59.     })
    & z  Y  L( r) J
  60. </script>
    7 }0 w, j1 [& F3 C( L  W
复制代码
  v4 @- q: [; K; L9 }
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
1 `" Q; g* ~  u3 t) Y/ N3 c3 A! ~- }) ~& i" f8 z. y# [
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 21:49 , Processed in 0.054196 second(s), 20 queries .

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