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 >7 e1 `- f* z* S+ k, y
<header class="mui-bar mui-bar-nav white">5 ^7 g- p6 q' K5 o( Z, \3 ?
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>3 j6 `0 Z. g: w4 P+ m
<h1 class="mui-title">二维码扫描</h1>
7 U( g8 `2 w& ]* l
</header>! s+ r0 ? x; k# m) V' R
<div class="mui-content">+ a: P W* J' n3 H
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
2 U4 T5 |3 r! h A' U4 \
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>" O* E" W' f% v( j- e
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>* W0 k, y0 Z: q4 \0 z n, i1 |
<div id= "bcid"></div>
( F. i" q* w% O9 `
</div>
+ h0 A. ]8 F- v3 U M2 s
</body># U) ]5 w+ s/ ^% M
<script>
& {7 M2 L; }5 X$ w
mui.init({
4 V$ s/ `7 Q" m0 K
swipeBack:true //启用右滑关闭功能1 M/ M/ `) G8 G4 a/ B# ^, O2 x
});
) O6 z l) [$ `3 \0 ^, m7 A+ D
var scan = null;# k/ n: |- X; Y: r% h a6 [
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭' e2 ^7 Z$ x R3 n3 k9 U9 `
// 条码识别成功事件1 g# @& S/ m, K; d* ]) x" G }
function onmarked( type, result ) {' B# a. _$ s' S/ t2 { j
var text = '未知: ';8 W: m. F1 g: g9 ]
switch(type){. M. D! ^- l* t6 c% K7 A
case plus.barcode.QR:
text = 'QR: '; // 二维码
6 d) P! V/ ^& e' Q- ~; c
break;& ]" g6 c& ?( _6 j7 D
case plus.barcode.EAN13:
7 M) G" L! s6 w/ {1 r/ V. x
text = 'EAN13: ';: o6 |7 D9 ]( y' U! p% l r6 ]
break;, P% o' u( y, R% `+ S. o: {
case plus.barcode.EAN8:
0 ^- ~9 z5 P5 D; p
text = 'EAN8: ';
( x7 c5 [1 E. d8 I7 t( X
break;+ K/ F0 I+ K( L6 c: S. _
}
/ P5 W, b* l1 p. R( K# R/ I* I
alert( text+result );
% S1 u( w. h+ m) u" w" o! Z
}: L9 k7 @" V; \; f9 q- t
// 创建扫描控件
" q$ _$ Q$ }, I9 W
function startRecognize() {
! K1 ?" j2 b: s
scan = new plus.barcode.Barcode('bcid');
! ?3 m. P, W# M7 Y* I
scan.onmarked = onmarked;
& s7 `: {* j6 K
}
& J, j: e/ X; v( r
// 开始扫描6 t$ Q, o0 e$ x0 }
document.getElementById("startScan").addEventListener('tap',function(){
- u2 c+ N" A5 [) E. y6 ^5 v
startRecognize();7 O' E R5 h% ^5 i+ s! y
scan.start();
- L0 [" G( H# L! [ k1 s" }; P
})4 \" p6 g8 Q% p; w
// 取消扫描3 N1 i1 E/ M, g- |9 b8 c, `4 f0 F1 J
document.getElementById("cancelScan").addEventListener('tap',function(){
2 d) y4 |: W. {/ A, g
startRecognize();# c- }4 h3 `' z/ B0 ?7 x' }
scan.cancel();0 S8 A! G2 v( F4 j1 F/ m
})
1 t, f' z0 k5 t9 k9 c) K3 P/ @& J( F
// 开启和关闭闪光灯
& P! ?- _# Y% ]8 p* w+ D, o; G3 D
document.getElementById("setFlash").addEventListener('tap',function(){+ s; h/ P1 N% Y) A
startRecognize();) _# _- S$ C' n0 _% A# o
isOpen = !isOpen;- I2 T( E W4 [( x
if(isOpen){
; G( X2 s; k* n" ]( R
scan.setFlash(true);: J' ~# \+ D$ ]3 c6 {% x
}else{
2 Q4 K0 T- T [- m
scan.setFlash(false);
8 D. d p0 Z% v) b4 @* p7 p
}4 K- [) A: {" L/ {4 i
}): m# J) F6 u4 ?7 b
</script>
3 ?4 Z5 \; J- P

复制代码

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

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

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