H5扫码功能实现
程序员文章站
2024-01-24 18:26:58
...
H5扫码功能的实现
功能实现要用到H5+
1.首先需要下载Hbuilder，然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js
2.添加一个扫码按钮，给按钮添加点击事件
$(".Scan-three").on("click",function(){
openBarcode()
})
//打开扫码界面
function openBarcode() {
createWithoutTitle('barcode_scan.html', {
titleNView: {
type: 'float',
backgroundColor: 'rgba(215,75,40,0.3)',
titleText: '扫一扫',
titleColor: '#FFFFFF',
autoBackButton: true,
buttons: [
{
fontSrc: '_www/helloh5.ttf',
text: '\ue401',
fontSize: '18px',
onclick: 'javascript:switchFlash()',
},
],
},
})
}
function scaned(t, r) {
//扫码结果返回这里
console.log(t+r)
}
3.新创建一个html，Scan扫码界面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Scan</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
<style type="text/css">
#bcid {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
text-align: center;
}
.tip {
color: #ffffff;
font-weight: bold;
text-shadow: 0px -1px #103e5c;
}
</style>
</head>
<body style="#000000;">
<div id="bcid">
<div style="height: 40%;"></div>
<p class="tip">...载入中...</p>
</div>
</body>
<script src="js/scan.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</html>
4.Scan扫码界面js
var ws = null,
wo = null
var scan = null
// H5 plus事件处理
function plusReady() {
// 获取窗口对象
ws = plus.webview.currentWebview()
wo = ws.opener()
// 开始扫描
ws.addEventListener(
'show',
function () {
scan = new plus.barcode.Barcode('bcid')
scan.onmarked = onmarked
scan.start({})
createSubview()
},
false
)
// 显示页面并关闭等待框
ws.show('pop-in')
}
document.addEventListener('plusready', plusReady, false)
// 二维码扫描成功
function onmarked(type, result) {
switch (type) {
case plus.barcode.QR:
type = 'QR'
break
case plus.barcode.EAN13:
type = 'EAN13'
break
case plus.barcode.EAN8:
type = 'EAN8'
break
default:
type = '其它' + type
break
}
result = result.replace(/\r\n/g, '')
wo.evalJS("scaned('" + type + "','" + result + "')")// 里面的方法自己创建自己需要的功能
back()
}
// 创建子窗口
function createSubview() {
//
}
// 开关闪光灯
var bFlash = false
var AVCaptureDevice = null
var Camera = null
function switchFlash() {
bFlash = !bFlash
scan.setFlash(bFlash)
ws.setStyle({
titleNView: {
buttons: [
{
fontSrc: '_www/helloh5.ttf',
text: bFlash ? '\ue400' : '\ue401',
fontSize: '18px',
onclick: 'javascript:switchFlash()',
},
],
},
})
}
5.效果图