管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
$ E% M2 @$ s+ ~0 L4 f以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些: & n) s" @$ m- k; @
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
1 F5 v( k P! Y! N Z! }2 v" o《【iOS】CoreImage原生二维码生成(一)》 4 E: H5 O. `3 [; N' x
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
. Q4 q! O& C% \6 a k5 o在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。 ; x# W) E. K g, E
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。 ( U& x# y5 o1 m. U
直接上代码,注释都在代码里面了。: Q3 n4 B# Q x- [; z
+ h2 h% [, b9 c" j p" G
- <body >2 G8 O* H3 N$ |& p
- <header class="mui-bar mui-bar-nav white">
( [; R6 f+ R3 x. n5 f - <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
1 Z5 G+ }+ T1 W! f$ C0 B( w - <h1 class="mui-title">二维码扫描</h1>( p+ R1 T" r) t- Z5 [
- </header>
7 w3 E3 V' d I0 ~$ D - <div class="mui-content">% [- B* m* F1 i% j. }7 x
- <button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
$ ~. W$ K2 g. f' C - <button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button> X% C# u4 u4 G0 \
- <button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>9 s5 L3 ^& f2 B1 C6 R/ g: `' l
- <div id= "bcid"></div>
O* _8 g- ^) } - </div>
* [6 p, p; Q# v4 F$ U. k& J - </body>
6 w9 q2 D8 W5 X9 c# [ R: |. l - <script>! U4 ?$ H" T' e& f6 U
- mui.init({
% Q8 O+ e# l$ N% q5 ?' [3 n+ ~ - swipeBack:true //启用右滑关闭功能/ u* I) `/ {: j* i" c) E, ~- Z9 U3 g
- });
, X- N( I$ v$ p7 f7 k - var scan = null;
; Q" e9 {, X# u* N/ k0 x8 j) m) v - var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
4 @7 w1 q8 }! ] - // 条码识别成功事件2 c1 ]' }% S& z
- function onmarked( type, result ) {- G* h0 x* m) h7 Z0 F9 ~/ `: J
- var text = '未知: ';) R3 C$ }& K, S# v. v! Y
- switch(type){
( ]. P% X4 `6 e - case plus.barcode.QR:
2 B- ~7 J! m( z2 x9 w - text = 'QR: '; // 二维码1 U7 r% Q* h8 T2 @5 Q: |( I& G
- break;
& l/ [" X1 S* [2 n% T) e8 x - case plus.barcode.EAN13:
( u9 i4 D! b1 y3 {1 e+ T - text = 'EAN13: ';2 _9 R4 }7 _" D: A2 K. g' b
- break;
2 P( p" L9 e8 x/ B/ u- H - case plus.barcode.EAN8:3 L( y( k0 @8 a8 s6 _( _
- text = 'EAN8: ';
& M- \! m1 O( d - break;6 N2 M- @- {% ^& m: U( [1 I) a
- }1 L2 I& Z: T0 ]
- alert( text+result );
/ {# W# @) u& E& X8 o( e; b - }
, {" j- G4 Z& J0 x8 L - // 创建扫描控件
' [* C' D) I/ c7 N - function startRecognize() {2 f* L; a8 [6 Y8 k& K" e! e! u
- scan = new plus.barcode.Barcode('bcid');
( L: P0 }% T* `4 w+ k; o* o - scan.onmarked = onmarked;
' V0 l* i6 Q/ S4 p) U. @' b. a Q - }
: s; y$ K4 N1 k. e4 t7 I - // 开始扫描( c' r: g! L j/ Q* ]
- document.getElementById("startScan").addEventListener('tap',function(){; ^7 N8 `! _2 m" H: C0 ~! C" `
- startRecognize();& L% M9 |# E2 L- v/ Q8 }/ k
- scan.start();
; i' ]* z1 v8 E& M% T' g - })
) r. p2 Z$ m: v. B- y& j0 d- g - // 取消扫描
9 F, t& ]. r# B5 L# l" V6 z - document.getElementById("cancelScan").addEventListener('tap',function(){* m' E8 q# A) B
- startRecognize();7 i% u! H0 e* o2 t" {1 M
- scan.cancel();
6 w9 c6 N( s" a5 Q& i" \, y - })
. c7 `8 ?8 k; M4 I& @ - // 开启和关闭闪光灯2 _# r# y8 ]: }8 \; s
- document.getElementById("setFlash").addEventListener('tap',function(){
# D/ s0 G0 w" o$ x8 \' u" c - startRecognize();6 b% L D. D3 V
- isOpen = !isOpen;
" d& B8 Y+ O$ }' v. P, {/ H* J3 w! n - if(isOpen){
4 m! f' R9 ?0 g - scan.setFlash(true);7 w5 X* W6 U2 S% c8 U% N
- }else{
; t) h8 a% n& T6 H( O$ m5 q - scan.setFlash(false);
) W2 K- O1 f- a - }7 D/ t8 d, h8 n8 V) G( Q5 f, x4 l: R
- })) c, o# x* d, E
- </script>0 `: d5 r* {0 v! D$ C
复制代码
& B% P! b" o0 x6 R效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
. q" S3 P- ^* Z1 i$ r% Z4 u
* H1 e2 F: m9 j: [ |
|