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 >4 U1 l# G3 h. Y0 [% |
<header class="mui-bar mui-bar-nav white">: r8 l8 n# I& D' b
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
' Y! e& c4 q! D* O
<h1 class="mui-title">二维码扫描</h1>1 B: L/ M2 F: Q) i, w
</header>; H6 n/ g. Q( Y+ d! V
<div class="mui-content">
8 F- W6 m/ }9 V) i% `9 i' A
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
7 ]/ h/ ]/ C, S5 h0 f& R+ j
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
" e, }% e# ?- r
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
) _& k- x: e+ p/ G; x
<div id= "bcid"></div>9 T/ ?1 _7 E8 x
</div>
3 Q% \9 w& s4 X, Y5 _6 q
</body>
9 _! ~3 m1 o% I1 V
<script>7 w3 G( x4 c5 j' w: T8 ~
mui.init({/ {/ ~; p7 p1 m1 N4 O
swipeBack:true //启用右滑关闭功能
" R# a% X: y9 V5 D/ A$ G# M6 z
});* ^7 k. ~7 O# N Y6 m# u$ _2 B
var scan = null;# {9 ]; v4 L, ?. t: j- P
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭( h# \) \7 I, c# p, g1 B6 X0 `
// 条码识别成功事件
! L7 I/ p9 e0 A# {- X
function onmarked( type, result ) {2 {( d# i" d& s
var text = '未知: ';0 T" e/ h( G0 p) [6 v8 b+ Z
switch(type){3 D1 _+ o+ R. N& J: F7 p/ a, d+ F
case plus.barcode.QR:
+ G, u, \# r5 N; }" t
text = 'QR: '; // 二维码
& p8 I3 Z$ j$ l5 A# w) r* L
break;2 d3 E6 J8 B, K7 V- _
case plus.barcode.EAN13:
8 W( e3 X" K/ J1 O
text = 'EAN13: ';
) l4 k3 \& k. U" F1 J; Z9 F: A
break;
. R. F4 }" _$ L& z2 ]% ~
case plus.barcode.EAN8:
, m7 u* `( z. V
text = 'EAN8: ';3 O3 Z1 r7 F3 Y, g
break;: ?& F1 \" o I5 ]
}" U$ S; {# X* s
alert( text+result );+ Y, r* _ {* C4 V" p
}: h, _% _9 V/ ^
// 创建扫描控件
* O8 k7 X2 |( X4 {* f7 x h
function startRecognize() {
( G7 I7 s' ^5 J9 S+ l
scan = new plus.barcode.Barcode('bcid');$ a! Z/ y& y) t& W/ j
scan.onmarked = onmarked;
8 Z8 d6 c( ^* i+ s
}- D! z" \! ?) i/ }0 s7 O8 m
// 开始扫描
7 C7 X* o& C; a+ s* s: C) K* \& d4 [8 x
document.getElementById("startScan").addEventListener('tap',function(){
2 D2 v. P2 W( I3 H
startRecognize();% T, [# s7 W+ }( ~
scan.start();
0 f# [8 t/ V& _/ ?/ L9 e' @. ~
})
- u8 j7 u' J; |- b1 |# U ]
// 取消扫描
. T+ T" {0 v: v% W K
document.getElementById("cancelScan").addEventListener('tap',function(){ V9 s" P+ I% q4 \4 E
startRecognize();3 b% D g$ X0 _6 \; K3 ~: ]5 @
scan.cancel();
8 K7 s9 c+ N$ S- n7 I. D
}): Q" }. k2 B# i( t: {
// 开启和关闭闪光灯& F. Y/ l' @* w
document.getElementById("setFlash").addEventListener('tap',function(){
startRecognize();9 @# R- W; d4 `
isOpen = !isOpen;; h6 g$ Z: c1 V1 w
if(isOpen){
( w; Q8 y) ?9 e, c$ Z6 m: T3 {: Z
scan.setFlash(true);5 G* ]8 O) ^4 K3 U- W
}else{: I* v4 n. M5 H( u" {
scan.setFlash(false);" }( i' j Q$ ~6 h0 J" }( S- @2 M
}+ j" J$ o% a' F5 F
})
7 h! x* F9 C/ ^$ w
</script>: m3 l2 a9 Z! L' c

复制代码

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

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

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