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 h9 k" s" Q( z# p. J/ Q
<header class="mui-bar mui-bar-nav white">- d% [" [$ K; ]
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>. `- H5 F1 F7 k. X
<h1 class="mui-title">二维码扫描</h1>
) m5 W+ O" n F8 K, [' V Y3 q
</header>
u0 }% ]' \6 y9 N2 Y& t
<div class="mui-content">
) `& I8 K" b# L: A$ b) m0 p
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>. e: h$ {! ]( X1 X- @4 M; w
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
$ v2 o) e: \/ n3 t( R
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>: W; m) }" k" c- k+ b7 l
<div id= "bcid"></div>
% f/ u- n$ _+ q# L
</div>' i. E- n. _5 U; r. T
</body>
, L8 h- c' X! S* o4 y& `
<script>& F) b& V( f- O/ z- H/ Q0 G3 g6 R) b
mui.init({0 {: E6 V' T# @* N4 ]$ L
swipeBack:true //启用右滑关闭功能
' L n3 O! H" u" E
});1 c% s% J) Z" }
var scan = null;
" P. z7 p' P2 K( s |5 ^
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭4 V6 ?* g" y6 f; s
// 条码识别成功事件# j+ R. c, O) @$ E( P+ ~
function onmarked( type, result ) {
+ }+ v; k* y u9 f8 ^5 t
var text = '未知: ';
& m$ y2 F/ J, r5 O K8 B
switch(type){
) {& C' F! O# k8 z+ s0 \
case plus.barcode.QR:; E. z' y4 W$ f( C, k
text = 'QR: '; // 二维码) _+ E G* W# l3 V
break;
- f0 n7 M2 ^8 X9 z Y! A1 f
case plus.barcode.EAN13:, q" `# W9 m. s# n
text = 'EAN13: ';( w' n6 t. N1 p n$ k$ T
break;
' P- X0 X o2 h7 M0 A1 R
case plus.barcode.EAN8:# @+ I/ f- H# h: T. z
text = 'EAN8: ';9 u7 ^. A3 V9 n# W- I
break;; t8 k5 O2 J! H. [; x7 t- O
}( e* U4 f$ t1 B ^
alert( text+result );% G: Q& z* v! m# R' h6 q
}4 I0 }( h4 o: {# r* |; R K
// 创建扫描控件
% t: o! a& y5 G7 W* y+ o
function startRecognize() {$ J8 ?0 ]) h8 ], _
scan = new plus.barcode.Barcode('bcid');5 k1 P' O# s ^5 _
scan.onmarked = onmarked; ( t0 j2 _. r% e1 r* b4 i4 e, W
}
. u, ~. I/ D: `3 j+ Y+ L O
// 开始扫描
8 B+ Y# x4 q1 ~' {( o& a
document.getElementById("startScan").addEventListener('tap',function(){8 O+ \4 R/ A. Z3 v( S, b# b4 @' b
startRecognize();9 ^9 s% Z) t) m' }' Q% _% r" I" m
scan.start();: C4 S: s' O' } o2 ^
})
* I6 d8 ^9 z& s
// 取消扫描/ r1 s* s7 S" s8 {7 i2 F) e
document.getElementById("cancelScan").addEventListener('tap',function(){0 ]* q, ? o- q. Y
startRecognize();) l% j" O0 o! \: U+ V
scan.cancel();
& C0 V& ~' C4 G
})- G4 z( M6 l G, b. i' ]* P+ z! {
// 开启和关闭闪光灯
2 n/ y" r7 e! Q
document.getElementById("setFlash").addEventListener('tap',function(){
2 G I! ]% l6 f* J
startRecognize();
1 @$ A: o5 I* M# P
isOpen = !isOpen;+ G/ z8 N- ? x/ s, Z" e1 y, K
if(isOpen){' ^2 L7 {- W+ p* t: K y( J# T/ ~/ |
scan.setFlash(true);
7 i$ g+ N5 V' U) w* s* X
}else{
0 X: Q! Q& T% \ G2 @/ ?1 R( s H
scan.setFlash(false);5 N r9 k* M9 [- N
}
( j: f) }& E; o( x0 ]& A
})) B; }7 u5 Z3 u3 [. F
</script>" o4 j- V4 `! S/ m+ x

复制代码

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

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

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