cncml手绘网

标题: HBuilder webApp开发(十三)二维码扫描 [打印本页]

作者: admin    时间: 2018-10-31 02:06
标题: HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
( O; E0 p# {! m7 s以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: # @2 ?- S& z- o+ G0 x
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》 * Y5 R3 T5 p2 D- m
《【iOS】CoreImage原生二维码生成(一)》 ( w8 e( v/ N, ~! G& f$ K+ ]* ^  H& @
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
$ x& l5 ~* R1 g* r# @3 p在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
5 N' X' N- J' I( k3 N( M原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
: v; |2 s1 N/ y7 ]直接上代码,注释都在代码里面了。* b# }7 M( F% ?3 k

9 A& R! A& g& c' L$ C
  1. <body >- G& `; r& @& o4 s+ y% {( ~. I
  2.     <header class="mui-bar mui-bar-nav white">
    . d: M9 @. }) T+ O9 q7 e. b
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    9 p# |7 @" S' B( E) ~1 ?
  4.         <h1 class="mui-title">二维码扫描</h1>1 g5 G3 n7 L+ a
  5.     </header>
    1 d& M$ ]0 Y8 X! j9 M. R
  6.     <div class="mui-content">4 W* M7 h3 P) I6 t/ P1 E8 ?: n# D( W
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    & a+ |- r' v/ H% @8 D
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    # ^: _9 V+ R! @! Z  `/ d
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
    2 D+ s' x- l+ f
  10.         <div id= "bcid"></div>
    $ a* J5 l4 h; Q3 O, X/ q
  11.     </div>1 k1 }3 P: ?  c1 J9 e
  12. </body>3 a+ a) g4 `- _0 |7 y9 d* T
  13. <script>' a5 Q. f/ p4 c9 R
  14.     mui.init({( R/ O6 t7 U0 m3 q* t1 K, S
  15.         swipeBack:true //启用右滑关闭功能
    . @7 l. ~7 R! C5 ?/ l
  16.     });1 F' b6 Z5 }) x3 k
  17.     var scan = null;# x: u; ^( }/ r. D+ r, F
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    6 u$ \* L# A; }" M/ `: k0 ?
  19.     // 条码识别成功事件
    ; c; w$ s1 \# {* O8 @" z" Z. d
  20.     function onmarked( type, result ) {
    : Z# H  V7 H7 B( C
  21.         var text = '未知: ';; J: l2 @. W6 S/ l
  22.         switch(type){
    % \& P0 j  O3 E  v' i. F, {
  23.             case plus.barcode.QR:
    % p. R- ~, }, i
  24.             text = 'QR: '; // 二维码
    2 B* m) f3 T4 b; p9 U! z
  25.             break;
    % w5 A3 @5 x" A+ t: D
  26.             case plus.barcode.EAN13:
    4 ^* V2 c6 ]( K, ^% Z7 T+ K2 Q
  27.             text = 'EAN13: ';4 m0 P, Z: U% g( ^  v
  28.             break;  o$ x) A/ _2 m" ~8 A, x# a9 |7 J
  29.             case plus.barcode.EAN8:
    " P  t, N0 j( p  U
  30.             text = 'EAN8: ';) Q5 I# A/ ^4 B9 v3 U- f2 h' z+ Q
  31.             break;  F* @  x- b7 n# q
  32.         }
    / S+ P! e- Y2 K
  33.         alert( text+result );' Q2 ~; B1 N; E" c! e, M
  34.     }
    # r& [5 |7 p. N( @; R2 R
  35.     // 创建扫描控件( `3 w5 e! X* ^3 a1 a
  36.     function startRecognize() {
    * B: K6 O1 A5 b; A% q* v; r5 j3 k
  37.         scan = new plus.barcode.Barcode('bcid');% s; d) w2 N2 w3 \0 G0 s. K
  38.         scan.onmarked = onmarked; 9 A$ B; _: Q/ \  u( J2 E
  39.     }, p  S# I# k& b* _9 C
  40.     // 开始扫描5 f3 @: N5 _0 d) D7 o
  41.     document.getElementById("startScan").addEventListener('tap',function(){% y: |( L0 u8 L9 T: d4 X
  42.         startRecognize();% ^! J7 E: s9 X4 A- n  O
  43.         scan.start();
    1 c" B0 C% \. L" e+ H
  44.     })$ u9 _  c* C% y. p/ B/ Z, _
  45.     // 取消扫描
    5 A6 F8 W  r+ Z2 K% |2 _- i; f: @
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){
    # R) b' _8 g0 \; G6 x
  47.         startRecognize();
    5 |7 L% M$ @( V
  48.         scan.cancel();
    $ P7 }' A4 n8 ^3 [3 ^
  49.     })6 f5 t# }) Y, i5 p- p0 ?
  50.     //  开启和关闭闪光灯5 @2 X7 x  N  b/ t% \
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    # S5 m! W' V) p+ s7 r' M* ^
  52.         startRecognize();# y7 c5 \% P5 C3 L
  53.         isOpen = !isOpen;: A8 O! o) p8 h* M+ \
  54.         if(isOpen){
    " c) b# `* A- g# k, V4 W
  55.             scan.setFlash(true);& E: ?% T$ O1 f' z" c7 {, k7 w
  56.         }else{; _% S  L# B: y  |
  57.             scan.setFlash(false);
    4 q$ Q, T& M9 H2 u; M. m
  58.         }
    & Y' H/ K/ q& S  z  [
  59.     })0 m8 T# M% _. v: @
  60. </script>
    ( N( k0 R; Y* ]2 S
复制代码
* f% Z+ x. ~! P1 i8 a9 l  e
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
! ?' j: n) e: T2 F9 O0 c/ V# G  Q. o, D0 P5 F6 K. w





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