uniapp 开发视频屏保

需求：
一台大屏幕安卓主机用于前台服务，在启动APP的时候播放视频，触摸屏幕的时候才进入主页面，在主页面闲置两分钟后自动进入屏保视频。
难点：
处理video组件层高问题，在视频上层加一透明页面接收触摸事件。

1.使用subNvue处理层高的方法

在pages.json文件配置视频页面引用vue

		{
		    "path" : "pages/mp4/mp4",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false,
				"app-plus":{
					"titleNView":false  ,//关闭导航栏
					
					//解决video组件层高问题
					"subNVues":[{  
						"id": "popup", // 唯一标识  nvue页面最外层 
						"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>