uniapp 定时任务获取时分秒

实现 UniApp 定时任务获取实时时间
为了实现在 UniApp 中每秒钟更新一次显示的当前时间（小时、分钟和秒），可以使用 setInterval 方法配合页面生命周期管理。考虑到应用可能切换到后台或其他因素影响定时器准确性，建议如下：
初始化计时功能
在页面加载 (onLoad) 或者首次渲染(onReady) 阶段启动定时器。
export default {
data() {
return {
currentTime: '00:00:00', // 初始时间为零点整时刻
timerId: null // 存储定时器ID以便后续清理
}
},

onLoad(){
this.startTimer();
},

methods: {
startTimer() {
const updateCurrentTime = () => {
let now = new Date();
this.currentTime = [
padZero(now.getHours()),
padZero(now.getMinutes()),
padZero(now.getSeconds())
].join(':');

function padZero(num){
return num.toString().padStart(2, '0');
}
};

clearInterval(this.timerId); // 清除旧有的定时器以防重复执行
this.timerId = setInterval(updateCurrentTime, 1000);
updateCurrentTime(); // 立即刷新一次界面
}
},

onUnload(){ // 当组件卸载前清除定时器防止内存泄漏
clearInterval(this.timerId);
}

}
登录后复制
上述代码片段展示了如何初始化并持续更新界面上的时间显示[^1]。每当页面被打开或重新激活时都会立即触发一次时间更新操作，并每隔一秒再次调用该函数以保持同步最新时间。
处理前后台转换带来的问题
当应用程序进入后台模式后，某些平台可能会暂停 JavaScript 的执行从而导致定时器失效。为此可以在页面隐藏(onHide) 和 显示(onShow) 生命周期钩子内做相应处理:
methods:{
...,
saveLastUpdateTime(){
uni.setStorageSync('last_update_time',new Date());
},
restoreAndAdjustTimeDifference(){
var lastUpdateTimeStr=uni.getStorageSync('last_update_time')||null;
if(!lastUpdateTimeStr)return;

let savedDate=new Date(lastUpdateTimeStr),
currentDate=new Date(),
diffMs=currentDate-savedDate;

// 调整因进程挂起而丢失的时间差额
this.adjustForMissedSeconds(diffMs/1000|0);

// 更新本地存储记录最新的更新时间戳
this.saveLastUpdateTime();
},
adjustForMissedSeconds(missedSecs){
/* 根据具体情况调整逻辑 */
}
},
// 添加新的生命周期事件处理器
onHide:function(){
this.saveLastUpdateTime();
},
onShow:function(){
this.restoreAndAdjustTimeDifference();
this.startTimer();
}
登录后复制
这段脚本确保即使程序短暂失去焦点也能维持较为精确的时间追踪能力[^2]。