cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。 9 |$ Y1 M$ V' Q1 R) l8 Z1 b
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
2 m8 R; Z, q, J0 T5 r《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 5 U0 P* v" M, @
《【iOS】CoreImage原生二维码生成（一）》 1 B; c4 ~" C4 N$ y8 S
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
0 H0 h- P9 {$ _5 n在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 - b! O/ W5 F6 V6 p/ O; q+ L' A
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
1 h8 F% O% o+ `. g9 s& l直接上代码，注释都在代码里面了。
0 X" x& g5 `0 a  y8 j& x' k& G# V
  1. <body >
    ! k# e% V6 |# T, P7 F) i
  2.     <header class="mui-bar mui-bar-nav white">) d; l, y, a/ }  u9 [; p
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>4 d6 g0 f% J* z
  4.         <h1 class="mui-title">二维码扫描</h1>
    . w9 Z; n" R  }1 N* d
  5.     </header>
    ! B) n+ F/ D1 G) K/ k
  6.     <div class="mui-content">1 T. @! c4 J5 K  ]& {- ~' |
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    + D% w! A# f& p+ ]; |
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>! @7 M/ A' l' \( o+ r1 I, t
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>0 u( j/ }( R' N, K
  10.         <div id= "bcid"></div>3 f( H8 o- e" I) }6 ]& M! b) l
  11.     </div>
    5 `& u! m) Z4 h$ C& u. r/ q" l0 O5 R9 b
  12. </body>/ C% r6 g* n' w6 X7 f5 U
  13. <script>
    & g4 U9 {; j) I$ J! J6 @
  14.     mui.init({6 x8 E; |2 k3 x* c# w
  15.         swipeBack:true //启用右滑关闭功能* K# l1 _  v- F& j+ j+ n
  16.     });
    : G& f. t& `% p7 B- K" R
  17.     var scan = null;7 Y2 Y. e, W  r, y
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭( |8 M0 P$ X6 f, x
  19.     // 条码识别成功事件
    1 d( w$ t9 p1 R
  20.     function onmarked( type, result ) {$ t" ?" k+ U' Y
  21.         var text = '未知: ';
    : Z# d" B& f  d. i
  22.         switch(type){
    3 X1 V' g# Q# T0 S- M
  23.             case plus.barcode.QR:
    7 g4 C- ~3 f; H: \# D
  24.             text = 'QR: '; // 二维码, [6 l) D+ s$ X& a
  25.             break;( M+ g  b3 T* ^- W2 W' Z% k
  26.             case plus.barcode.EAN13:( [) C' x$ T* V7 r5 L; b8 I( ^
  27.             text = 'EAN13: ';+ A# `. H! ~8 a3 H' a
  28.             break;, {. g; [$ d- T8 v2 i5 H
  29.             case plus.barcode.EAN8:
    & q5 t$ W# h( f  ?& X; Z1 q
  30.             text = 'EAN8: ';- |; t2 i9 a' G* F4 @) {1 H
  31.             break;0 f7 v' h) T3 T$ X0 C
  32.         }
    % D: N# @2 G  S6 y! U9 e) k- h
  33.         alert( text+result );6 w! I7 O% }) y' o
  34.     }
    6 `, h4 u+ z2 b6 [* S0 o3 @/ n. \& x
  35.     // 创建扫描控件
    % f1 m3 Y+ p* `8 x
  36.     function startRecognize() {
    & {8 S, V2 H0 r' \; K, y/ _. ~
  37.         scan = new plus.barcode.Barcode('bcid');3 p/ [: L, B1 R; a) w8 A1 T
  38.         scan.onmarked = onmarked;
    ( S6 E! a9 [% r7 R2 C" l  _, m1 Q. s% b
  39.     }
    4 l& N, a) L8 r( {' M
  40.     // 开始扫描. `: c2 g  ]) F; ]9 _
  41.     document.getElementById("startScan").addEventListener('tap',function(){
      v1 t4 |9 P, ^% p0 [
  42.         startRecognize();7 {! `+ c1 l6 m2 w7 ^& `
  43.         scan.start();
    * u+ s3 O( ]2 [5 S5 L
  44.     })) c$ N" U! y, u/ p9 G' z
  45.     // 取消扫描/ p; A3 y3 h6 v2 @
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    3 ~3 ~6 A, p; K1 x  k& q
  47.         startRecognize();
      S7 ]4 v, }- p) R9 b4 X- k
  48.         scan.cancel();
    + a3 _/ i& j( I
  49.     })
    $ d/ q. n  a  Q# s0 L. Z( `" l
  50.     //  开启和关闭闪光灯. Y9 m4 Y# R. F; U. b" d- q( b! W
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
      w0 U( o( j5 A+ T6 V
  52.         startRecognize();6 U/ Z5 c& T( E; |0 `; g
  53.         isOpen = !isOpen;7 V& _& s$ s; Z2 P; _0 b6 b
  54.         if(isOpen){8 b" I! V# [, `
  55.             scan.setFlash(true);
    - ~+ `1 W- E( S7 I6 v3 L
  56.         }else{
    # _; n5 K$ O3 h
  57.             scan.setFlash(false);/ O  Y7 o5 ]* k& b3 A6 f7 ?7 M# t
  58.         }: M0 v# E1 i9 _! F+ k
  59.     })0 p% z: j) O& o
  60. </script>* ~. F) G3 F* Q9 |" C- ~/ X) a
复制代码
8 H' @; M/ U4 F, m8 e' T
效果图什么的就不上了，和前面提到的文章中的效果图基本一样。* x' h, b; h# n( Z4 b1 t9 S: i

: C, u) z' F! L& @# {



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2