废话不多说上代码就对了(●'◡'●)
css代码:
.mask {
height: 90%;
width: 100%;
position: absolute;
top: 0;
background: #000000;
}
.mask2 {
height: 55px;
width: 100%;
position: fixed;
bottom: 0;
background: #000000;
}
body {
margin: 0;
background: #000000;
}
.scan {
width: 50%;
height: 55px;
background: #000;
float: left;
text-align: center;
}
.scan img {
width: 30px;
height: 30px;
}
.scan span {
display: block;
color: #fff;
font-size: 14px;
}
html代码:
注解:需要引用mui.min.js and mui.min.css
<div class="mask" id="mask"></div>
<div class="mask2" id="mask2">
<div id="scan1" class="scan">
<img src="../img/click.png" />
<span id="">
手动选择本地图片
</span>
</div>
<div id="scan2" class="scan">
<img src="../img/scan_off.png" />
<span id="">
手电筒
</span>
</div>
</div>
js代码:
var scan;
if(window.plus) {
plusready();
} else {
document.addEventListener('plusready', plusready, false);
}
function onmarked(type, result) { //回调
if(result) {
alert(result);
scan.close();
plus.webview.currentWebview().close();
}
}
function plusready() {
setTimeout(function() {
scan = new plus.barcode.Barcode('mask');
scan.start();
scan.onmarked = function(type, result) {
//截取字符
var str=result;
str=str.slice(3,14)
if(str) {
scan.close();
plus.storage.setItem('str', str);
//获取当前页面
var wn = plus.webview.currentWebview();
//获取上一级页面(B页面)
var wn = wn.opener();
//传递消息返回的webview
wn && wn.evalJS("var str = plus.storage.getItem('str');document.querySelector('#txtBarcodeNO').innerText = str;");
plus.webview.currentWebview().close();
}
};
}, 200)
//处理返回事件
plus.key.addEventListener('backbutton', function() {
plus.webview.currentWebview().close();
})
}
//闪光灯
document.querySelector('#scan2 img').addEventListener('click', function() {
if(/scan_off.png/.test(this.src)) {
this.src = "../img/scan_on.png";
scan.setFlash(true);
} else {
this.src = "../img/scan_off.png";
scan.setFlash(false);
}
})
//添加本地图片
document.querySelector('#scan1 img').addEventListener('click', function() {
plus.gallery.pick(function(path) {
console.log(path);
console.log(JSON.stringify(path));
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert(JSON.stringify(error));
});
}, function(err) {
plus.nativeUI.alert('Failed: ' + err.message);
});
})
这是点击跳转界面代码:
document.querySelector('#txtBarcodeNO').addEventListener('click',function(){
var w = plus.webview.create('/html/Barcode.html', 'carcode1', {
'titleNView': {
'backgroundColor': '#262930',
'titleText': '二维码扫描',
'titleColor': '#FFFFFF',
autoBackButton: true
}
});
plus.webview.show(w, 'slide-in-right', '300ms');
},false);
我根据网上查询到的代码然后整合出这个功能,如有雷同,只能说我想把希望之光点亮,希望能给你一点点作用,谢谢!!!
效果: