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 u0 L' ^+ z! _" b
<header class="mui-bar mui-bar-nav white">; [; Q5 \% I/ k0 G2 c, J5 r3 R
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
! S0 f) C R" U2 `
<h1 class="mui-title">二维码扫描</h1>
! y2 g( ]3 [0 k6 U' u0 \/ X6 A
</header>! ~7 V. @3 _6 @- |, S
<div class="mui-content">
- }5 A+ r0 P r* G- p( G. U0 ]
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>
- n8 o N0 X2 j% a. j8 n
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
# [' @: u4 c# B6 H0 z
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>
1 }: c3 h; \! l/ h" x, L2 ]9 S$ {
<div id= "bcid"></div>
. x& e* k4 Y j ?
</div>
) u. u) y' u: s
</body>
( v! F+ l" z3 I# X7 r
<script>5 X8 l5 e6 @' [
mui.init({" M8 d. o2 l& f, X1 E3 h5 k" _
swipeBack:true //启用右滑关闭功能
! Q: e! i4 F3 S4 l
});$ ?% k8 j9 p, c# U; L+ X% z
var scan = null;, O8 k3 [2 ~1 a- z
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭3 k" P3 e4 e9 C: ?8 e. g1 Z4 U# h0 t
// 条码识别成功事件1 m) R/ ?6 z4 s
function onmarked( type, result ) {
/ W, f: n7 c3 {" d! `7 W5 k4 E
var text = '未知: ';3 t% Y: h4 }% D
switch(type){
5 w3 f" C, `6 j) k! Q" P0 C
case plus.barcode.QR:8 ^1 _. v- [7 P5 `" [
text = 'QR: '; // 二维码
3 F* j7 b& R3 Q0 g
break;3 R1 v+ A6 g# {; Y3 h4 |2 x
case plus.barcode.EAN13:
+ ]; Y2 a4 x; b) Y
text = 'EAN13: ';
- y6 I. A6 K8 p. s# V: A1 y
break;, u8 V2 z, v- R: E4 l; ^" F! h
case plus.barcode.EAN8:0 m P' m0 `7 N
text = 'EAN8: ';
/ i+ u, n8 ? E( W
break;
3 E. o/ ~0 T# a% `1 b: g# _- G; v" \
}/ c* F6 |; L0 o; l0 h
alert( text+result );% v5 M* F% t$ _2 m6 T2 d
}$ p* y" Z5 `. o! f! U# l0 ]6 B# X
// 创建扫描控件
! E+ R4 q! \8 l, }) T9 M! J
function startRecognize() {0 V$ d }0 L8 Y# P7 l3 B; n/ R
scan = new plus.barcode.Barcode('bcid');
; l) I- g; u8 y7 G
scan.onmarked = onmarked; ! D0 V1 |6 Y2 A
}
6 J2 |% e* h0 z* A- t7 D
// 开始扫描
0 e3 y- t; j& t; f
document.getElementById("startScan").addEventListener('tap',function(){
( o! Z& V4 a' Q3 q3 V- |
startRecognize();% P+ Z% n0 w5 f+ y$ I" |" u
scan.start();
1 U, h4 Y5 O6 S1 Z( J4 N* ^' d+ `
})
* k! F. K1 e% A) X
// 取消扫描
2 K# Z! {4 Y5 x1 v! t: Z7 |, `" z- ?
document.getElementById("cancelScan").addEventListener('tap',function(){
& f& e* W; W8 H4 i& @
startRecognize();
3 t- m* `& T. K2 {
scan.cancel();- @8 q! E1 e# K) S* j
})
# g! Z s1 L3 Q+ r" h- C( `$ B
// 开启和关闭闪光灯/ ?) {7 ~4 u' {8 X& F
document.getElementById("setFlash").addEventListener('tap',function(){( Q7 r/ T- w5 V* L6 e/ `
startRecognize();* m) `' X! f2 j: o2 C0 m
isOpen = !isOpen;
+ K; W8 m, Q! M) x% F* t
if(isOpen){# v* J7 ^3 j$ a
scan.setFlash(true);
+ I3 }2 z! z" \) ~9 P2 p- B. c6 Y
}else{ c/ n3 o: {! Z. c
scan.setFlash(false);! Y; F4 a, p4 x8 F/ {5 F
}
! Y7 X# r: A, q
})
7 F1 g8 w, v2 W
</script>
$ {0 p0 U5 m2 r, y

复制代码

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

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

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