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 >
. ?% H: R1 l' i' }
<header class="mui-bar mui-bar-nav white">4 A- I( s, _* |: c( L; z
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
, q* `7 ^8 P0 m8 s P
<h1 class="mui-title">二维码扫描</h1> B" |! f @; | @# z
</header># N+ |' i! M- p, t( G
<div class="mui-content">" _6 I; \& R( U3 v: K) S
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
! j- L8 _0 {$ ]1 z& T$ X* g
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>8 Q/ Z' G9 M& u* \2 _
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>6 D$ A4 P3 F N, s
<div id= "bcid"></div>7 x# i* [9 W8 l
</div>8 ^1 v3 I. F7 q- O
</body>
" n/ }+ d3 M( h
<script>& P b4 a" M. g; K* I/ ^
mui.init({, N1 Y a" @4 L
swipeBack:true //启用右滑关闭功能
% D U' H2 W4 w' |5 w4 v
});8 H- G& n" L6 ?! C
var scan = null;% V: k1 G% ?0 _; ?0 i
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
; U8 W) c% o, q0 z* }
// 条码识别成功事件2 ]5 q! E2 N1 i' y/ E5 [
function onmarked( type, result ) {
/ W+ y c# E- @* e. ?% t0 C
var text = '未知: ';. Y' P$ l+ R. W- F2 v
switch(type){, I9 P( [' U' {/ S
case plus.barcode.QR:8 O, Q- \. I/ k I! p8 l0 ]0 ]
text = 'QR: '; // 二维码- a- p! _! j2 [+ F- X8 M
break;
7 [/ }. w- T0 ^3 ^) E7 \
case plus.barcode.EAN13:
R3 t4 t4 r# B; ]* c2 k
text = 'EAN13: ';2 b, c$ s' P* ]
break;
. g6 O+ ?' M# ~
case plus.barcode.EAN8:
/ Y0 G8 [' K, O' k$ Y4 I
text = 'EAN8: ';0 U( N+ f: z/ s+ P( @
break;5 R# {/ f" T6 S0 N/ Z2 L
}- N+ a. g3 ` q! ~/ l
alert( text+result );+ g! |. Y) _2 `8 T
}
2 c# U1 ]2 k6 o8 [/ L2 O
// 创建扫描控件' \. A/ E0 ~! |" Z( w
function startRecognize() {& j6 e; l. ^9 L, W7 w8 F! e
scan = new plus.barcode.Barcode('bcid');3 L c0 R0 g3 F1 R6 ]
scan.onmarked = onmarked; l6 ^7 ^2 Z4 K- S+ d
}
% ?' p/ }! c" f/ T
// 开始扫描1 |! t7 y P' A
document.getElementById("startScan").addEventListener('tap',function(){
/ M* }- ?8 {2 R: s% I5 |
startRecognize();" t: E7 j: a' ^# P+ R9 S" H
scan.start();
1 y6 Y4 n k @" }0 l2 ~& w
}), x1 k9 T* p- w6 R/ N8 {
// 取消扫描
& o0 N; z# o: u: S: l
document.getElementById("cancelScan").addEventListener('tap',function(){
7 x, G3 O+ w0 A M% S/ f) M. U) d. `
startRecognize();& Z- q8 {5 C0 `' h( s
scan.cancel();2 I6 j7 a( S! Q9 v
})
. k2 e; m: {* A8 f
// 开启和关闭闪光灯; s; ^9 c5 w6 M
document.getElementById("setFlash").addEventListener('tap',function(){
7 T* |. A2 C' l$ E
startRecognize();
/ j) O6 `% d# X
isOpen = !isOpen;: G" D% x* a+ ~2 k) x
if(isOpen){
6 e# J6 b3 z6 X: V" r* e
scan.setFlash(true);+ ?( S$ v7 }. Z. [$ o
}else{
# N* c* M0 B& w8 s
scan.setFlash(false);- c4 v2 F9 w: [; r
}" O( l# ~; y3 H3 h$ M" v+ s
})
! t* J) n) Q- L* p5 h5 O7 t* G
</script>
0 |: E; T: u- f5 o) {2 V- S) T

复制代码

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

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

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