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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

[复制链接]
跳转到指定楼层
楼主
发表于 2018-10-31 02:06:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
  c7 B- j# ^; H/ A以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: ) a8 n! |* p8 I( L  d
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
& K$ \6 w! s2 g, G《【iOS】CoreImage原生二维码生成(一)》 ) `* E+ s7 W) p4 x4 A- s% U
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 1 M* V: L' j1 e4 Q3 L0 J
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 , i/ j1 W! P4 I4 Y
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 & K. v6 p1 \( ~3 ]5 d
直接上代码,注释都在代码里面了。
! W' K  F1 o1 n9 H8 K2 z" [
) _( B% Z) {+ o) R+ [, b3 ^; U& E
  1. <body >& e6 t3 G& N3 W% t* ~- b/ J
  2.     <header class="mui-bar mui-bar-nav white">
    # u" W9 D  S9 g1 B6 B7 S
  3.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>5 C& N% [/ q# R% M# N
  4.         <h1 class="mui-title">二维码扫描</h1>
    / N3 j* o" u# ]& Q7 E  V
  5.     </header>
    ! w8 M( Y. f( _; ^4 Z; `
  6.     <div class="mui-content">( e4 C  d5 i0 n# `' I( m
  7.         <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
    # l. O: E' y6 V
  8.         <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
    / P# q' N& J: O4 r. n
  9.         <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>& A" w  i) n  o7 ~, }- b9 Q
  10.         <div id= "bcid"></div>
    5 o, f. _/ u7 I9 H, h  n7 U
  11.     </div>; I' m3 T7 Z& Q' G! V& w
  12. </body>
    1 d/ G* m. @  o+ {& g0 Z9 X
  13. <script>
    0 N& y& T* m0 [
  14.     mui.init({
    " Z# x) y, n; k
  15.         swipeBack:true //启用右滑关闭功能
    4 O9 T+ [" ^% z2 \3 }
  16.     });
    ( A9 P) f+ n( J* h, ^8 P
  17.     var scan = null;- B- U5 p6 t; c% f0 |% O' e
  18.     var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
    3 V5 G# y; t9 e: Z" ^( y$ ~% T, E
  19.     // 条码识别成功事件' o1 l: \0 S* l, d7 m
  20.     function onmarked( type, result ) {2 i  N0 \# Q! W$ S& |9 ~0 n9 u
  21.         var text = '未知: ';5 b& W% p. o0 d1 d5 X: V
  22.         switch(type){
    ) G  a; `$ o/ i$ m3 \5 j
  23.             case plus.barcode.QR:% v3 h. E* y2 C
  24.             text = 'QR: '; // 二维码
    6 p1 s! |, z& ?; T$ b3 Z
  25.             break;
    / M& h+ ^& P  ~+ d9 s7 M! k
  26.             case plus.barcode.EAN13:! b/ A5 ?6 p  j& Z9 L! G& z) x
  27.             text = 'EAN13: ';
    # k$ [, W0 T. v+ E( e: h+ o; x' K
  28.             break;0 S; l  c: f0 U9 p5 M! k0 ^! h& ]
  29.             case plus.barcode.EAN8:4 O! F+ w+ p  K+ Y& D
  30.             text = 'EAN8: ';
    + p! |4 r0 h) }2 v5 t+ H0 @4 m3 w
  31.             break;
    $ A$ y/ t4 j: o9 \7 B( |. V" @/ i
  32.         }
    % H$ v  e+ c7 C4 C6 Q
  33.         alert( text+result );
    % X9 e  h+ o! ~# e; `" r. v  N3 E0 P
  34.     }
    $ J  T; Z5 r+ U/ i' C' m' a
  35.     // 创建扫描控件& o8 `2 e- L) P. K( M# r  ~; X
  36.     function startRecognize() {
    ! G) m1 C, k% F6 I5 f5 L0 I
  37.         scan = new plus.barcode.Barcode('bcid');6 m0 u4 m. ^, b8 E5 l  |# d
  38.         scan.onmarked = onmarked;
    5 _. _5 ~9 P, h, o
  39.     }: X1 e6 _5 u0 S, A' [
  40.     // 开始扫描
    1 K0 [' `: V& \- ]# [) q6 F1 S" l
  41.     document.getElementById("startScan").addEventListener('tap',function(){$ ]$ D" J1 ]3 M0 ?: I) p
  42.         startRecognize();
      g& \# D7 w) ^# N" H' r8 x
  43.         scan.start();+ `7 p( I3 i* o: J- V
  44.     })
    - T/ M  r9 g8 @) F6 u
  45.     // 取消扫描! x/ Q% n0 T* @. g0 G# P( x$ i3 \
  46.     document.getElementById("cancelScan").addEventListener('tap',function(){# P* L5 u6 g$ s0 I, Z
  47.         startRecognize();0 ^2 E9 Z3 _/ n$ i
  48.         scan.cancel();. v  B0 g% G* G1 w  W
  49.     })' `# R* _  e6 \) o% j
  50.     //  开启和关闭闪光灯
    ' N, t$ u4 `7 q7 i9 c7 B7 P. |
  51.     document.getElementById("setFlash").addEventListener('tap',function(){
    5 M, Q2 u, W6 U* L5 k# U/ t; g
  52.         startRecognize();) s( q. k* m) `
  53.         isOpen = !isOpen;
    % t# V* j; B- l2 f$ |
  54.         if(isOpen){
    6 Q: W$ s5 h9 s4 A8 r  V5 f
  55.             scan.setFlash(true);
    1 n1 j6 S- N& [! M. [& H7 X
  56.         }else{
    ) z6 _( d1 r& E$ B5 Q3 Q( X- R
  57.             scan.setFlash(false);
    : q- C  P6 y4 M
  58.         }) a+ r' m5 Z6 h; n. p) u+ R; {
  59.     }). U+ m3 N+ {5 `* a3 e  ]- x1 x/ F
  60. </script>
    - Q' ?: U1 x+ t' M1 g' H
复制代码

: v2 l& x! U0 j. V* U% H4 D4 V1 i效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
9 U" D- A( i- ~
5 y5 _: [9 X- s! r4 Y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-20 05:19 , Processed in 0.070988 second(s), 19 queries .

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