uniapp的app项目，某个页面长时间无操作，返回首页

最开始想做成一个公共的，完全提取出来的一个组件，组件设置背景透明，到时候哪个页面需要，直接引入组件就可以了，所以最开始做的是一个vue的组件，在组件中，监听页面的@touchstart，但是这个组件会盖住原来页面的一些操作，导致原来页面的操作无法进行，所以最后只是把公共的方法提取出来做了mixins，然后在原来的页面加了@touchstart.capture，为啥要capture，下面会具体描述。

mixins代码：

复制代码

import {timeOutToHome} from "@/static/constant/patient.js"
import {pageReLauncho } from '@/utils/common';
	
export default {
  data() {
    return {
      idleTimer: null, // 定时器
    };
  },
  methods: {
    // 启动定时器
    startIdleTimer() {
      this.idleTimer = setTimeout(() => {
				// 检查当前页面是否仍然活跃:因为刚开始，是dragPatient中的click先触发，然后页面的click再触发，导致先跳转页面，才执行重置定时器，跳转页面后，有执行定时器跳到首页了，现在在页面外层的click增加了click.capture，就是先执行外层click-重置定时其，在执行dragPatient的click，就不会有问题
				// const pages = getCurrentPages();
				// const currentPage = pages[pages.length - 1];
				// console.log('-----current', currentPage.route)
				// if (currentPage.route !== "pages/patient/patient") {
				// 	this.clear() // 如果已经不是当前页面，清理定时器
				// 	return;
				// }
							
				console.log('----当前播放状态', this.playStatus)
				if(!this.playStatus){
					console.log("页面长时间无操作，执行特定事件");
					this.onIdle();
				}
      }, timeOutToHome);
    },
    // 重置定时器
    resetIdleTimer() {
	console.log('---重置定时器')
      this.clear()
      this.startIdleTimer();
    },
    // 页面无操作时执行的事件
    onIdle() {
      // 在这里执行你想要的操作：例如：弹出提示框、跳转页面等
      console.log("用户长时间没有操作页面");
			pageReLauncho("index/home")
    },
    // 监听用户操作
    handleUserActivity() {
      this.resetIdleTimer();
    },
    clear(){
		clearTimeout(this.idleTimer);
		this.idleTimer = null
	}
  },
  onShow() {
	// 页面加载时启动定时器
	this.startIdleTimer();
  },
  onHide() {
	console.log('---clear timeout')
	 this.clear()
  },
  onUnload() {
	console.log('---clear timeout')
	 this.clear()
  }
};

主页面代码：

复制代码

<template>
  <view class="patient-home-container" @touchstart.capture="handleUserActivity">

注意点分析：

1、测试的时候，页面有个侧边导航，点击跳转其他页面，但是跳到其他页面过了一段时间，又跳到首页了，检查后发现，原来侧边导航的点击在页面点击之前执行了，导致即使跳转页面，还会执行每隔一段时间跳转首页，加上capture后，就会先执行页面的操作，在执行页面内按钮的操作，具体如下图

2、之前把touchStart放在了组件中，但是会导致页面的click失效，所以放回了页面中。

3、这里面mixins多了一个操作，判断视频是否播放，因为需求：如果视频正在播放不允许返回首页，所以在mixins中判断了当前视频播放的状态，这个状态在页面中通过播放、暂停等事件控制，主要代码如下：

复制代码

 <video 
	ref="myVideoRef"
	class="video-player" 
	:src="currentVideo" 
	:poster="currentPoster"
	@play="onPlay"
	@pause="onPause"
	@ended="onEnded"
	controls>
</video>


onPlay(e) {
    console.log('视频开始播放', e);
	this.playStatus = true;
},
onPause(e) {
	console.log('视频暂停', e);
	this.playStatus = false;
	this.resetIdleTimer()
},
onEnded(e) {
	console.log('视频播放结束', e);
	this.playStatus = false;
	this.resetIdleTimer()
},