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 >+ `9 a/ ^- B; t- J# A1 _! h
<header class="mui-bar mui-bar-nav white">
$ Z8 b* B0 Y' y) z/ Z9 ?7 N: p& k
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
$ ~3 y1 F& t W2 T8 u8 ^
<h1 class="mui-title">二维码扫描</h1>8 s0 e; ?) c- ^ D( C2 e: F( ?
</header>
% E- \7 O/ f/ t" T
<div class="mui-content">
- g1 B, w1 T7 M3 `+ l* z1 c
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
1 _# k( P- ^8 [ D$ Q' T0 Y
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
9 K" x6 G: V( c+ ?6 Y9 Q' a
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
0 _9 c3 B! O$ z N+ H9 z1 R) e
<div id= "bcid"></div>
. p3 ]$ P/ |2 Q6 f; }# {" D
</div>7 \; r' @% }) X$ _* F, C# E. K
</body>
0 J+ c7 G0 p2 z) w' `
<script>
8 V9 t6 g. m! h4 o5 {# o
mui.init({
9 y$ `; B3 V, O2 \2 l, @4 V
swipeBack:true //启用右滑关闭功能
; x* S6 j& D# ]$ ~8 h& j8 @; \
});
5 t5 ]$ @( e) U
var scan = null;
' m0 K1 [; d; P4 b. T# `; B
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭 q2 I$ J- H! |: z" F* J
// 条码识别成功事件
' P7 r" k U4 ~8 W. _7 S7 d
function onmarked( type, result ) {
: q- S9 \: A# t2 L
var text = '未知: ';" q! W: R) J' |
switch(type){
! e6 i" {/ B0 A) g' @
case plus.barcode.QR:
) V( C- v* h3 m ]6 S% |2 [9 a
text = 'QR: '; // 二维码; I8 I: y e' F, B- y; x- C# R/ K
break;- q: V& j$ ^! J. a; v% ]# Q# o9 M
case plus.barcode.EAN13:6 i% W2 U0 W2 r! p
text = 'EAN13: ';
! C+ l d! y* X0 X2 R
break;
' v, J0 R; t1 ^2 x# o5 J
case plus.barcode.EAN8:5 A0 i m3 g2 q# Z; J5 f0 n- z
text = 'EAN8: ';
( x* t1 ]3 }- L0 f; L3 k4 `
break;5 Z( w' G7 n1 ?! L
}
" S; c$ @8 {9 t6 S2 d9 k9 I1 T
alert( text+result );1 w6 d* _* X) [( W4 y6 w5 B7 {
}% ~6 |/ h8 [5 y: R# a( H' H
// 创建扫描控件
- L; t# z& z0 e& S5 q" V7 F, w
function startRecognize() {
, y+ N( g5 ?2 S8 U3 Y/ u c+ [) f
scan = new plus.barcode.Barcode('bcid');$ j* V2 z+ \: K5 U( a) _/ M& o
scan.onmarked = onmarked;
8 g/ Q t0 a6 [5 |! ~& O
}% k: Y$ ]/ j! L# \
// 开始扫描7 ?) E: d, R* i7 D. R# o K) S+ y
document.getElementById("startScan").addEventListener('tap',function(){/ K: |2 l, \- ~* `0 S, J% ~9 `" M1 s
startRecognize();& c% w. L( U' Z2 Z6 d
scan.start();0 P+ ~; |8 G8 f5 G8 u, n, T
})
" b8 d9 p" J4 X' k+ b
// 取消扫描
* V I5 P: \7 Y" {# u# G
document.getElementById("cancelScan").addEventListener('tap',function(){+ C7 D q( k$ H, y, U; k4 T7 F
startRecognize();) K0 d, {3 u0 q
scan.cancel();
7 o, F! q! s. n6 Z2 U
}): S8 X3 n7 Y; R
// 开启和关闭闪光灯9 p c% T; X( j! `! k$ i
document.getElementById("setFlash").addEventListener('tap',function(){
# Z8 H" @; D) ?+ S3 I
startRecognize();
$ E; J. s! t6 b3 |; r( U$ t: v
isOpen = !isOpen;
& f1 T+ l" \# I. O" C% r8 H
if(isOpen){" h+ g5 _, |: n# L" a
scan.setFlash(true);
& j" e& x; Q% v0 }* \- _7 M
}else{, ?- ^* a. F+ d7 u4 L4 G
scan.setFlash(false);1 [7 w& o7 Z5 j5 b- W# N/ E
}
8 A0 t' V! k$ P/ b9 @ S. S: L' E
})) C# @* `' s7 y* D+ @, Q7 d
</script>
# B) g$ j2 A0 n. X" M

复制代码

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

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

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