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 >
! t% m- Y7 M, Z; y* @0 `& u
<header class="mui-bar mui-bar-nav white">
2 C1 M: z4 N( v, W& x g, h
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>" S2 O+ B5 Z( K2 d# b' B* f
<h1 class="mui-title">二维码扫描</h1>
% G& h" M# V+ e% H
</header>
4 l& }' c) v, d+ n9 s4 A2 W
<div class="mui-content">
- ~" |/ O0 u0 B( ~
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>/ o7 \* h) m5 |
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>) F' I- h% g8 g, G* n n
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
8 R6 y# @' {' n: p
<div id= "bcid"></div>) ^. p+ V# m9 E0 p, m- c
</div>
$ a! x4 F3 R7 \; d0 j( v: z% j
</body>' H/ Q/ Y6 q5 x
<script>
7 i: Y @( D9 T% T* L7 m
mui.init({
! Q- F" {; W& i/ _8 Y0 w
swipeBack:true //启用右滑关闭功能6 e1 K) Q6 Q7 s
});& D) i" a' v* ^7 N+ c$ ?
var scan = null;
" ]8 p$ j9 f. B
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭$ ~5 I; k' @2 d
// 条码识别成功事件" _% L2 f' r; W& n0 a5 q/ \9 p; i
function onmarked( type, result ) {
: V3 Y3 K% v7 c: W% @1 x+ U
var text = '未知: ';
switch(type){
K! J/ G* G# T# Y6 A5 v7 f
case plus.barcode.QR:
B! ] @! Q8 A
text = 'QR: '; // 二维码
4 l, O8 l- }0 r/ Y* ~. Y# P; ]
break;
; T$ m6 p$ _) X- B$ X5 y3 C
case plus.barcode.EAN13:
; @) @. l$ {: e6 ^
text = 'EAN13: ';* b% e9 ^# K3 M; J
break;
3 N2 K. ^1 b* Q0 ^. z @" H* X6 N$ s
case plus.barcode.EAN8:1 i V1 _( U1 W4 K
text = 'EAN8: ';* U1 M" T. J5 W( k8 `
break;
2 j/ {7 k' ]! t. ^
}
) `. i' [5 D# o" b' `, ~* C
alert( text+result );9 L9 y; u/ p' A. K* {" s( j
}
# } D8 I6 i% u B
// 创建扫描控件
5 [% K9 \- Y* k, G
function startRecognize() {+ X, O7 o1 ^& S @3 S, D0 ~
scan = new plus.barcode.Barcode('bcid'); M! `7 d0 D/ F/ E0 z
scan.onmarked = onmarked;
! r$ b8 h; t: y
}0 y8 _7 O+ V, l+ B
// 开始扫描
, f( u. }8 B4 n3 `/ {" C
document.getElementById("startScan").addEventListener('tap',function(){
' ^0 G9 e2 G! i7 S( E
startRecognize();( X& I- \& s3 U% A8 r
scan.start();7 K2 o* `7 e* Q" z+ |# o5 s
})
4 s! L- k* H; U
// 取消扫描; c) n# s( q0 W% x4 G
document.getElementById("cancelScan").addEventListener('tap',function(){, }0 ?$ p4 s6 _8 ~- ?+ q4 T8 Z
startRecognize();; N, R. ^; q9 h
scan.cancel();6 _$ B; B5 Z: J4 Y# e
})1 R# S1 U8 ]2 U) D) _* H$ v, @/ T( Y
// 开启和关闭闪光灯
' v3 {" ]. ^# a6 ?- W2 u& \
document.getElementById("setFlash").addEventListener('tap',function(){
6 {4 _, w- X% {
startRecognize();' E; X* m7 x$ I* n
isOpen = !isOpen;
0 t8 I8 G, O! k1 b I
if(isOpen){
2 ?% A5 m/ U: W: \
scan.setFlash(true);6 v, G) |) n$ w/ b. o% p% }1 {
}else{
+ C$ ^6 H* ?; Q h/ |* d; P
scan.setFlash(false);
* ]$ B" s3 g) m8 n/ E
}+ T- }0 Z. f2 N1 F+ z- Z" b& {$ W
}), {4 {. _5 @/ I8 t1 R
</script>( i# Z' B L( H) L# U+ p

复制代码

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

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

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