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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 ' s2 m( K* v: m6 G5 @& f; _
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: 8 u) }/ S6 ~  C  }6 p
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
) o7 _! c1 I( d$ ]8 _  N《【iOS】CoreImage原生二维码生成(一)》
) U8 B, @) _* X4 I5 @# \《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 , B$ M& J% N: ?+ p. R
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 6 e9 f9 P6 q+ q' }( }. q( V6 `" Z! W
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 " l/ o: R7 ~9 Z  M5 ^* S
直接上代码,注释都在代码里面了。: z  h" y) U+ {; H' u

7 L0 p& U, w: z; e. N* I6 C
  1. <body >) U4 |1 ]0 Q5 G! d3 c& ?
  2.     <header class="mui-bar mui-bar-nav white">8 |7 G7 Z# a7 X  x. }; |% G# T
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    + x% u' {; |, ]) o
  4.         <h1 class="mui-title">二维码扫描</h1>& L, E; C9 n. u: k5 k0 D) f2 i
  5.     </header>
    5 ^& b# D6 M6 V, q% ^
  6.     <div class="mui-content">
    , L' a6 v8 O/ L, O
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    . \& w: y7 X* d3 P: ]7 }8 n
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    $ S& U" }) ^+ ]6 w
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>4 J3 v* z! N6 m- j% a
  10.         <div id= "bcid"></div>
    # I" v/ J0 T0 p; c; ~" r8 ?
  11.     </div>
    ; G, K$ T: y+ L; U: {
  12. </body>
    ) e, y) m& l$ w) g* ?- D* u% o+ o
  13. <script>
    7 @5 }: J& F1 S) ?/ E: ]9 P' @, ~
  14.     mui.init({
    3 R8 Q) u- m0 K/ l
  15.         swipeBack:true //启用右滑关闭功能0 ~" L3 K/ x+ t* o9 ^2 ]# C5 Q
  16.     });
    4 ^+ u, N, y  h9 P: N
  17.     var scan = null;% Q2 E6 X3 P* ^0 h) a* y5 @
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭6 S* n* S8 W7 u3 z2 w' C) y
  19.     // 条码识别成功事件
    7 M7 m% Z. n+ g
  20.     function onmarked( type, result ) {
    / I# L! p. l) e
  21.         var text = '未知: ';
      O+ J8 W3 w0 n  c) {, Q; y5 S$ {
  22.         switch(type){9 ]6 v/ B! M7 H% z( E7 p( G( h9 g8 z
  23.             case plus.barcode.QR:, I. f# |$ P' C+ M# D
  24.             text = 'QR: '; // 二维码
    & {0 n6 y0 |! l& o8 w- C
  25.             break;
      x$ w5 V2 p" X' G0 b4 g$ f/ d
  26.             case plus.barcode.EAN13:$ D; m0 v& U# p) _- x2 H/ a
  27.             text = 'EAN13: ';1 R6 `0 Z& O1 M1 Y* t+ m) U
  28.             break;! R9 P# ?$ w- Q1 `* W/ m: _) F, o
  29.             case plus.barcode.EAN8:
    1 w+ {3 s- ~; K% e
  30.             text = 'EAN8: ';9 `5 {' x% O2 N+ y, O( w
  31.             break;
      S: m- |+ d' Y+ S
  32.         }
    1 x" ~+ ^! o3 E0 x
  33.         alert( text+result );2 F) d1 t! e8 d8 c$ I* P* R: \
  34.     }
    4 ?. u; k: s% z5 r" c7 B
  35.     // 创建扫描控件
    . u+ z* w! i* l, h( K* Q
  36.     function startRecognize() {  h/ X, o( j# O9 u$ J, u% u9 U9 Z
  37.         scan = new plus.barcode.Barcode('bcid');
    . ^" e) N  h4 q. f: \& ]6 T6 i
  38.         scan.onmarked = onmarked;
    ) g4 S) w. G0 F. ?5 I
  39.     }- L# C0 u, w$ f8 I: P6 X! I
  40.     // 开始扫描
    - `6 t4 _# s. L4 H) }# v  A* o
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    ; p. G6 _: r& @2 L% O5 W
  42.         startRecognize();7 i9 }% j. m- N
  43.         scan.start();
    5 G/ T8 y. r+ n6 q0 F: w
  44.     })' V+ i1 c5 r! Q+ e" {3 b% F! Z
  45.     // 取消扫描
      q3 B$ O9 l. |' }* e' f# v5 T, P
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    ( ?! e1 a$ e0 P+ h$ L0 U, n7 ^6 v
  47.         startRecognize();
    4 b2 s+ g* e$ q& l7 [  E
  48.         scan.cancel();
    ; G6 X$ D5 K- H  m# ]$ O
  49.     })
    - m6 H: e3 c0 X, m
  50.     //  开启和关闭闪光灯6 d6 p# K) k( N8 W+ j
  51.     document.getElementById("setFlash").addEventListener('tap',function(){& f& D0 T) {* S5 p- Z3 a& X
  52.         startRecognize();
    ' o6 K2 y6 x2 d" n* N! p
  53.         isOpen = !isOpen;  Q( T0 o3 V1 z5 i
  54.         if(isOpen){
    $ |* d6 d! x; O# D! E. l
  55.             scan.setFlash(true);
    / c; S/ J$ Z( [4 Y8 R0 x
  56.         }else{
    ' C! Y# d6 Z# t1 }1 [% @0 c: ?; q
  57.             scan.setFlash(false);
    0 B1 E6 G4 E7 |' G
  58.         }
    ; f! Q; [4 O6 E8 D
  59.     })
    9 z! `0 X9 O' H  T
  60. </script>$ q5 j" c0 z, Q# X
复制代码
" b/ R6 N4 X; U+ |' k- c5 V7 j% d
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。) _% i3 G  W' R
; ?' g1 T# B1 n$ }2 t
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 20:03 , Processed in 0.068386 second(s), 20 queries .

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