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 >5 C# V( c* x" W9 c4 l. Y
<header class="mui-bar mui-bar-nav white">$ W" T4 T; |6 q2 g, W' H
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>/ r8 k; v3 X% U/ n1 Y3 y+ z( m
<h1 class="mui-title">二维码扫描</h1>% h# E; b& Z* c
</header>
" f+ a5 V2 t' F* Q& y. l. J
<div class="mui-content"> q8 v0 f# P- S
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>2 v- f( C: @7 x/ \) O
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>' T- M6 N2 q6 f5 j
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
' E l: | B) N5 f: ?. v
<div id= "bcid"></div>: X2 H' b: K. \3 C( y0 _
</div>
, q# e* @# [( w, V
</body>
# h/ ?( k3 g. T. t& V' e# D
<script>
. [1 a- r8 W0 _- ~: q7 e
mui.init({
- @4 P! y4 K1 [# f* ~% U1 m
swipeBack:true //启用右滑关闭功能
6 F' E4 B" ?0 r1 g7 D
});: M; w! y& J. k2 \9 }, v2 k
var scan = null;
* u* f7 i: e3 Y/ m7 Y
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
/ Y* _; H3 N" R4 Q
// 条码识别成功事件/ G% w8 h( l: O% e g2 x
function onmarked( type, result ) {0 {$ v, S: E) y$ ]
var text = '未知: ';
6 g) ?1 }" R# o i# l
switch(type){( L# _3 ]; U; Q% O$ c. Z
case plus.barcode.QR:
: Z5 h0 q& ]" \, B% D
text = 'QR: '; // 二维码
5 Z- E( p/ O% B! W; f* S0 r
break;2 f, b& _1 S$ N
case plus.barcode.EAN13:
' g7 y: f5 D. p+ |
text = 'EAN13: ';5 s- [* x2 H. `& R$ `
break;" E# P* @3 u* j* [
case plus.barcode.EAN8:& V; m+ M5 w* ^5 \
text = 'EAN8: ';, c- z0 i) p, m$ {& {4 \) S- `" J! L
break; [- e6 M% C) s4 P
}
; T7 [0 Q# H) q8 X1 o9 v* s
alert( text+result );* w: Z8 L/ a | o. X5 J3 ?* @
}
8 S6 i' y# u2 e: j1 u+ s
// 创建扫描控件0 ?( F5 C' P5 U' C7 ]
function startRecognize() {
7 k6 I/ o z# w
scan = new plus.barcode.Barcode('bcid');
( l* R: }% H0 N! i, C- w2 }4 Q
scan.onmarked = onmarked;
5 z) v/ {- a/ q) | A
}
1 v% [6 B3 c! j* J1 y, ~! W
// 开始扫描& ]: q* Y4 J3 F
document.getElementById("startScan").addEventListener('tap',function(){/ U& D( e) X' R4 l, w+ E. z
startRecognize();
9 }9 F" i+ _# Q' F, U8 a
scan.start();8 }- Z# ^9 j. J" b r7 ]% ^
})
) ]! B6 d! X) |. h' F$ h" J$ ~
// 取消扫描; ?3 n& M; _# D+ h
document.getElementById("cancelScan").addEventListener('tap',function(){
9 [" {0 o1 r: p& G, l
startRecognize();6 r' r. x w9 [: |% [9 O
scan.cancel();! J8 t6 J/ S* F Q: q2 p
})
: g5 ~( E1 m& m
// 开启和关闭闪光灯' E8 O i U. G* H& Q2 b
document.getElementById("setFlash").addEventListener('tap',function(){! w- b" g$ [6 `& F
startRecognize();
% p) r2 k) h8 r. O; M+ G% M3 R" j
isOpen = !isOpen;
# _9 A% E( |1 f; Q& b% x
if(isOpen){
6 n8 }6 r2 \' n; }+ ~- W6 S5 d
scan.setFlash(true);8 q! v' X7 |8 u
}else{
7 h9 N2 O! ~/ @/ O" H: r8 }8 j
scan.setFlash(false);- K# K$ g! M6 r5 |- A% R9 I3 G' `
}
2 R$ X1 T/ Y& l' |5 e
})+ h7 M: x. m3 `2 U# J% z
</script>
9 i& ?9 A4 j# I( X2 r: P' @

复制代码

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

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

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

浏览过的版块