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

news2024/9/22 15:31:40

一、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.coloradmin.cn/o/1229101.html

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

相关文章

利用API连接抖音外卖与电商平台和营销系统,实现无代码开发的集成

利用API连接抖音外卖和电商平台 抖音来客&#xff0c;作为抖音生活服务商家经营平台&#xff0c;为商家提供一站式经营服务&#xff0c;其中包括入驻、上品、经营和履约等功能。商家可以通过API调用&#xff0c;实现电商平台和抖音外卖的连接&#xff0c;从而优化运营效率。例…

源启容器平台KubeGien 打造云原生转型的破浪之舰

云原生是应用上云的标准路径&#xff0c;也是未来发展大的趋势。如何将业务平滑过渡到云上&#xff1f;怎样应对上云期间的各项挑战呢&#xff1f;中电金信基于金融级数字底座“源启”打造了一款非常稳定可靠、多云异构、安全可控、开放灵活的容器平台产品——源启容器平台Kube…

第二证券:知名私募美股持仓曝光 科技与消费板块成“心头好”

近来&#xff0c;美国证券交易委员会&#xff08;SEC&#xff09;网站闪现&#xff0c;高毅资产、HHLR&#xff08;高瓴旗下独立二级商场基金管理人&#xff09;、景林资产和千合本钱旗下对冲基金TOP ACE&#xff0c;陆续宣告了到三季度末的美股持仓。 据私募排排网核算&#…

代码逻辑修复与其他爬虫ip库的应用

在一个项目中&#xff0c;由于需要设置 http_proxy 来爬虫IP访问网络&#xff0c;但在使用 requests 库下载文件时遇到了问题。具体表现为在执行 Python 脚本时&#xff0c;程序会阻塞并最终超时&#xff0c;无法正常完成文件下载。 解决方案 针对这个问题&#xff0c;我们可以…

本地部署 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…

【Java SE】如何解读Java的继承和多态的特性?

前言 什么是继承和多态&#xff0c;为什么被称为Java三大特性&#xff0c;这两大特性为我们程序员带来了什么影响呢&#xff1f;是让复杂的代码简化了&#xff0c;还是为程序员写代码提供了多样性呢&#xff1f;那让我们一起来揭开这层神秘的面纱吧&#xff01; 1.继承 1.1为…

日期相关整理

3214. 节日 有一类节日的日期并不是固定的&#xff0c;而是以“a 月的第 b 个星期 c ”的形式定下来的&#xff0c;比如说母亲节就定为每年的五月的第二个星期日。 现在&#xff0c;给你 a,b,c 和 y1,y2&#xff0c;希望你输出从公元 y1 年到公元 y2 年间的每年的 a 月的第 b 个…

重要功能丨支持1688API 接口对接一键跨境铺货及采购,解决跨境卖家货源烦恼!

在跨境电商运营中&#xff0c;不少卖家都会优先选择1688平台产品作为跨境店铺货源。 必不可少的1688商品详情接口 阿里巴巴中国站获得1688商品详情 API 返回值说明 item_get-获得1688商品详情 1688.item_get 公共参数 请求地址: 申请调用KEY测试 名称类型必须描述keyStrin…

鼠标点击网页任何地方都显示光标闪烁输入状态

出现这种情况的原因 因为大概是用户无意中打开了浏览器无障碍模式中的使用文本光标浏览网页的功能。 对于Chrome浏览器而言就是这样的&#xff1a; 直接按F7关闭这个模式

十倍增量的海外客户开发新方式来了!外贸企业可直接照做

外贸和B2大C型&#xff08;汽车、房产、保险、教育等&#xff09;企业出海过程中&#xff0c;除了常见的数字营销&#xff08;投放&#xff09;、平台营销、活动营销&#xff08;线下展会&#xff09;和内容营销&#xff0c;还有一个批量化可快速复制起量的营销方式&#xff1a…

SIMULIA-Simpack 2022x新功能介绍

通用功能 增加库伦摩擦类型 力元95 Coulomb Friction增加了3种新的摩擦方向类型用于模拟平面、圆柱和球面摩擦。 针对平移和旋转摩擦改进了滑动到粘着过渡阶段的检测&#xff0c;增加一个参数定义两种不同的滑移-粘滞过渡模式&#xff0c;即“Unloaded stick stiffness”和“…

超全毛玻璃图标教程,不看你就OUT了!

相比热衷于UI设计的朋友们&#xff0c;都曾经听说过玻璃拟态图标这个名词。玻璃拟态图标以其吸引人的外观和易于上手的特性&#xff0c;赢得了大家的青睐。在这篇文章中&#xff0c;将使用一款免费的在线图标设计工具Pixso&#xff0c;为你详解通过四个步骤&#xff0c;让你快速…

UE TransformVector 学习笔记

假如算现在枪的位置&#xff0c;那么就是先拿人的位置再拿枪在本地的相对位置相加&#xff0c;就是枪的位置&#xff0c;也就是枪在场景中的位置&#xff0c;那么这里还可以写成Actor的变化和枪的相对位置连在TransformVector上&#xff0c;返回的就是枪的场景位置 这里做反算&…

基于C++实现循环赛日程表(分治算法)

一、问题描叙 设有n2^k个运动员&#xff0c;要进行网球循环赛。现在要设计一个满足以下要求的比赛日程表 每个选手必须与其他n-1个选手各赛一场每个选手一天只能赛一次循环赛一共进行n-1天 二、问题分析 按此要求可将比赛日程表设计成n行n-1列的表&#xff0c;在表中第 i 行…

kafka本地安装报错

Error: VM option ‘UseG1GC’ is experimental and must be enabled via -XX:UnlockExperimentalVMOptions. #打开 bin/kafka-run-class.sh KAFKA_JVM_PERFORMANCE_OPTS“-server -XX:UseG1GC -XX:MaxGCPauseMillis20 -XX:InitiatingHeapOccupancyPercent35 -XX:ExplicitGCInv…

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

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

unexpected end of stream on

SpringCloud使用FeignClient调用第三方接口报错unexpected end of stream on ; 解决方法&#xff1a; 1.检查服务器端口是否被占用 lsof -i:端口&#xff1b; 2.nacos添加超时配置&#xff1a;

Taro安装及使用

安装及使用 安装​ Taro 项目基于 node&#xff0c;请确保已具备较新的 node 环境&#xff08;>12.0.0&#xff09;&#xff0c;推荐使用 node 版本管理工具 nvm 来管理 node&#xff0c;这样不仅可以很方便地切换 node 版本&#xff0c;而且全局安装时候也不用加 sudo 了…

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()…