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 >
0 e4 w, x3 ?% z- h$ w# C
<header class="mui-bar mui-bar-nav white">
, J: P' p1 n* e, f$ k5 P% x
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>" K% _- l: T3 h: @& C5 b
<h1 class="mui-title">二维码扫描</h1>! [# p0 n0 j3 C; s
</header>
' l% Q! G5 P' K8 E! T" [
<div class="mui-content">! ?: {7 q" ~4 i) ^/ `7 V1 g
<button id="startScan" class="mui-btn mui-btn-success">开始扫描</button>, |) |3 X3 \8 U K4 X
<button id="cancelScan" class="mui-btn mui-btn-success">取消扫描</button>
3 D/ }1 c5 B* @4 T
<button id="setFlash" class="mui-btn mui-btn-success">开启/关闭闪光灯</button>( |3 I3 R& G2 r
<div id= "bcid"></div>
6 {+ Y2 B0 E9 I l( f- l2 {( O
</div>
' c# J% x) c( [
</body>0 w3 w. a( Z* S* E$ H
<script>
: V4 y* [ d! X& Z& x- `. ~
mui.init({
& w9 W' v2 {; A& f }2 k* m3 q
swipeBack:true //启用右滑关闭功能! r8 m( K. a% o5 p: `
});
; Y$ M/ G" \9 X$ ]. O; u
var scan = null;
5 ?; ~5 U J! D9 O2 \9 {
var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭
% K9 S: i# u2 B9 S% b
// 条码识别成功事件
, P+ L& ?) @ r; ]% D, ?
function onmarked( type, result ) {. B0 ~5 W" G4 E3 O- P* D
var text = '未知: ';
2 Y( n _$ r) ^6 P% a
switch(type){
: T( c( a% G" }3 q. J4 q# E
case plus.barcode.QR:; {& L, j# X: c7 |
text = 'QR: '; // 二维码
; @: t5 e- d/ P" {
break;
g) y* G" v) x$ H) W6 }8 b
case plus.barcode.EAN13:
4 x" {. Q" @5 g% C& q4 M
text = 'EAN13: ';% u& @9 p. @! g1 h: ^) r. A
break;4 u! t+ @6 M$ G; r/ u0 B
case plus.barcode.EAN8:
, k5 Q1 f& h( P& M& N
text = 'EAN8: ';/ V+ a1 i: E4 z: X1 |3 ^
break;9 Y$ ]. @$ {9 I7 I+ c
}
" X! Z. |, w( v/ ~- o$ d
alert( text+result );
8 a4 V) Z* A- Y2 E0 G
}# O4 I/ ]4 ]% z7 j- N
// 创建扫描控件# j6 _* ^# L8 E( w5 W7 Y( r r- g
function startRecognize() {
7 w9 V& N1 |& X! s7 Y7 s; X
scan = new plus.barcode.Barcode('bcid');
( ?: t6 N& z( N; q/ D
scan.onmarked = onmarked;
6 @% P8 x2 _. ~' n- g( m3 z. u
}3 t1 O. C# o" D
// 开始扫描
' `) I; I" ]& c0 C
document.getElementById("startScan").addEventListener('tap',function(){. a9 i/ t! \; J) X1 ~! n0 D: r3 Q
startRecognize();; m. ^0 S! p! t6 D% d0 e0 Z
scan.start();
+ m6 G0 e6 O% t- V" q( x5 {: Z
})
! W- A* X! ]. }2 |+ v
// 取消扫描/ C' e1 C* W+ Y2 A3 H8 M( z* M7 x
document.getElementById("cancelScan").addEventListener('tap',function(){
4 ]1 q5 M( G0 M& R4 H1 _
startRecognize();, n$ _4 H( e% i7 ~, ?. j E
scan.cancel();1 C4 D/ f- t, h; p, E6 L
})
1 h% k2 ~7 A7 Y
// 开启和关闭闪光灯
! ^! {6 n3 G- K* V
document.getElementById("setFlash").addEventListener('tap',function(){5 {% Z+ A% R# N v0 m) f
startRecognize();
9 w2 z$ X# Y$ @' F( E
isOpen = !isOpen;5 _+ N& v3 G$ e- T
if(isOpen){
% b4 v8 j3 ~3 M% b0 \2 M
scan.setFlash(true);: m4 O* G% z# A6 I
}else{& l: s; G. S' [) o
scan.setFlash(false);
( w1 N' A U! O
}
; y7 q. M S2 W& [4 q
})
D; E2 G& E3 M, I
</script>& a9 J; ?( b: U& I0 p! A% J/ o

复制代码

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

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

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

浏览过的版块