uni-app:前端实现心跳机制(全局)+局部页面控制心跳暂停和重新心跳

一、App.vue全局中写入心跳

  • 在data中定义变量heartbeatTimer,便于暂停心跳使用
  • onLaunch中引用开始心跳的方法startHeartbeat()
  • 写入开始心跳方法
  • 写入暂停心跳方法
  • 写入请求后端刷心跳机制

  •  定义变量
// 在全局设置的心跳机制中添加一个变量来保存定时器的标识
data() {
	return {
		heartbeatTimer: null
	};
},
  • 在应用初始化时启动心跳
onLaunch: function() {
	//在应用初始化时启动心跳
	this.startHeartbeat(); // 在应用初始化时启动心跳
},
  • 写入开始心跳方法

        5s执行一次心跳        

startHeartbeat() {
	console.log('开始心跳')
	this.heartbeatTimer = setInterval(() => {
	    this.sendHeartbeatRequest();
    }, 5000);
},
  • 写入暂停心跳方法
stopHeartbeat() {
	console.log('暂停心跳')
	clearInterval(this.heartbeatTimer);
},
  • 写入请求后端刷心跳机制

        发送心跳请求,这里我是是将方法放入的common.js中的,做了一个简单的封装   

sendHeartbeatRequest() {
	common.heart(this.globalData.access_token);
}

        请求后端刷心跳机制                   

//心跳
function heart(access_token){	
	uni.request({
		url: ip + 'sys/token',
		data: {
			access_token:access_token
		},
		method: 'POST',
		dataType: 'json',
		header: {
			"content-type": "application/json"
		},
		success: res => {
			console.log("成功心跳",res)
		},
		fail(res) {
			console.log(res)
		}
	});
}

二、局部变量中控制心跳的暂停和重新心跳

引用全局变量的方法:getApp().方法()

<template>
	<view>
		<button @tap="pauseHeartbeat">暂停心跳</button>
		<button @tap="restartHeartbeat">开始心跳</button>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {}
		},
		methods: {
			pauseHeartbeat() {
				const app = getApp();
				app.stopHeartbeat();
				console.log('已暂停心跳');
			},
			restartHeartbeat() {
				const app = getApp();
				app.startHeartbeat();
				console.log('已开始心跳');
			}
		}
	}
</script>

<style>

</style>

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

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

相关文章

云计算行业敲门砖—证书盘点

未来10年&#xff0c;都会是云计算技术不断发展变革的时代&#xff0c;这其中会产生非常多的就业机会。有数据统计&#xff0c;未来五年&#xff0c;云计算行业人才缺口达150万&#xff0c;选对了行业&#xff0c;你就成功了一半。 云计算可以考的证书还是很多的&#xff0c;很…

React中StrictMode严格模式,导致开发环境,接口会请求两次或多次( useEffect 请求多次)

问题描述&#xff1a; 我在用 create-react-app时&#xff0c;开发环境&#xff0c;一进页面接口会请求两次或多次。 我在首页 useEffect里 请求一个接口&#xff0c;整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码&#xff0c;确定只调用了一次&#xf…

本地部署 Qwen-14B-Chat

本地部署 Qwen-14B-Chat 1. Qwen-14B 概述2. Github 地址3. 创建虚拟环境4. 安装依赖项5. 快速使用6. 启动 web 演示7. 访问 Qwen 1. Qwen-14B 概述 通义千问-14B&#xff08;Qwen-14B&#xff09; 是阿里云研发的通义千问大模型系列的140亿参数规模的模型。Qwen-14B是基于Tra…

快速上手 TypeScript

什么是TypeScript TypeScript 简称 TS &#xff0c;既是一门新语言&#xff0c;也是 JS 的一个超集&#xff0c;它是在 JavaScript 的基础上增加了一套类型系统&#xff0c;它支持所有的 JS 语句&#xff0c;为工程化开发而生&#xff0c;最终在编译的时候去掉类型和特有的语法…

一些损失函数的学习

CrossEntropy loss 交叉熵是用来衡量两个概率分布之间的差异性或不相似性的度量交叉熵定义为两个概率分布p和q之间的度量。其中&#xff0c;p通常是真实分布&#xff0c;而q是模型预测的分布 交叉熵还等于信息熵 相对熵 这里&#xff0c;x遍历所有可能的事件&#xff0c;p(x)…

从0开始学习JavaScript--JavaScript中的集合类

JavaScript中的集合类是处理数据的关键&#xff0c;涵盖了数组、Set、Map等多种数据结构。本文将深入研究这些集合类的创建、操作&#xff0c;以及实际应用场景&#xff0c;并通过丰富的示例代码&#xff0c;帮助大家更全面地了解和应用这些概念。 数组&#xff08;Array&…

grafana面板介绍

grafana 快速使用 背景 随着公司业务的不断发展&#xff0c;紧接来的是业务种类的增加、服务器数量的增长、网络环境的越发复杂以及发布更加频繁&#xff0c;从而不可避免地带来了线上事故的增多&#xff0c;因此需要对服务器到应用的全方位监控&#xff0c;提前预警&#xf…

在回调之间共享数据

可以在 App 中为 UI 组件编写回调函数&#xff0c;以指定用户与其交互时的行为方式。 在具有多个相互依赖的 UI 组件的 App 中&#xff0c;回调函数通常必须访问主 App 函数中定义的数据&#xff0c;或与其他回调函数共享数据。例如&#xff0c;如果创建一个具有列表框的 App&a…

vue3按需引入 vite-plugin-style-import 2.0版本报错(解决办法)

报错配置()&#xff1a;报错信息解决方法配置 报错配置()&#xff1a; //vite.config.js 部分代码 // 按需自动引入 elementplus 相关样式文件 import styleImport from vite-plugin-style-import// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()…

leetcode:914. 卡牌分组(python3解法)

难度&#xff1a;简单 给定一副牌&#xff0c;每张牌上都写着一个整数。 此时&#xff0c;你需要选定一个数字 X&#xff0c;使我们可以将整副牌按下述规则分成 1 组或更多组&#xff1a; 每组都有 X 张牌。组内所有的牌上都写着相同的整数。 仅当你可选的 X > 2 时返回 tru…

flink 查看写入starrocks的数据量 总行数

针对该connector: https://github.com/StarRocks/docs.zh-cn/blob/main/loading/Flink-connector-starrocks.md

关于ASO优化的分步入门指南2

1、分析元数据。 分析我们收集的当前元数据和关键词&#xff0c;单独跟踪关键字词&#xff0c;然后跟踪组合。例如如果应用程序的标题是关于音乐的应用&#xff0c;则需要跟踪“音乐”、“听”、“听音乐”等关键词。填充元数据分析选项卡&#xff0c;使用搜索分数、下载影响和…

UEC++ day6

简易战斗系统 删除替换父类组件 现在需要添加剑的组件&#xff0c;但是一般来说附着到蒙皮骨骼的东西&#xff0c;也是蒙皮骨骼&#xff0c;所以我们可以新建一个类重新编写&#xff0c;也可以直接继承Interoperable类然后不管UStaticMeshComponent这个组件&#xff0c;新建U…

00后如何组织双十一大促看这一篇就够了! | 京东云技术团队

引言 大家好&#xff0c;我是王蒙恩&#xff0c;一名“整顿职场”的00后。作为一名去年刚刚加入京东的校招生&#xff0c;我有幸成为本次CDP平台的11.11备战负责人。虽然早在实习的时候就经历过大促&#xff0c;但是真正组织整个部门的备战还是很难忘的。于是提起笔&#xff0…

APP外包开发需要注意的问题

在进行APP外包开发时&#xff0c;有一些关键问题需要注意&#xff0c;以确保项目的顺利进行和最终交付满足预期的应用。以下是一些在APP外包开发中需要关注的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎…

基于C#实现字符串相似度

一、概念 对于两个字符串 A 和 B&#xff0c;通过基本的增删改将字符串 A 改成 B&#xff0c;或者将 B 改成 A&#xff0c;在改变的过程中我们使用的最少步骤称之为“编辑距离”。比如如下的字符串&#xff1a;我们通过种种操作&#xff0c;痉挛之后编辑距离为 3&#xff0c;不…

虹科分享 | PEAK版本升级,看看有没有你关注的新功能?

号外号外&#xff01;近期PEAK进行了重要的版本升级&#xff0c;这次升级带来了许多令人兴奋的功能优化&#xff0c;助力您的工作流程更加便捷高效。为了帮助您更好地了解PEAK新版本&#xff0c;我们提供了详细的说明和指导&#xff0c;快来看看有没有你关注的新功能&#xff1…

如何为视频添加旁白,有哪些操作技巧?

简而言之&#xff0c;画外音是视频的旁白&#xff0c;在教程视频中添加旁白可以使视频更加有趣&#xff0c;并向观看者传达更多的信息。 如果您是视频制作人&#xff0c;想要为视频添加旁白&#xff0c;可阅读以下文章&#xff0c;可以帮助您更好地进行配音。 制作配音的技巧…

ubuntu20.04蓝牙连接airpods

ubuntu20.04蓝牙连接airpods 解禁蓝牙安装blueman设置模式连接上没有声音的问题 解禁蓝牙 sudo rmmod btusb sleep 1 sudo modprobe btusb sudo /etc/init.d/bluetooth restart安装blueman sudo apt install blueman sudo apt-get install pulseaudio-module-bluetooth sudo …

球幕投影有哪些常见的物理表现形式?

近年来&#xff0c;投影技术不断发展完善&#xff0c;给内容的表达方式带来了突破&#xff0c;使其展示形式不再局限于平面&#xff0c;即使在弧面、球面等异形幕墙上&#xff0c;也能呈现出令人惊叹的视觉画面。其中球幕投影备受关注&#xff0c;它以半球形屏幕将图像投影到球…
最新文章