管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
* Q. [ U! L# x5 y以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: 5 v. D" T! Q, F, h. \2 P7 K& H W
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
* ?; i3 p' _) p# b8 w6 G0 R$ t《【iOS】CoreImage原生二维码生成(一)》
2 I3 a: V" T& ^) I( ?5 K+ E$ t( W《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》 : p% G, y- k" P. c! ?/ I1 d; i
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 ; c! {* Y8 c( `7 w" e& B
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
6 Q- m/ x1 o0 m _直接上代码,注释都在代码里面了。; W' ?9 y% r. x$ ` h
+ W, G7 f( M; A. s b6 T- <body >5 Z" M M+ N! p- C/ ?" H
- <header class="mui-bar mui-bar-nav white">
$ W) [: x1 N1 M! A7 ? - <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
: c; O! _, M$ `+ F2 E5 W9 m+ j - <h1 class="mui-title">二维码扫描</h1>
) ~8 D- x7 W' L4 e5 g1 v - </header>
' ~! E1 E" \* m" M9 l- K - <div class="mui-content"># }3 D' \4 Q# z2 l
- <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>+ _8 |7 g- F7 C5 {# X
- <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
0 p* M ]5 R" X+ \0 S - <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
* r; X5 J* O: \' l" m4 u" M& u+ I - <div id= "bcid"></div>
- t( v) t+ w/ u6 M+ W - </div>
( W# [7 m. c2 {9 o t" K& ] - </body>* n8 a6 z7 ]. D' g# U+ n ~+ ?
- <script>5 i9 w8 y1 J6 Q M6 U) |( \/ i
- mui.init({
" @1 m7 n i1 f1 E9 V0 x - swipeBack:true //启用右滑关闭功能
& _3 K% w7 i( C( s- G/ n# ? - });
- N& w! d% ~/ J: P% @" C. Z - var scan = null; ?; g$ T9 {7 _! `6 ]( \8 O
- var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
}6 J9 [0 H/ K3 Q - // 条码识别成功事件% E2 f* K0 Q/ Y* O4 m
- function onmarked( type, result ) {
' b( u1 y- R7 B9 X: ~3 L - var text = '未知: ';% U( ^: X: t4 {* Z4 D
- switch(type){* J3 b7 p) Q W, u9 p3 _& P% r
- case plus.barcode.QR:
9 ^2 n. c$ _6 l# s$ L( q - text = 'QR: '; // 二维码
' L7 T7 E% a3 w, b - break;3 s! T: {) k! O Y0 I
- case plus.barcode.EAN13:
& e& t4 K& v. U& u$ ^, D' @ - text = 'EAN13: ';
; i E; S( P- j4 c7 U1 | - break;4 @3 D5 p$ l! c4 K4 i
- case plus.barcode.EAN8:
. q/ o7 i q' z& ? - text = 'EAN8: ';
! X; e- {/ o- [% p - break;$ y _1 l2 b; Y9 F- E- r- ]5 C8 Z
- }
& p3 Z( K5 v, M - alert( text+result );% P+ g' T2 r5 F+ o0 [" h3 }8 b a
- }
{& g0 u; c1 \0 \$ Y, p0 @0 `* e - // 创建扫描控件) R- b x0 H% b2 v+ c7 P3 B6 X6 |7 _9 _
- function startRecognize() {
1 y5 Q& K8 G" h4 D6 `1 a2 y& ^ - scan = new plus.barcode.Barcode('bcid');
- a) |0 ?% K3 \8 F* W! D - scan.onmarked = onmarked;
) c. k! d4 q1 T9 w& K s5 t - }
+ Z, Q& X j9 c \, s- l' k - // 开始扫描
2 i) o2 v# n$ `$ z - document.getElementById("startScan").addEventListener('tap',function(){7 ~1 f) e! q0 y- g& j
- startRecognize();/ |: [" Q8 M( o- {; T
- scan.start();/ A8 i+ c0 p8 [! z. x( T- X' U z
- })/ ~& O: h+ w' Y- o1 V9 v" j
- // 取消扫描
9 B8 f$ y& Z# X* z$ w5 | - document.getElementById("cancelScan").addEventListener('tap',function(){* Q( e0 V5 Q; X& K& E- H
- startRecognize();! B% x3 T! X9 X9 L
- scan.cancel();
! i4 j; a" ^# S" [ - })/ j! W5 Q4 X, E! Z X9 B* ^# X
- // 开启和关闭闪光灯
; N, ?5 H( b5 \2 h, [5 v5 C5 M& l - document.getElementById("setFlash").addEventListener('tap',function(){
8 @* X- q/ Q) ?1 L! \0 _ - startRecognize();
# [- ~4 E3 j8 s - isOpen = !isOpen;
) _* m* q2 [7 P& n) j$ V - if(isOpen){0 S# Q& Y* @; Y1 E; l6 M2 e
- scan.setFlash(true);
0 @& m- P; v4 |8 Y; d - }else{5 r$ ^6 ^$ @7 e- F) ]; R m7 o
- scan.setFlash(false);) F. c, }7 e# A# r' Y
- }! q6 D5 ?* l m+ P% z5 S( d
- })
% }& w, A1 K# P; G! o7 E - </script>
# m7 {% l1 { S' E' c7 a. u5 B
复制代码
' u: @9 P$ u: ?0 U" d& {效果图什么的就不上了,和前面提到的文章中的效果图基本一样。: w/ [& U7 R+ c: L
( ]9 ?( d! Z7 _+ {; I$ @7 p* S/ h7 g
|
|