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

3g 手机网站网站移动端优化工具

wzjs 2025/8/9 8:45:00

3g 手机网站,网站移动端优化工具,目前网站开发状况,做儿童方面的网站使用 UniApp 制作倒计时与提醒功能前言倒计时与提醒功能在移动应用中应用广泛，如活动秒杀、任务提醒、考试倒计时等。一个实用的倒计时组件不仅要精准计时，还要兼容多端，尤其是在鸿蒙（HarmonyOS）等新兴平台上保证流…

使用 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>