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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
% k. u8 _" _/ v/ P以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: 1 I$ l# @$ h) i3 s- |: H
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
7 ]6 R+ @* I- g, L+ p《【iOS】CoreImage原生二维码生成(一)》 ; V9 w1 k! P' W# v8 F1 x
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
3 I0 V1 X3 P4 Z4 P; |" W) i+ K- i在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
; X& s6 @6 ?" G  N: D原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
6 |- @0 t. k; o# f直接上代码,注释都在代码里面了。4 V, b8 ^% @0 ~4 a! c/ Z
7 j/ F* o9 M7 j% v# ]8 k( v
  1. <body >
      M/ _4 i2 }4 Y8 B$ b
  2.     <header class="mui-bar mui-bar-nav white">
    9 Y" [# C1 P: z! y# R
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>0 y  E1 |" y; y
  4.         <h1 class="mui-title">二维码扫描</h1>: \( w! v+ E, i5 y& }
  5.     </header>, n& Q4 i4 G$ j7 P: r5 f7 P
  6.     <div class="mui-content">
    0 H4 d# G7 h& o- {( ~5 u
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    / x/ z0 R) t7 |
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>* ~+ `6 `, b5 `  W2 n! u
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    , H# E3 G$ _6 V% D7 B. y2 u
  10.         <div id= "bcid"></div>
    2 e9 q0 \( ~5 o4 U* ^0 m
  11.     </div>
    8 G. O. @6 }6 N& g
  12. </body>
    6 t, U4 B( M2 {' A# Q( ]
  13. <script>+ f) R  E& w! g9 u2 B) m% [+ `6 x2 A
  14.     mui.init({7 m& ~4 e3 w; q  E/ J
  15.         swipeBack:true //启用右滑关闭功能
    7 _" S9 K8 w; s4 L
  16.     });
    , P- t" e4 t( a6 U4 k) Z' I
  17.     var scan = null;
    6 c; c" v7 {, a7 t
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    ; }" I: S* x+ P0 N  ~3 y% c7 l
  19.     // 条码识别成功事件- D" x' a* ^" _7 X* B
  20.     function onmarked( type, result ) {! r, N/ G# E( U) A2 l
  21.         var text = '未知: ';9 H6 K( T) b5 u# {; A0 V
  22.         switch(type){
    5 x8 `4 Y9 U4 e7 B
  23.             case plus.barcode.QR:
    & a6 i/ E& W3 |
  24.             text = 'QR: '; // 二维码& f! H2 D7 Q& z/ D
  25.             break;
    8 m" C+ \: ]3 u" ~9 G
  26.             case plus.barcode.EAN13:
    1 p& i% c& ^% w$ @
  27.             text = 'EAN13: ';
    3 `1 K( v- w- P) C
  28.             break;) r1 ^0 D7 m, s- B" z" I0 Y
  29.             case plus.barcode.EAN8:
    7 E( [: ]* u6 J: A/ R% d
  30.             text = 'EAN8: ';
    * v( n+ k/ |( T! y0 |( d
  31.             break;
    % i6 U3 k# b1 `8 ~' h
  32.         }
    + J5 ?8 z. _- _+ E2 v* }% @
  33.         alert( text+result );
    / L: a1 \" p+ G4 D' G
  34.     }& Z1 {8 }) B& o' Y2 A
  35.     // 创建扫描控件3 f3 s. l! x8 W0 p1 R0 S* V9 v6 C
  36.     function startRecognize() {
    % H) u- Y5 T, B& i( M* h+ t8 w
  37.         scan = new plus.barcode.Barcode('bcid');& u% o; w$ [9 o# C/ v# x6 h2 Y
  38.         scan.onmarked = onmarked;
    , P1 i3 h! [- V
  39.     }: B3 y4 @2 o* ^2 }# @
  40.     // 开始扫描
    * d+ R5 ]& s9 H0 m5 \' g9 }: s
  41.     document.getElementById("startScan").addEventListener('tap',function(){4 v( \2 A9 o% f9 E$ r
  42.         startRecognize();
    5 M( A; q" B2 O7 F8 ~) ^$ W
  43.         scan.start();
    # R0 h" h" }4 j
  44.     })4 `  d+ k* U2 S; \% A" Y
  45.     // 取消扫描  W- t: i- Z! v8 m
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    $ M" f" ^' X' f) b5 j
  47.         startRecognize();
    % w# ^6 \; w+ R& f- z* A
  48.         scan.cancel();
    6 q( A5 E2 @6 L* C
  49.     })
    $ B& R' ~) h4 O) a3 z
  50.     //  开启和关闭闪光灯, H6 D0 W0 [  R& R* {
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    0 m* T4 U- Y/ B* J- Y' j
  52.         startRecognize();: T! Q1 s4 m: O& J$ U0 I
  53.         isOpen = !isOpen;4 v4 P5 t/ r3 K  X3 |4 O* [$ d
  54.         if(isOpen){$ ^& v. q) r# d8 a
  55.             scan.setFlash(true);) |9 f) S% I8 s* q2 |8 T
  56.         }else{
    0 i7 {" W4 C# g- u) ]0 X
  57.             scan.setFlash(false);( e" X( ^& ~! j, ?
  58.         }
    ( V" X9 @2 d8 e- ?" P) Z
  59.     })6 g- `7 W) h1 P9 {3 ]; y- h: s
  60. </script>
    9 g% N) ]) _3 ]: Z
复制代码
+ ?( t0 y7 l0 P& f& M1 I
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。  N' N. p# }! ^  \+ f; Q% g
( O1 Z# E( v+ R+ [* L
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 06:49 , Processed in 0.066238 second(s), 21 queries .

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