cncml手绘网
标题:
HBuilder webApp开发(十三)二维码扫描
[打印本页]
作者:
admin
时间:
2018-10-31 02:06
标题:
HBuilder webApp开发(十三)二维码扫描
好久没有写《HBuilder webApp App开发》这个专栏了。这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo。
9 |$ Y1 M$ V' Q1 R) l8 Z1 b
以前做原生开发的时候,关于二维码扫描、识别图片中的二维码、和二维码生成都写过。具体可以看这些:
2 m8 R; Z, q, J0 T5 r
《【iOS】AVFoundation架构下的原生二维码和条形码扫描》
5 U0 P* v" M, @
《【iOS】CoreImage原生二维码生成(一)》
1 B; c4 ~" C4 N$ y8 S
《【iOS】CoreImage原生二维码生成(二)一个方法生成带logo的二维码》
0 H0 h- P9 {$ _5 n
在做H5的APP的时候,之前也写过《HBuilder webApp开发(十一)二维码生成》。
- b! O/ W5 F6 V6 p/ O; q+ L' A
原生开发和H5的开发都写过,发现还是H5的开发代码量会少一点,但是这个就看项目是原生开发还是H5开发了。总体感觉做二维码扫描和生成不难,认真看文档,理清思路,修改官方Demo,然后测试就好了。
1 h8 F% O% o+ `. g9 s& l
直接上代码,注释都在代码里面了。
0 X" x& g5 `0 a
y8 j& x' k& G# V
<body >
! k# e% V6 |# T, P7 F) i
<header class="mui-bar mui-bar-nav white">
) d; l, y, a/ } u9 [; p
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
4 d6 g0 f% J* z
<h1 class="mui-title">二维码扫描</h1>
. w9 Z; n" R }1 N* d
</header>
! B) n+ F/ D1 G) K/ k
<div class="mui-content">
1 T. @! c4 J5 K ]& {- ~' |
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
+ D% w! A# f& p+ ]; |
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
! @7 M/ A' l' \( o+ r1 I, t
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
0 u( j/ }( R' N, K
<div id= "bcid"></div>
3 f( H8 o- e" I) }6 ]& M! b) l
</div>
5 `& u! m) Z4 h$ C& u. r/ q" l0 O5 R9 b
</body>
/ C% r6 g* n' w6 X7 f5 U
<script>
& g4 U9 {; j) I$ J! J6 @
mui.init({
6 x8 E; |2 k3 x* c# w
swipeBack:true //启用右滑关闭功能
* K# l1 _ v- F& j+ j+ n
});
: G& f. t& `% p7 B- K" R
var scan = null;
7 Y2 Y. e, W r, y
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
( |8 M0 P$ X6 f, x
// 条码识别成功事件
1 d( w$ t9 p1 R
function onmarked( type, result ) {
$ t" ?" k+ U' Y
var text = '未知: ';
: Z# d" B& f d. i
switch(type){
3 X1 V' g# Q# T0 S- M
case plus.barcode.QR:
7 g4 C- ~3 f; H: \# D
text = 'QR: '; // 二维码
, [6 l) D+ s$ X& a
break;
( M+ g b3 T* ^- W2 W' Z% k
case plus.barcode.EAN13:
( [) C' x$ T* V7 r5 L; b8 I( ^
text = 'EAN13: ';
+ A# `. H! ~8 a3 H' a
break;
, {. g; [$ d- T8 v2 i5 H
case plus.barcode.EAN8:
& q5 t$ W# h( f ?& X; Z1 q
text = 'EAN8: ';
- |; t2 i9 a' G* F4 @) {1 H
break;
0 f7 v' h) T3 T$ X0 C
}
% D: N# @2 G S6 y! U9 e) k- h
alert( text+result );
6 w! I7 O% }) y' o
}
6 `, h4 u+ z2 b6 [* S0 o3 @/ n. \& x
// 创建扫描控件
% f1 m3 Y+ p* `8 x
function startRecognize() {
& {8 S, V2 H0 r' \; K, y/ _. ~
scan = new plus.barcode.Barcode('bcid');
3 p/ [: L, B1 R; a) w8 A1 T
scan.onmarked = onmarked;
( S6 E! a9 [% r7 R2 C" l _, m1 Q. s% b
}
4 l& N, a) L8 r( {' M
// 开始扫描
. `: c2 g ]) F; ]9 _
document.getElementById("startScan").addEventListener('tap',function(){
v1 t4 |9 P, ^% p0 [
startRecognize();
7 {! `+ c1 l6 m2 w7 ^& `
scan.start();
* u+ s3 O( ]2 [5 S5 L
})
) c$ N" U! y, u/ p9 G' z
// 取消扫描
/ p; A3 y3 h6 v2 @
document.getElementById("cancelScan").addEventListener('tap',function(){
3 ~3 ~6 A, p; K1 x k& q
startRecognize();
S7 ]4 v, }- p) R9 b4 X- k
scan.cancel();
+ a3 _/ i& j( I
})
$ d/ q. n a Q# s0 L. Z( `" l
// 开启和关闭闪光灯
. Y9 m4 Y# R. F; U. b" d- q( b! W
document.getElementById("setFlash").addEventListener('tap',function(){
w0 U( o( j5 A+ T6 V
startRecognize();
6 U/ Z5 c& T( E; |0 `; g
isOpen = !isOpen;
7 V& _& s$ s; Z2 P; _0 b6 b
if(isOpen){
8 b" I! V# [, `
scan.setFlash(true);
- ~+ `1 W- E( S7 I6 v3 L
}else{
# _; n5 K$ O3 h
scan.setFlash(false);
/ O Y7 o5 ]* k& b3 A6 f7 ?7 M# t
}
: M0 v# E1 i9 _! F+ k
})
0 p% z: j) O& o
</script>
* ~. F) G3 F* Q9 |" C- ~/ X) a
复制代码
8 H' @; M/ U4 F, m8 e' T
效果图什么的就不上了,和前面提到的文章中的效果图基本一样。
* x' h, b; h# n( Z4 b1 t9 S: i
: C, u) z' F! L& @# {
欢迎光临 cncml手绘网 (http://bbs.cncml.com/)
Powered by Discuz! X3.2