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 >
' y9 S) r4 D% q0 {( |1 q- o
<header class="mui-bar mui-bar-nav white">
% @4 a% p' B0 e( @
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
, A" q5 j+ {3 g2 \ a, Y
<h1 class="mui-title">二维码扫描</h1>/ ~' \' m6 W) S7 J/ m# m0 y( L
</header>7 I5 D9 o4 C u+ v
<div class="mui-content">! |) C/ O X: U$ P, ^' I
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>1 {" H7 [2 y. g2 \; V# Q6 b1 v
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
- i" O. m& T5 C! K! w9 S
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button> q3 P1 D# c; j; U! P+ e
<div id= "bcid"></div>; T8 m4 g' w" _4 G+ B
</div>( D" m, b6 y+ J( z1 A1 h. d- @
</body>
( d' X% `$ d; T/ w/ `* j3 M- b
<script>
4 b" A' F2 v7 a; ~
mui.init({
* P3 c0 t- m& w& ^ F
swipeBack:true //启用右滑关闭功能) W& Y& d6 q! D% R4 f7 z
});
! ^" i- S/ t5 b
var scan = null;6 }" c7 P* i, z; S, X( ]8 T
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
- m; @' d* G; q4 u4 y9 j6 [
// 条码识别成功事件
' c& t6 n4 s& M7 a! K8 ?6 r
function onmarked( type, result ) {
& I5 R* b" W; [: U' J- c# P
var text = '未知: ';
( ^2 N8 A( E8 C! k) c: Y# O6 z
switch(type){/ Y" ]' c) p d6 s
case plus.barcode.QR:
. n5 \9 a/ w( j s* M( C8 n; E
text = 'QR: '; // 二维码
: n' L9 c$ G' ^* L
break;( ]; B. t6 w' m$ m1 X
case plus.barcode.EAN13:
: I9 i3 o. R; b, n& y0 U
text = 'EAN13: ';4 P# N( X$ s! K. s. x
break;) G* }, a* u) {7 H# s
case plus.barcode.EAN8:
& p5 Y8 G* d0 y. m: r
text = 'EAN8: ';* K: h* a, h. Q: k8 J/ R
break;
, F7 D9 f# n7 D G" [
}
+ z5 d& I( F1 ], E4 o5 n* w
alert( text+result );
i8 \6 M4 n: }) f; M( _2 y# J& o
}. f& Q8 _0 L0 P# d6 L# L$ {
// 创建扫描控件
5 T& s0 z9 r9 z- P# T3 Z2 D; q
function startRecognize() {
, H0 a' {% t' z& p$ f' z* S
scan = new plus.barcode.Barcode('bcid');
7 b, l* J& _: g7 Z9 F, J. t
scan.onmarked = onmarked; ; s: U. h9 h& r7 V* l/ p
}
4 T. ]& `6 q( ?6 R0 C0 M" Z
// 开始扫描1 i6 M4 \& m4 f! D% d- V/ _0 A
document.getElementById("startScan").addEventListener('tap',function(){
- r2 G: j$ V9 z& P) W( {9 z
startRecognize();
6 o- h- M% x- i; f3 Z
scan.start();
+ [- ]: ], H4 ~! a4 L8 e: E
}); a! V! M' x- B/ E
// 取消扫描
. m4 F: Z0 w7 b7 y% M; _
document.getElementById("cancelScan").addEventListener('tap',function(){0 D3 Y9 |+ h4 L y& y) d8 S* B
startRecognize();2 b! A& k, U5 M' x: } {8 ?0 }
scan.cancel();
5 O' P8 v- Z& d- b$ h
})" K6 D) r7 a. ^3 v0 p2 B! J) ^
// 开启和关闭闪光灯
; n: S; R8 w0 l: A
document.getElementById("setFlash").addEventListener('tap',function(){
/ f2 u( Z, J5 v, V- V1 k4 X
startRecognize();
: z; q% @6 J9 s0 `# t# |1 a
isOpen = !isOpen;
& R6 X; B9 a- b- z
if(isOpen){
$ k4 b; d0 x. W2 d. b4 }$ e2 }9 Y: L
scan.setFlash(true);
( x F# c8 j/ _) o9 L
}else{1 d/ B" U0 }0 y/ C5 f; _
scan.setFlash(false);: O/ x. W! R& y, |; C" |* W \
}
7 v: x( X1 m$ A* t
}), ?7 @9 L/ m4 \, V1 Q, s
</script>& O7 M7 v9 b, Y0 A n; z' A

复制代码

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

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

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

浏览过的版块