功能实现:
- 可自定义超时时长,检查时间
- 超时后跳转首页(/pages/home/index/index);
- 如果在首页,则不进行跳转
- 监控状态下, 用户有任意操作(包括但不限于点击,滑动,跳转页面等),则重置监听,重新开始算时间
- 超时方法及逻辑封装到单独的js文件中
- 全局只需在app.vue创建监听,其他页面无需修改
具体代码:
1. 创建timeout.js文件, 代码如下:
export const timeOut = () => {let lastTime = null; //最后一次操作时间let currentTime = null //当前时间let sys_timeout = 3 * 60 * 1000; // 超时时间(我设置了3分钟,可自行修改)let check_time = 10 * 1000; //检查时间(每隔多长时间检查一次, 可自行修改)let goOut = null; //计时器let home_path = 'pages/home/index/index'; //首页地址const isTimeOut = () => {// 页面上一次的操作时间lastTime = uni.getStorageSync('lastOperationTime');if (!lastTime) {clearInterval(goOut);}currentTime = new Date().getTime()// 判断是否超时if ((currentTime - lastTime) > sys_timeout) {console.log("超时了")return true;} else {return false;}}const isLoginOut = () => {clearInterval(goOut);goOut = setInterval(() => {const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const pagePath = currentPage.route;if (isTimeOut()) {console.log('当前页面路径为:' + pagePath);if (pagePath.indexOf(home_path) == -1) {uni.reLaunch({url: `/${home_path}`,});}}}, check_time);}isLoginOut();
}
2. 在App.vue文件中加入:
onLaunch: function() {console.log('App Launch');//超时返回首页uni.setStorageSync('lastOperationTime', new Date().getTime()); //设置最后一次操作时间timeOut();setTimeout(function() {const events = ['click', 'mousemove', 'keydown', 'scroll', 'keypress', 'touchstart'];var body_ = document.getElementsByTagName('body')[0];events.forEach(e => {body_.addEventListener(e, function() {uni.setStorageSync('lastOperationTime', new Date().getTime()); //设置操作时间});});}, 1000);
}
tips: events 中包含了基本的点击事件, 滑动事件等,具体可自行修改
参考下图