DCloud HBuilderX wap2app 5+app扫码功能页面的实现，html页面，跳到这个页面即可扫码，扫了以后再带参数返回想要返回的页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0" />
<title>扫二维码</title>
<link rel="stylesheet" href="assets/index.css">
<style>
.bg {
background-color: #eee
}
.fr {
float: right;
}
.gray {
color: #888;
}
.mxje {
font-size: 14px;
color: #ff4960;
line-height: 35px;
float: right;
}
.van-nav-bar {
background-image: linear-gradient(to right, #2d76ff, #2abaff);
}
.van-nav-bar__title,
.van-nav-bar .van-icon {
color: #fff;
}
.van-cell .van-button {
float: right
}
.block {
overflow: auto;
zoom: 1;
text-align: center
}
.tico {
margin: 0 2px 0 0;
top: 2px;
}
.errmsg {
color: #ee0a24
}
</style>
<script src="assets/vue.min.js"></script>
<script src="assets/vant.min.js"></script>
<script src="assets/axios.min.js"></script>
<script src="assets/main.js"></script>
</head>
<body>
<div id="app">
<script>
/*document.addEventListener('plusready', function() {
var barcode = null;
// 扫码成功回调
function onmarked(type, result) {
var text = '未知: ';
switch (type) {
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
alert(text + result);
}
// 创建Barcode扫码控件
function createBarcode() {
if (!barcode) {
// plus.navigator.setFullscreen(true); //全屏
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: '0px',
left: '0px',
width: '100%',
height: '100%',
position: 'static'
});
barcode.onmarked = onmarked;
plus.webview.currentWebview().append(barcode);
}
barcode.start();
}
createBarcode();
});*/
var barcode = null;
var app = new Vue({
el: '#app',
data: {
name: '自定义', //要在扫码界面自定义的内容
flash: false, //是否打开摄像头
type: '',
},
mounted() {
document.addEventListener('plusready', ()=>{
this.onLoad();
// console.log('44');
});
},
methods: {
onLoad() {
var n = "扫描二维码";
this.type = "scan-listener";
if (n) {
this.name = n;
}
// var pages = getCurrentPages();
// var page = pages[pages.length - 1];
// #ifdef APP-PLUS
// plus.navigator.setFullscreen(true); //全屏
var currentWebview = plus.webview.currentWebview();
this.createBarcode(currentWebview); //创建二维码窗口
this.createView(currentWebview); //创建操作按钮及tips界面
// #endif
},
// 扫码成功回调
onmarked(type, result) {
var text = '未知: ';
switch (type) {
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
case plus.barcode.CODE39:
text = 'CODE39: ';
break;
}
// plus.navigator.setFullscreen(false);
//这是登录时扫码获取税号
if(getQueryString('ref')=='login'){
this.getContent(result);
}else if(getQueryString('ref')=='write_off'){
//核销扫码
this.getWriteOffCode(result);
}else if(getQueryString('ref')=='voice_box'){
//绑定扫码
var strs=result.split(",");
window.location.href="voice_box.html?sn="+strs[0];
}
barcode.close();
},
// 创建二维码窗口
createBarcode(currentWebview) {
barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
top: '0',
left: '0',
width: '100%',
height: '100%',
scanbarColor: '#1DA7FF',
position: 'static',
frameColor: '#1DA7FF'
});
barcode.onmarked = this.onmarked;
barcode.setFlash(this.flash);
currentWebview.append(barcode);
barcode.start();
},
getContent(url){
vant.Toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
});
let self=this;
axios({
method:'post',
url:'/api/getData',
data:{
'url':url,
}
}).then(function(res){
vant.Toast.clear();
vant.Toast({
message:res.data.msg,closeOnClick:true});
if (res.data.code==1) {
window.location.href="login.html?no="+res.data.data;
/*if (!plus.webview.getWebviewById('login')){
plus.webview.create("login.html?taxno="+res.data.data,"login");
}
setTimeout(()=> {
plus.webview.show("login");
},500);*/
}else{
vant.Toast({
message:res.data.msg,closeOnClick:true});
}
});
},
getWriteOffCode(sn){
window.location.href="write_off.html?sn="+sn;
},
// 创建操作按钮及tips
createView(currentWebview) {
// 创建返回原生按钮
var backVew = new plus.nativeObj.View('backVew', {
top: '13px',
left: '0px',
height: '40px',
width: '100%'
},
[{
tag: 'img',
id: 'backBar',
src: 'assets/img/left.png',
position: {
top: '15px',
left: '3px',
width: '25px',
height: '25px'
}
}]);
// 创建打开手电筒的按钮
var scanBarVew = new plus.nativeObj.View('scanBarVew', {
top: '55%',
left: '40%',
height: '10%',
width: '20%'
},
[{
tag: 'img',
id: 'scanBar',
src: 'assets/img/sdt.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '轻触照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
]);
// 创建展示类内容组件
var content = new plus.nativeObj.View('content', {
top: '13px',
left: '0px',
height: '100%',
width: '100%'
},
[/*{
tag: 'font',
id: 'scanTitle',
text: '扫码',
textStyles: {
size: '18px',
color: '#ffffff'
},
position: {
top: '13px',
left: '0px',
width: '100%',
height: '40px'
}
},*/
{
tag: 'font',
id: 'scanTips',
text: this.name,
textStyles: {
size: '14px',
color: '#ffffff',
whiteSpace: 'normal'
},
position: {
top: '90px',
left: '10%',
width: '80%',
height: 'wrap_content'
}
}
]);
backVew.interceptTouchEvent(true);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(content);
currentWebview.append(scanBarVew);
/*currentWebview.append(backVew);
backVew.addEventListener("click", function(e) { //返回按钮
plus.webview.close('scanPage');
barcode.close();
plus.navigator.setFullscreen(false);
}, false);*/
var temp = this;
scanBarVew.addEventListener("click", function(e) {
//点亮手电筒
temp.flash = !temp.flash;
if (temp.flash) {
scanBarVew.draw([{
tag: 'img',
id: 'scanBar',
src: 'assets/img/sdt.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '轻触照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
]);
} else {
scanBarVew.draw([{
tag: 'img',
id: 'scanBar',
src: 'assets/img/sdt.png',
position: {
width: '28%',
left: '36%',
height: '30%'
}
},
{
tag: 'font',
id: 'font',
text: '轻触照亮',
textStyles: {
size: '10px',
color: '#ffffff'
},
position: {
width: '80%',
left: '10%'
}
}
])
}
if (barcode) {
barcode.setFlash(temp.flash);
}
}, false)
}
},
onBackPress() {
// #ifdef APP-PLUS
// 返回时退出全屏
barcode.close();
plus.navigator.setFullscreen(false);
// #endif
},
onUnload() {
plus.navigator.setFullscreen(false);
}
});
</script>
</div>
</body>
</html>
我的微信：
