管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。 6 S7 @0 x" e" c! O
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
& ~/ F8 Z) I. P- R7 ?. T2 E《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
1 F8 A4 `' R% ? _/ d《【iOS】CoreImage原生二维码生成(一)》 / c+ H' N( @/ s }* j; w% {
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
- W0 C' G) k2 Y2 R在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 ! [5 p& A7 i& p2 a
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 4 \' Q7 V4 n# `1 ]( q
直接上代码,注释都在代码里面了。
- r2 a: N! _8 g: D! [( W0 Z/ p" i% m5 t; m6 [
- <body >
# i4 T& N O- I, r; ~ - <header class="mui-bar mui-bar-nav white">7 W9 N' }7 ~' |5 U' Q; u) ?
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
7 r5 q4 U& w( N( I' I# r - <h1 class="mui-title">二维码扫描</h1>1 E; u9 V1 |2 p$ l5 b
- </header>
3 N% \ v; Y4 q9 s! ~( O3 k3 m& O* T - <div class="mui-content">
+ ~6 k" o& q' D" N) n - <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>8 x* i% ~. F! V J3 g2 B% n
- <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
- r: m0 B$ F7 `5 D8 e" g, z - <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
) M/ O' f8 n" Q8 o0 @: t& L" X. t2 | - <div id= "bcid"></div>
0 ~( Y' T" L; s, E - </div>
$ Y1 Y. Q3 W# }# R$ l/ P - </body>5 o4 b! K6 p. {+ i& v
- <script>
$ c! u2 v+ H& N* E, v/ m - mui.init({
3 D: A$ L- l& Y0 o) G2 d- A - swipeBack:true //启用右滑关闭功能
( c& U# ~& ^* b( | - });! k. u3 u- i$ a5 l" D7 r- ?
- var scan = null;
; a5 |5 g" k$ g - var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
+ R, ]- `+ F1 k& C - // 条码识别成功事件# |- f' ]4 t3 ~3 E' n
- function onmarked( type, result ) {
8 w9 |. |6 q, T1 I7 i: x$ r - var text = '未知: ';. t c" q7 [8 V `6 p$ L( n
- switch(type){: z. i8 x: v4 R1 [7 K
- case plus.barcode.QR:' W' A; u6 Z* R
- text = 'QR: '; // 二维码
: H8 m4 T' a: t) Q6 c - break;/ d/ a4 o" u9 S/ W* e& ^
- case plus.barcode.EAN13:
& h- ~$ q5 v# [( p$ F& M - text = 'EAN13: ';* i3 E/ z f, X1 a) J9 W) W' H
- break;
3 m9 a/ y6 e! I3 B: \6 B: l3 M9 b; I - case plus.barcode.EAN8:
% H; t7 W" q, j5 } - text = 'EAN8: ';8 ^" o9 H& A- m* y$ I
- break;
' J1 e$ j J: C9 D+ s( O7 p - }
6 S/ A4 q, K2 L! S6 D8 ^* Z - alert( text+result );' o+ H: l9 q% q& x: F
- }
) C/ F3 @% _9 K! s, r7 `" c - // 创建扫描控件- P8 g6 t; q2 |3 I2 O, o
- function startRecognize() {/ I: i) p! e$ c1 A
- scan = new plus.barcode.Barcode('bcid');& a$ Y& p& P. H
- scan.onmarked = onmarked;
! S* H- m" ^" k+ c" _, }8 w - }1 e6 |$ N' w. A' t. O+ `" W
- // 开始扫描
3 S J4 X: n) [ u - document.getElementById("startScan").addEventListener('tap',function(){2 D9 B; O" u! r8 b0 F
- startRecognize();
- d" S1 A6 E1 t- H# G6 @& i - scan.start(); T; M# m$ w2 z* p' {# Z5 U
- })& B" o' r, @- K1 G8 f6 p) r
- // 取消扫描' I. G* A9 z" A$ K: \3 W. w+ {& @
- document.getElementById("cancelScan").addEventListener('tap',function(){: q5 W1 j! M. m7 L
- startRecognize();
- V1 ^2 b+ u1 i - scan.cancel();8 [2 T" }7 I7 \' T
- })9 f. ^" ^- V- F5 p8 E* @, R! U
- // 开启和关闭闪光灯4 O8 m; ?! {9 s. D# E! u
- document.getElementById("setFlash").addEventListener('tap',function(){# A$ A* N! @0 R
- startRecognize();2 p( p# N! j0 g# z$ B4 B1 \
- isOpen = !isOpen;9 O5 l1 }! w3 R9 Z( ~2 r& Q/ H6 L/ g
- if(isOpen){) v! |$ u p2 K# u
- scan.setFlash(true);
6 @! v% L" P3 Z v - }else{
5 E! ~2 W# \3 e! ?# |; s* ]5 J - scan.setFlash(false);& t! \& f& m3 T f
- }9 D4 r- D; c! G( `. W$ A
- })% Z9 `$ n6 O2 ]
- </script>
+ }3 ] n7 \+ }6 G
复制代码 ( c7 { `+ S. `: e2 [$ W
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
1 f( U/ J) z1 ]8 K4 _; j
. c+ n* M+ J+ t |
|