需求：
一台大屏幕安卓主机用于前台服务，在启动APP的时候播放视频，触摸屏幕的时候才进入主页面，在主页面闲置两分钟后自动进入屏保视频。
难点：
处理video组件层高问题，在视频上层加一透明页面接收触摸事件。
1.使用subNvue处理层高的方法
在pages.json文件配置视频页面引用vue
{
"path" : "pages/mp4/mp4",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus":{
"titleNView":false ,//关闭导航栏
//解决video组件层高问题
"subNVues":[{
"id": "popup", // 唯一标识 nvue页面最外层<view id="popup" > </view>
"path": "pages/closepage/closepage", // nvue页面路径 ，此页面配置弹窗内容
//"type": "popup", //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
"style": {
"position":"absolute",
"height": "750px", //这里控制遮罩层高度
"top":"40px",
"background":"transparent" //透明
}
}]
}
}
},
在播放视频页面加载最上层的nvue页面
<script>
//声明全局变量
var subNvue = null
export default {
data() {
return {
}
},
onLoad() {
subNvue=uni.getSubNVueById('popup'); //加载弹窗
},
onShow() {
subNvue.show() // 显示弹窗
},
onHide() {
subNvue.hide() //隐藏弹窗
},
}
</script>
nvue页面用于接收事件
<template>
<view id="popup" >
<view class="gb" @click="btnclose" :style=" {height:windowHeight +'px', width:windowWidth +'px'} ">
<!-- <image class="gbimage" src="../../static/png/gb.png" mode=""></image> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
windowWidth: 0,
windowHeight: 0
}
},
onLoad() {
uni.getSystemInfo({
success: (res) => {
//console.log(res)
this.windowWidth = res.windowWidth
this.windowHeight = res.windowHeight
}
})
},
methods: {
btnclose() {
uni.navigateTo({
//跳转到页面
url: "../index/index",
})
}
}
}
</script>
2.使用定时器触发跳转到屏保页面
在主页面使用定时器计算屏幕闲置时间，逻辑是利用触碰事件清空计时。
<template>
<view class="content" @touchend="touchclear()">
<view> </view>
</view>
</template>
<script>
var ntime = 0 //计时初始值
export default {
data() {
return {
timer: null
}
},
onShow() {
//定时器10秒运行一次
this.timer = setInterval( () => {
this.gotomp4()
}, 10000)
},
onHide() {
// 清除定时器
if(this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
//触摸屏幕的时候不计时
touchclear() {
console.log("时间清零")
ntime = 0
},
//屏幕闲置时间到了就跳转去播放视频
gotomp4(){
ntime = ntime + 1
console.log(ntime)
//闲置时间2分钟
if(ntime >= 12){
ntime = 0
uni.navigateTo({
url: "../mp4/mp4",
})
}
}
}
</script>