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唯一维护状态…

JDBC编程

1. JDBC 简介 1.1 JDBC概述 : JDBC : Java DataBase Connectivity&#xff0c;是Sun公司制定的Java程序连接和操纵数据库的一组应用接口标准 1.2 JDBC 编程步骤 (1) 引入 java.sql 包的所有类及接口。 (2) 加载相应数据库的JDBC驱动程序。不同数据库系统的JDBC驱动程序不同&…

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

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

python爬取快手视频

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

使用 Hugging Face Transformer 微调 BERT

微调 BERT有助于将其语言理解能力扩展到更新的文本领域。BERT 的与众不同之处在于它能够掌握句子的上下文关系,理解每个单词相对于其邻居的含义。我们将使用 Hugging Face Transformers 训练 BERT,还将教 BERT 分析 Arxiv 的摘要并将其分类为 11 个类别之一。 为什么微调 BER…

[和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的优势深度解…

shadow复习之planar shadow

planar shadow 通常来说 shadow都是画一个map 这个map有个很大的问题&#xff0c;那就是size有问题 你希望有很高的精度&#xff0c;就必定要用大size的图片&#xff0c;这显然是不太妙的 那么这里就出现一个取巧的法子&#xff0c;如果你只考虑投影到平面上&#xff0c;光源是…

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

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

C#中的DateTime类

C# 中的 DateTime 类是用于表示日期和时间的结构。它提供了一系列属性和方法&#xff0c;用于处理日期和时间的各种操作和计算。下面是一些常用的 DateTime 类的用法和方法解释&#xff0c;以及相应的示例说明&#xff1a; 创建 DateTime 对象&#xff1a; 使用当前日期和时间创…

Kubernetes学习-概念2

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

概念理论类: TCP/IP、Http、Socket之间的区别

转载&#xff1a;百度安全验证 一、TCP/IP 1. 定义 TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;是一组用于互联网的通信协议&#xff0c;由美国国防部高级研究计划署&#xff08;ARPA&#xff09;在20世纪70年代开发&#xff0c;被广泛…

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…

“ /^A-Z:\\{1,2}^/:\*\?<>\|+\.(jpg|gif|png|bmp)$/i ”这个正则表达式的理解

这个正则表达式可以分解为以下几个部分&#xff1a; ^&#xff1a;这是一个开始符号&#xff0c;表示匹配必须从字符串的开始部分开始。/&#xff1a;这是一个斜杠符号&#xff0c;通常在正则表达式中用来表示特殊字符的转义。A-Z:&#xff1a;这部分表示匹配一个大写字母后跟…

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

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