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.mzph.cn/news/149015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

035、目标检测-物体和数据集

之——物体检测和数据集 目录 之——物体检测和数据集 杂谈 正文 1.目标检测 2.目标检测数据集 3.目标检测和边界框 4.目标检测数据集示例 杂谈 目标检测是计算机视觉中应用最为广泛的&#xff0c;之前所研究的图片分类等都需要基于目标检测完成。 在图像分类任务中&am…

html在线生成二维码(附源码)

文章目录 1.设计来源1.1 主界面1.2 美化功能 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134458927 html二维码生成&#xff08;附源码&#xff09;&#xff0c;生成二…

2023年中国农业机器人行业市场规模及发展趋势分析[图]

农业机器人是一种机器&#xff0c;是机器人在农业生产中的运用&#xff0c;是一种可由不同程序软件控制&#xff0c;以适应各种作业,能感觉并适应作物种类或环境变化&#xff0c;有检测(如视觉等)和演算等人工智能的新一代无人自动操作机械。 农业机器人分类 资料来源&#xf…

Redux-状态管理组件

一、简介 react中的状态只属于某个组件。而Redux是一个全局管理js状态的架构&#xff0c;让组件通信更加容易。 之前是状态在所有组件间传递&#xff0c;而redux通过store来实现这个功能。 Redux特性&#xff1a; 1.Single source Of truth&#xff0c;通过store唯一维护状态…

多视图聚类的论文阅读(一)

当聚类的方式使用的是某一类预定义好的相似性度量时&#xff0c; 会出现如下情况&#xff1a; 数据聚类方面取得了成功&#xff0c;但它们通常依赖于预定义的相似性度量&#xff0c;而这些度量受原始方法的影响:当输入维数相对较高时&#xff0c;往往是无效的。 1. Deep Mult…

python爬取快手视频

原理 F12点击graphql能够看到里面有若干视频信息,一会儿要取其中的url地址 右键复制cURL 然后进入到这个转换器连接 https://curlconverter.com/python/ 点击这个连接复制上述信息,然后就能解析处下面的代码,拷贝到你的项目中替换cookies,headers,json_data 源代码 …

[和ChatGPT学编程]Python Requests 简介

requests 是一个流行的 Python 库&#xff0c;用于发送 HTTP 请求。它提供了简洁而友好的 API&#xff0c;使得发送 HTTP 请求变得简单而直观。requests 具有许多强大的功能&#xff0c;适用于各种 HTTP 请求场景&#xff0c;包括 GET、POST、PUT、DELETE 等。 目录 requests 库…

【Django-DRF用法】多年积累md笔记,第3篇:Django-DRF的序列化和反序列化详解

本文从分析现在流行的前后端分离Web应用模式说起&#xff0c;然后介绍如何设计REST API&#xff0c;通过使用Django来实现一个REST API为例&#xff0c;明确后端开发REST API要做的最核心工作&#xff0c;然后介绍Django REST framework能帮助我们简化开发REST API的工作。 全…

Docker Swarm: 容器编排的力量和优势深度解析

文章目录 Docker Swarm的核心概念1. 节点&#xff08;Node&#xff09;2. 服务&#xff08;Service&#xff09;3. 栈&#xff08;Stack&#xff09; 使用Docker Swarm1. 初始化Swarm2. 加入节点3. 创建服务4. 扩展和缩减服务5. 管理栈6. 管理服务更新 Docker Swarm的优势深度解…

分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测

分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测 目录 分类预测 | Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现基于SDAE堆叠去噪自编码器的数据分类预测&#xff08;完整源码和数据) 2.多…

Kubernetes学习-概念2

参考&#xff1a;关于 cgroup v2 | Kubernetes 关于 cgroup v2 在 Linux 上&#xff0c;控制组约束分配给进程的资源。 kubelet 和底层容器运行时都需要对接 cgroup 来强制执行为 Pod 和容器管理资源&#xff0c; 这包括为容器化工作负载配置 CPU/内存请求和限制。 Linux 中…

BatchNormalization:解决神经网络中的内部协变量偏移问题

ICML2015 截至目前51172引 论文链接 代码连接(planing) 文章提出的问题 减少神经网络隐藏层中的”内部协变量偏移”问题。 在机器学习领域存在“协变量偏移”问题,问题的前提是我们划分数据集的时候,训练集和测试集往往假设是独立同分布(i.i.d)的,这种独立同分布更有利于…

结合scss实现黑白主题切换

是看了袁老师的视频后&#xff0c;自己做了一下练习。原视频地址&#xff1a; b站地址https://www.bilibili.com/video/BV15z4y1N7jB/?spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec6cf63302f28d94ebc02cbedcecc57ea首先创建一个全局的scs…

055-第三代软件开发-控制台输出彩虹日志

第三代软件开发-控制台输出彩虹日志 文章目录 第三代软件开发-控制台输出彩虹日志项目介绍控制台输出彩虹日志实现原理真实代码 总结 关键字&#xff1a; Qt、 Qml、 关键字3、 关键字4、 关键字5 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QM…

GSVA,GSEA,KEGG,GO学习

目录 GSVA 1&#xff1a;获取注释基因集 2&#xff1a;运行 GSEA 1,示例数据集 2,运行 GSEA_KEGG富集分析 GSEA_GO富集分析 DO数据库GSEA MSigDB数据库选取GSEA KEGG 1&#xff1a;运行 2&#xff1a;绘图 bar图 气泡图 绘图美化 GO GSVA 1&#xff1a;获取注…

TikTok与媒体素养:如何辨别虚假信息?

在当今数字时代&#xff0c;社交媒体平台如TikTok已经成为信息传播和社交互动的主要渠道之一。然而&#xff0c;随之而来的是虚假信息的泛滥&#xff0c;这对用户的媒体素养提出了严峻的挑战。本文将探讨TikTok平台上虚假信息的现象&#xff0c;以及如何提高媒体素养&#xff0…

EfficientPhys

研究背景 基于相机的生理测量是一种非接触式方法&#xff0c;用于通过从身体反射的光捕获心脏信号。最常见的此类信号是通过光电体积描记图 (PPG) 测量的血容量脉搏 (BVP)。由此&#xff0c;可以推导出心率、呼吸率和脉搏传导时间。神经网络模型是当前最先进的 rPPG 测量方式。…

Zeet构建多云战略充分发挥云的优势

大型企业通常拥有基础设施和应用团队&#xff0c;有能力围绕自己的业务需求构建所需平台。但对于技术团队精简、预算紧张的小企业来说&#xff0c;定制平台往往不现实而且难以扩展&#xff0c;是负担不起的“奢侈品”。 这一情况催生了平台即服务&#xff08;PaaS&#xff09;…

高效案例检索工具,Alpha案例库智慧检索成为律师检索工具首选

“工欲善其事&#xff0c;必先利其器。”当今&#xff0c;律界同仁需要权衡的问题早已不是“要不要”使用法律科技&#xff0c;而是如何高质量、高效率地使用法律科技工具。在业内人士看来&#xff0c;随着人工智能技术的不断发展&#xff0c;法律行业科技化将成为不可逆转的趋…

PyCharm中常用插件推荐

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…