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

admin · 发表于 2018-10-31 02:06:18

好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事，就对着官方文档barcode写了这个二维码扫描的Demo。
以前做原生开发的时候，关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些：
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
《【iOS】CoreImage原生二维码生成（一）》
《【iOS】CoreImage原生二维码生成（二）一个方法生成带logo的二维码》
在做Ｈ5的APP的时候，之前也写过《HBuilder webApp开发(十一)二维码生成》。
原生开发和H5的开发都写过，发现还是H5的开发代码量会少一点，但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难，认真看文档，理清思路，修改官方Demo,然后测试就好了。
直接上代码，注释都在代码里面了。

<body >
# R0 r `4 V' W. ~- Y$ C3 l9 q
<header class="mui-bar mui-bar-nav white">
; K$ k9 {. R3 T* Z
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a># _; N" U6 G! I! |/ z
<h1 class="mui-title">二维码扫描</h1>8 s7 e8 w" _8 U* P9 L7 t u& d
</header>
) I+ }3 I9 \# N2 w4 B# ^" n. ]
<div class="mui-content">& R* q! a" r4 B5 X
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
7 c. b0 |+ y% \! m
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
' J4 A* }- v/ U( {; b5 ~
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>4 U1 Q1 i/ o. u; Y+ @
<div id= "bcid"></div>1 U+ X/ M/ G' b$ Y
</div>
9 X) C8 g6 p. o( e) h; f3 C
</body>1 m# i: ]0 c, ]0 @$ V1 \- m a
<script>, G2 Q" Y8 @% P: o0 \
mui.init({
+ E J8 v" C4 F% N! G* d
swipeBack:true //启用右滑关闭功能
8 U3 V. p# f/ f2 B* H( A
});" s( Z4 _' e" x- Z
var scan = null;4 G' g, O9 K0 C$ ~6 J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
% q, O0 F7 r: W* p4 F6 q% c
// 条码识别成功事件/ ?# Q. i% f# o* G; e
function onmarked( type, result ) {
) B; l+ `% N; M' @6 y' ?
var text = '未知: ';
. n' b6 Y" x" m3 W; x7 E+ E9 l9 q
switch(type){
3 R6 L8 z/ }* D" M0 ^2 D
case plus.barcode.QR:
8 Y) K" p ^4 u$ ^, _8 ?, Q- S
text = 'QR: '; // 二维码9 s+ i# N4 f3 ^3 I% E7 A- ]
break;. a& T# c) ~6 q1 y1 p z9 R
case plus.barcode.EAN13:* f. R" `! w! f7 t1 Z* n9 `. k1 v* Q
text = 'EAN13: ';: ]6 o4 d5 o# _
break;
8 w9 n( `; p' J+ r2 ?! b
case plus.barcode.EAN8:- |; P4 r- C9 i8 }
text = 'EAN8: ';. L6 d1 q% X/ P4 e0 c& D
break;: }$ V9 j* l) L* v7 }9 v/ t& `* @
}
. S. V2 b, K' R3 {: E( K2 c5 s
alert( text+result );
/ h7 U" k. Z- H9 ^
}; c" h# r* S. |# }
// 创建扫描控件
5 U5 ~0 j; [3 t0 f' j; z5 d: J
function startRecognize() {" l$ |- k& @, i9 W% ]7 ~
scan = new plus.barcode.Barcode('bcid');
+ U9 ^9 X V3 E P
scan.onmarked = onmarked; . ?# m. V2 q% O, f2 p
}4 B3 U/ F+ P7 L
// 开始扫描8 `( u$ t, ?) |! v5 N$ ?
document.getElementById("startScan").addEventListener('tap',function(){& m2 s) M+ e, M! _" n/ c
startRecognize();
/ i6 ~* k% M1 ]
scan.start();6 c# i0 u' ~ T
})% q: t+ i1 \1 c4 L
// 取消扫描+ b& }) Y! c" V( D' y
document.getElementById("cancelScan").addEventListener('tap',function(){
" j1 i, u, j) i9 n; } p) e
startRecognize();
: m. n$ s$ s7 w
scan.cancel();
) F' w. f1 Z" l; y% Y7 ?
})+ I6 [1 Y" k. Q1 ?* k2 F
// 开启和关闭闪光灯
* l9 C6 U8 ^4 b) }
document.getElementById("setFlash").addEventListener('tap',function(){
5 ^# X: g# Y5 C" n* N& g+ |% Z
startRecognize();
4 z, H7 X, F. |; Y! ~. a
isOpen = !isOpen;
8 w; s4 l; e0 }: t3 m' N: u
if(isOpen){; [$ _0 v" L( n% e n% @0 o9 E
scan.setFlash(true);
! @( u. j7 A% Y* c2 y. w* e
}else{
3 s: n+ V0 a g( ]: m
scan.setFlash(false);. I& A: I. l1 b2 W
}: C. H- z4 T( Q" [
})
0 n( i* g4 W, a& b, ~' z0 Z
</script>
) n, j& m$ K+ o' z. W5 i

复制代码

效果图什么的就不上了，和前面提到的文章中的效果图基本一样。

帐号		自动登录	找回密码
密码			立即注册

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

浏览过的版块