cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]
作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。 7 x3 Q9 b8 \9 a9 _: ~( Z
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
6 m! I/ E% Z! U" I  T5 I" d5 [7 y4 X《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
+ `* ~% L: G2 O2 P《【iOS】CoreImage原生二维码生成（一）》 " O) p' Z' {5 k! G  ?9 H
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》 ! }+ o9 p/ Q4 L+ x4 h
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。 1 [: x. {( v& d" x# x( Z$ q
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。 , W9 y* Q2 u& p( h5 s" f
直接上代码，注释都在代码里面了。
  i9 ~& f: \6 S
, S6 i/ @8 x% y, ]; Q  O+ x
  1. <body >
    ! Q+ [7 C6 J2 S& Y5 p4 f* h
  2.     <header class="mui-bar mui-bar-nav white">' G- {  k* }' q8 {. q7 J
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>: g  N' W- W5 Z3 _# u. c9 M3 V% C
  4.         <h1 class="mui-title">二维码扫描</h1>* p5 h& W. G' H" L% K9 w2 s$ K1 t
  5.     </header>
    ) K: ~, J/ }8 l9 b
  6.     <div class="mui-content">
    ) ?+ }9 |9 C$ l) }
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button># {3 a! o% p0 X! T: T
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>1 _8 M8 S  |" q, J* Q7 @
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>3 \0 x" `5 p# |6 N( B) X/ T8 L$ l
  10.         <div id= "bcid"></div>
    / J( X+ l; P3 M, h
  11.     </div>0 x0 F( y8 J: T9 r7 F7 Z
  12. </body>
    + r1 I2 g3 w  I0 ?# i6 R* _
  13. <script>$ l- n- k/ j5 S$ r
  14.     mui.init({
    - n) c! x! K1 A; y$ n
  15.         swipeBack:true //启用右滑关闭功能
    2 \7 D! n8 G" r' o  b; U
  16.     });* u. w1 y9 l/ Y
  17.     var scan = null;  Z" ~( f" @4 M; W
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭; }' _. Z: A; x+ S
  19.     // 条码识别成功事件
    ' X9 f) a/ l& J! P
  20.     function onmarked( type, result ) {
    " \. _  x8 y1 _4 Y& b5 `
  21.         var text = '未知: ';7 o/ D% L4 b7 X( W' @! m2 h
  22.         switch(type){
    ( t% O/ Q  L$ L' i0 P8 A
  23.             case plus.barcode.QR:
    ' k+ a9 z5 u) N0 b
  24.             text = 'QR: '; // 二维码
    6 {) N( a: l7 U3 `
  25.             break;
    & `( N; w: l+ A$ @% m# ?
  26.             case plus.barcode.EAN13:( M+ Y" K" |. C
  27.             text = 'EAN13: ';
    / u, I% \  Q( J" I2 r4 d
  28.             break;
    ( X5 P% ]% k8 D+ L2 {$ v
  29.             case plus.barcode.EAN8:% O6 q" P1 b% b4 _" S7 l  f
  30.             text = 'EAN8: ';
    * @5 t3 U. u1 f2 [; s8 S
  31.             break;! J0 |' h( }( j- Z1 s; E- A% N
  32.         }
    7 b: A3 r# ?9 g( Y  c
  33.         alert( text+result );
    / R. G' }+ }- b( J
  34.     }
    ( {/ g- ?* p) D9 T8 I& [0 B
  35.     // 创建扫描控件
    9 U$ ^+ k# ~5 G
  36.     function startRecognize() {
    ) v: |4 O6 B  e) F
  37.         scan = new plus.barcode.Barcode('bcid');, e0 g) _3 ~' ^% K
  38.         scan.onmarked = onmarked;
    ! O- n; a% ~0 H, E
  39.     }
    9 o" T; B* T3 l* \
  40.     // 开始扫描
      O, X$ v1 ^, x8 B% {% e8 j4 u
  41.     document.getElementById("startScan").addEventListener('tap',function(){
    & D9 Q( X8 v( B2 R+ q3 i# `. e
  42.         startRecognize();! t/ F1 I' m% r4 G
  43.         scan.start();
    , G% J* h) x0 k; v  `5 N
  44.     }); p* u( B( b7 L% e1 J+ k$ g: A
  45.     // 取消扫描
    5 z$ X5 D7 ^5 _
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    & k$ R. t4 k! z3 T' f
  47.         startRecognize();
    , F* L# f" D7 a+ \$ o
  48.         scan.cancel();
    # c6 _3 _8 W6 K7 o
  49.     })3 w$ n8 ~/ _4 r- G. v0 @
  50.     //  开启和关闭闪光灯9 s* l+ j: k1 L
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    - ]6 a4 M+ K4 f5 L; B
  52.         startRecognize();
    2 z( A) O- {$ E! e
  53.         isOpen = !isOpen;6 _- n( {/ V! c9 ~# ?1 [
  54.         if(isOpen){
    2 w# E8 ~. ^' P$ p( Q/ g
  55.             scan.setFlash(true);
    * G) O  I7 ?5 Z  k* ]' I+ J7 s
  56.         }else{; [6 r, ?: |/ S4 M6 H
  57.             scan.setFlash(false);: d; x. H% A) s. P1 o5 @8 _
  58.         }
    $ @8 M5 O# z% V/ N/ {5 o" ^
  59.     })
      R3 T  [% d: _( [# R5 i; L
  60. </script>
    ' ^5 a* \8 `! \7 e6 {) \# ^
复制代码

3 s& ?& J# r9 ^8 P7 h效果图什么的就不上了，和前面提到的文章中的效果图基本一样。
7 d) R! M; ]3 J+ v  l; [5 Z5 m7 Q1 m8 e+ }




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