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 中包含了基本的点击事件, 滑动事件等,具体可自行修改

参考下图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/937515.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MAC M3电脑在idea上搭建Spark环境并跑通第一个程序

我的电脑是Macbook Pro,最近在学习Spark,想要在idea里搭建Spark环境,为之后的Spark编程作准备。下面是在MAC版本的idea里配置Spark环境。 1. 准备工作 1.安装 JDK 确保Mac 上已经安装了 JDK 8 或更高版本。 可通过 java -version 查看是否…

展柜设计公司平面布置小程序的分析与设计springboot+论文源码调试讲解

3系统的需求分析 需求分析的任务是通过详细调查展柜设计公司平面布置小程序软件所需的对象,充分了解系统的工作概况,明确功能实现的各种需求,然后在此基础上确定系统的功能。系统必须充分考虑今后可能的扩充和改变。 3.1可行性分析 通过对…

用人话讲计算机:Python篇!(十二)正则运算+re模块

目录 一、正则表达式 (1)什么是正则表达式 (2)它的结构及使用 示例: 1.字符 . (←这里有个小点哦) 2.字符 | 3.字符 [ ] 4.字符^ 5.字符\d (3)补充&#xff…

C# 与PLC数据交互

点击跳转下载地址 点击跳转胡工科技官网

康佳Android面试题及参考答案(多张原理图)

JVM 内存分布和分代回收机制是什么? JVM 内存主要分为以下几个区域。 堆(Heap)是 JVM 管理的最大的一块内存区域,主要用于存放对象实例。所有线程共享堆内存,在堆中又分为年轻代(Young Generation)和老年代(Old Generation)。年轻代又分为 Eden 区和两个 Survivor 区(…

家校通小程序实战教程10部门管理前后端连接

目录 1 加载后端的数据2 为什么不直接给变量赋值3 保存部门信息4 最终的效果5 总结 现在部门管理已经完成了后端功能和前端开发,就需要在前端调用后端的数据完成界面的展示,而且在录入部门信息后需要提交到数据库里,本篇我们介绍一下前后端如…

【Java】链接数据库简介

JDBC基本原理 JDBC 提供了一套通用的接口,允许 Java 程序与不同类型的数据库进行交互。 JDBC 是 Java 提供的一种用于与数据库通信的 API(应用程序编程接口),定义了 Java 程序如何与数据库进行连接、执行查询、操作数据等。JDBC…

企业级包管理器之 monorepomultirepo (8)

在企业级项目开发中,面对多个项目的管理,monorepo 和 multirepo 是两种常见的代码管理方案,它们各有特点与优劣,下面我们来详细了解一下。 一、基本概念 monorepo:“mono”在英语中有“单一的、单独的”之意&#xf…

SQLite 数据库学习

0.引言 SQL, 全名是 Structured Query Language, 中文翻译是"结构化查询语言"。它是一种专门用来与数据库交互的语言。简单来说,SQL就是跟数据库"对话"的一种语言。 1.install sudo apt update sudo apt install sqlitebrowser这是一个开源的…

电子科技大学考研,计算机与软件专业怎么选择?

电子科技大学在计算机与软件领域具备卓越实力,其毕业生就业前景及薪资水平均颇为可观。因此,学生应依据个人课程专长来选定专业。若各项课程均表现出色,推荐25届考生优先考虑软件专业,因其上岸难度相对较低。 接下来,C…

智能客户服务:科技赋能下的新体验

在当今这个数字化时代,客户服务已经不仅仅是简单的售后服务,它已竞争的关键要素之一。随着人工智能、大数据、云计算等技术的飞速发展,智能客户服务正逐步改变着传统的服务模式,为企业和消费者带来了前所未有的新体验。 一、智能客…

HCIA-Access V2.5_2_3_网络通信基础_以太网概述

什么是以太网 以太网是由IEEE定义的局域网技术,也是目前应用最普遍的技术,早期的令牌环网,FDDI等局域网技术都被它取代了,以太网主要分为两类,共享型以太网和交换型以太网。共享式以太网主要采用总线型的拓扑结构&…

Unix 传奇 | 谁写了 Linux | Unix birthmark

注:本文为 “左耳听风”陈皓的 unix 相关文章合辑。 皓侠已走远,文章有点“年头”,但值得一阅。 文中部分超链已沉寂。 Unix 传奇 (上篇) 2010 年 04 月 09 日 陈皓 了解过去,我们才能知其然,更知所以然。总结过去…

【嵌入式软件】跑开发板的前置服务配置

在嵌入式开发中,通常需要在 开发板和主机之间共享、传输和挂载文件。 这篇文章是关于如何在 Ubuntu 中配置 Samba、TFTP 和 NFS 协议的详细步骤。这些协议分别用于远程文件共享、文件传输和内核挂载文件系统。 如何安装协议: 参考:ubuntu18配置:详细的内容我手写了一份文档。…

【docker】springboot 服务提交至docker

准备docker (不是docker hub或者harbor,就是可以运行docker run的服务),首先确保docker已经安装。 本文以linux下举例说明: systemctl stats docker ● docker.service - Docker Application Container EngineLoaded…

C/C++代码性能优化技巧的书籍及资料

使用C/C开发的场景,大多对代码的执行的速度,实时性有较高的要求,像嵌入式系统的开发,资源还受限。在算力存储空间有限的MCU上写出简洁又高效的代码实际是一种艺术。软件工程师在代码设计上的这种差距,会反映在产品的性…

【OJ题解】最长回文子串

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲 目录 **题目链接****解题思路****1. 初步判断****2. 回文子串性质****3. 判断是…

若依-帝可得app后端

视频地址 https://www.bilibili.com/video/BV1pf421B71v?t=510.1 APP后端技术栈 架构解析 验证码功能 开发环境使用改的是固定的验证码 12345正式环境使用的是 阿里云的短信方案@Override public void sendSms(String mobile) {// String code = RandomUtil.randomNumbers(5);…

Qt绘制仪表————附带详细说明和代码示例

文章目录 1 效果2 原理3 编码实践3.1 创建仪表属性类3.2 设置类属性3.3 绘制图案3.3.1 设置反走样3.3.2 绘制背景3.3.3 重新定义坐标原点3.3.4 绘制圆环3.3.5 绘制刻度线3.3.6 绘制刻度线上的描述值3.3.7 绘制指针3.3.8 绘制指针数值和单位3.3.9 控制指针变化 扩展福利参考 1 效…

音频客观测评方法PESQ

一、简介 语音质量感知评估(Perceptual Evaluation of Speech Quality)是一系列的标准,包括一种用于自动评估电话系统用户所体验到的语音质量的测试方法。该标准于2001年被确定为ITU-T P.862建议书[1]。PESQ被电话制造商、网络设备供应商和电…