cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。 - }9 N! m" B0 q" u7 H4 j$ t7 n% \8 n
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
4 N8 Q5 V* Q0 X: W$ e, G《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
8 U3 L( P0 ]) [( {《【iOS】CoreImage原生二维码生成（一）》 , A4 G; x- [0 R4 E' {/ s
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
8 X+ G0 p; L# W- I7 z3 P0 r在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 ( t1 M+ `4 P4 j+ g3 ]) ?* ]: r
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。 + N/ s, |6 S" S
直接上代码，注释都在代码里面了。
2 H# z' h3 l: }: y- d& m8 h6 f* Z& C* M. Q( y8 X+ [
  1. <body >3 C: T$ I$ o5 C' v
  2.     <header class="mui-bar mui-bar-nav white">7 g6 T9 p. V! d5 o: o
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    1 }7 i. T# `* f4 _
  4.         <h1 class="mui-title">二维码扫描</h1>% S! o& d& j3 j' C. G, B; H
  5.     </header>4 Z1 x( n; Y3 o2 Q( C
  6.     <div class="mui-content">8 [# r: {  o8 X  v3 ]" G: M# m: \
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>5 D9 ?( F! o5 |- }
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    5 |9 x. G+ r: [' e0 s) D+ c6 y  h$ a. e
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    8 \. Y7 ]! @0 u0 c& j; o# @
  10.         <div id= "bcid"></div>
    ( p% [3 Z4 }+ f* H8 H2 r$ P9 E
  11.     </div>
    ! q! w" x" S. g! D: T7 L7 {
  12. </body>% C! N- k* {# }/ t8 E6 o% e% ]& t
  13. <script>* w( ?9 K8 L) |* l
  14.     mui.init({
    1 I6 M7 `( f; L
  15.         swipeBack:true //启用右滑关闭功能- U. X6 W8 s2 F8 o8 `/ q$ s
  16.     });
    1 x9 g: g5 }. L) q. d0 K, L! M
  17.     var scan = null;8 G8 C" z4 j% e5 y4 u6 x; s" |
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    8 n5 J5 e& n  I' `9 ?; r# ]
  19.     // 条码识别成功事件; P. T; e2 Z; m, Y7 [
  20.     function onmarked( type, result ) {! p) f" p+ U  I: J
  21.         var text = '未知: ';1 O5 g! [  a$ K* t5 y9 U8 r( f
  22.         switch(type){
    % a1 `/ d/ Y/ y) \9 F
  23.             case plus.barcode.QR:
    - d) i4 W& T4 U7 `7 v, D8 G' B
  24.             text = 'QR: '; // 二维码
    9 a6 V2 J+ k6 G/ Z" N2 y& x/ `
  25.             break;
    - O& j9 P: G2 T+ k
  26.             case plus.barcode.EAN13:$ P0 m# r! k- L& T/ W
  27.             text = 'EAN13: ';
    + A* s# d* `6 f* V2 p
  28.             break;3 H" p9 h0 i: E2 N4 O/ [/ C
  29.             case plus.barcode.EAN8:
    6 `0 V+ `" q3 j5 e3 U: S. p
  30.             text = 'EAN8: ';# [5 R% Z* Y# R  F% d0 L: Z
  31.             break;: q) z, c! O6 @+ ]
  32.         }
      Y. p. g; T+ o8 g$ a+ {
  33.         alert( text+result );
    ! k- u8 [: ?* ]( D* m
  34.     }3 W+ p. r  T0 P* s- D
  35.     // 创建扫描控件( b: S3 x* {" B# y
  36.     function startRecognize() {
    ) N$ _0 s, u6 W& N0 P7 b, @  U* v" H
  37.         scan = new plus.barcode.Barcode('bcid');7 K/ Y0 J( X/ O+ w5 i2 Z1 N6 |
  38.         scan.onmarked = onmarked;
    0 C$ t4 D# w) J) B
  39.     }  C: O. V# X, Q0 [6 |
  40.     // 开始扫描
      Z8 H/ T3 R: m3 j4 v) Q8 C3 y
  41.     document.getElementById("startScan").addEventListener('tap',function(){$ `. C. j7 k7 K/ |7 V7 Q( U2 L  j
  42.         startRecognize();2 u1 s' w+ ?" O* v$ _
  43.         scan.start();
    ' ?: z# G7 y5 Q2 }$ r# E9 R/ M; z
  44.     }). D1 x$ l! d7 m" w4 L1 u# ~+ t
  45.     // 取消扫描
    1 c  v8 U* D  z' |6 S/ @. [
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    % O+ C) [) w, ]8 D
  47.         startRecognize();
    3 e+ H. U3 ~% F& j" Y
  48.         scan.cancel();2 N* `+ B. u: g. k5 [. o
  49.     })
    9 L' G# }* c, g: c
  50.     //  开启和关闭闪光灯
    4 |' E/ C2 }& g7 |
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    ( J8 q$ S; N# u% e6 i* j; A- z
  52.         startRecognize();7 }5 [' d) g6 X, E- ]) W: M
  53.         isOpen = !isOpen;
    ' H" B& @% D; _5 K% E: T
  54.         if(isOpen){8 Y3 [( h* `8 K5 I0 i, n% ?) m
  55.             scan.setFlash(true);
    6 T. q4 U' h, n$ a7 x; d6 H
  56.         }else{
    5 f: H! O, ~/ B# a
  57.             scan.setFlash(false);, [, u! C. b: O0 t6 h3 W
  58.         }
      N8 z6 F( Q0 K5 h/ J  `8 f
  59.     })* o: W" W! `1 t9 X& K" b
  60. </script>8 U% C! M/ }2 p  }! U4 S$ V
复制代码

4 D/ `% ], O) N$ F# M效果图什么的就不上了，和前面提到的文章中的效果图基本一样。) C1 Y# \, X8 H0 k. C% n# ], t* I

7 ]8 X5 A' ]: o* |! V$ a3 |9 L



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