当前位置：首页 > article >正文

鸿蒙OSUniApp 制作倒计时与提醒功能#三方框架 #Uniapp

article 2025/9/10 14:16:28

使用 UniApp 制作倒计时与提醒功能

前言

倒计时与提醒功能在移动应用中应用广泛，如活动秒杀、任务提醒、考试倒计时等。一个实用的倒计时组件不仅要精准计时，还要兼容多端，尤其是在鸿蒙（HarmonyOS）等新兴平台上保证流畅与可靠。本文将以 UniApp 为例，详细讲解如何开发一个通用的倒计时与提醒功能组件，并结合鸿蒙平台的适配与优化建议。

一、需求与设计思路

1. 需求分析

支持自定义倒计时时长与格式
倒计时结束自动触发提醒
支持页面/应用切换时倒计时不中断
兼容鸿蒙平台，适配不同设备
可扩展性强，便于集成到不同业务场景

2. 设计思路

使用 setInterval 实现定时更新，结合 Date.now() 保证精度
组件内部维护剩余时间，支持自定义回调
页面切换时保存剩余时间，返回时自动恢复
提供提醒回调，可结合本地通知API
适配鸿蒙平台的生命周期与通知能力

二、核心代码实现

1. 倒计时组件结构

<template><view class="countdown"><text>{{ timeStr }}</text></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'Countdown',props: {duration: { type: Number, required: true }, // 秒format: { type: String, default: 'HH:mm:ss' },onFinish: { type: Function, default: null },},data() {return {remain: this.duration,timer: null,timeStr: '',endTime: Date.now() + this.duration * 1000,};},methods: {start() {this.clear();this.endTime = Date.now() + this.remain * 1000;this.update();this.timer = setInterval(this.update, 1000);},update() {const now = Date.now();this.remain = Math.max(Math.floor((this.endTime - now) / 1000), 0);this.timeStr = this.formatTime(this.remain);if (this.remain <= 0) {this.clear();this.$emit('finish');if (this.onFinish) this.onFinish();// 鸿蒙平台可结合本地通知API提醒#ifdef APP-PLUSuni.showToast({ title: '倒计时结束', icon: 'none' });#endif}},clear() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},formatTime(sec) {let h = Math.floor(sec / 3600);let m = Math.floor((sec % 3600) / 60);let s = sec % 60;return [h, m, s].map(v => v < 10 ? '0' + v : v).join(':');},},mounted() {this.start();},beforeDestroy() {this.clear();},
};
</script>

3. 样式设计

<style scoped>
.countdown {font-size: 40rpx;color: #ff4d4f;text-align: center;padding: 24rpx 0;letter-spacing: 2rpx;
}
</style>

三、父页面集成与提醒示例

<template><countdown :duration="120" @finish="onFinish" />
</template><script>
import Countdown from '@/components/Countdown.vue';
export default {components: { Countdown },methods: {onFinish() {// 业务提醒逻辑#ifdef APP-PLUSuni.showModal({ title: '提醒', content: '倒计时已结束！' });#endif},},
};
</script>