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 >
2 {+ ^+ h4 _; k. p: O. F8 j' r$ e8 F
<header class="mui-bar mui-bar-nav white">" U$ Z% E' R2 d7 @2 g; W
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
3 R) T+ w; u3 H# a6 q* b, e. ~
<h1 class="mui-title">二维码扫描</h1>
$ D: Z% k- D$ B% W# S+ k, y' [
</header>$ b P# V9 x( n% @! t
<div class="mui-content">: t% G7 h8 d7 l2 I2 ~6 X
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>" j" }4 h4 |/ B
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>* b6 F. H! o& z# ~/ z( V
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>; i8 \( W& B1 `; \
<div id= "bcid"></div>6 g% T3 `3 s$ B; p& P
</div>
5 l4 Q+ M2 V6 v, p# z- N2 l
</body>
L6 q8 ?( l" \' t- G2 a
<script>
J7 v+ A3 M: w6 a9 B" z' q
mui.init({8 r J, _1 m# o! o4 o
swipeBack:true //启用右滑关闭功能
2 ~* C% [# t. `! g& _) k) ^4 y
});2 k- V& g [) |# F( |3 W3 ^
var scan = null;* U5 j3 z7 D4 h. n7 J
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
t- {. E+ Q3 R
// 条码识别成功事件5 C6 t v' D4 D
function onmarked( type, result ) {
" F- k3 U7 m6 X2 x8 p
var text = '未知: ';
+ ^1 d6 H: X3 A
switch(type){
& \; f! A) R4 z3 M
case plus.barcode.QR:" g9 Z. N, C: m/ A6 I; Y, l
text = 'QR: '; // 二维码
( ^; _- @ T! b& W/ z) J
break;
- s8 J$ @3 m; C- H% G8 W y
case plus.barcode.EAN13:
* w2 S+ h: P* O
text = 'EAN13: ';: X9 C" U1 \: z! Y' x y
break;
! g2 a3 }- m( _; F' r3 ]/ V
case plus.barcode.EAN8:, _ T# L1 n: X
text = 'EAN8: ';; o% O+ j( i2 [- g
break;( r3 ]$ N( T% O5 y; ], f8 E
}3 F4 Z0 C2 M$ G
alert( text+result );
- B+ X6 r6 t! m( w+ S
}
) @6 O; \+ Y5 J6 V- E
// 创建扫描控件
, Q2 W0 j5 z% ^* N9 s0 h9 r* W
function startRecognize() {
( Z# T! z# {+ P
scan = new plus.barcode.Barcode('bcid');
; C( Y) V% g1 c$ @7 z8 W
scan.onmarked = onmarked;
# N# D0 X G0 e0 H
}
3 F( t. ~/ T+ d; {# \
// 开始扫描1 s7 E0 ]+ L1 |# _ T2 i3 T4 s$ k, d
document.getElementById("startScan").addEventListener('tap',function(){5 }- J }# i" t. w( W
startRecognize();
( F1 U+ }* ?* O Z$ }
scan.start();
2 I8 e: b3 a3 i, f% Y- {8 f
})
' R! V. d. @0 d, K# Y
// 取消扫描
G6 ` y, S" z
document.getElementById("cancelScan").addEventListener('tap',function(){
: S) i* S$ U d
startRecognize();8 b/ q# V! S+ D+ c6 l1 w
scan.cancel();
t4 G$ t9 {0 X7 w; \: f
})% @) s" W3 z4 R& t6 T
// 开启和关闭闪光灯
3 Q- K7 y! M# V6 M9 |6 i4 e
document.getElementById("setFlash").addEventListener('tap',function(){3 B: O p1 c, L. ` i; d
startRecognize();5 d. m7 X) G5 e+ g; L2 t- x' `
isOpen = !isOpen;% h- \; o/ a7 l
if(isOpen){
7 D" ~' @+ O; e% x( H6 x+ W
scan.setFlash(true); c0 b% H( ]1 O. h& b
}else{7 f- u. k+ G. W9 f) [
scan.setFlash(false);7 E3 V7 i! U3 U+ @) e
}4 m/ h* Q1 w% Q8 ?8 U0 J
})
$ A2 P0 Y# C& z& x, D
</script>7 g# [. p3 t, f1 l7 O' D4 M. S

复制代码

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

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

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