uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)

功能实现:

1. 可自定义超时时长,检查时间
2. 超时后跳转首页(/pages/home/index/index);
3.  如果在首页,则不进行跳转
4. 监控状态下, 用户有任意操作(包括但不限于点击,滑动,跳转页面等),则重置监听,重新开始算时间
5. 超时方法及逻辑封装到单独的js文件中
6.  全局只需在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 中包含了基本的点击事件, 滑动事件等,具体可自行修改

参考下图

原文地址：https://blog.csdn.net/weixin_44805839/article/details/144450034

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！