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

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

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

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

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

  •  定义变量
// 在全局设置的心跳机制中添加一个变量来保存定时器的标识
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)
		}
	});
}

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

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

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





你可能感兴趣的:(uni-app,uni-app)