📌 概述
提醒列表模块展示了所有已创建的提醒。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的提醒管理功能。用户可以查看所有提醒、启用或禁用提醒、编辑提醒和删除提醒。模块支持提醒的分类显示和搜索。
🔗 完整流程
第一步：提醒数据加载
当用户进入提醒列表页面时，应用会从数据库中加载所有提醒。应用会按提醒类型或状态进行分类显示。
第二步：提醒展示与交互
数据加载完成后，应用会将提醒显示为列表形式。每个提醒显示提醒名称、时间和状态。用户可以点击提醒进行编辑或删除。
第三步：提醒状态管理
用户可以启用或禁用提醒。应用会实时更新提醒的状态。当提醒被触发时，应用会通过原生通知系统发送提醒。
🔧 Web 代码实现
HTML 提醒列表
html
<div id="reminder-list-page" class="page">
<div class="page-header">
<h1>提醒列表</h1>
<button class="btn btn-primary" onclick="navigateTo('create-reminder')">+ 创建提醒</button>
</div>
<div class="reminder-toolbar">
<input type="text" id="reminder-search" class="search-box" placeholder="搜索提醒...">
<select id="reminder-filter" onchange="filterReminders()">
<option value="">全部</option>
<option value="enabled">已启用</option>
<option value="disabled">已禁用</option>
</select>
</div>
<div id="reminders-list" class="reminders-list">
<!-- 提醒项动态生成 -->
</div>
</div>提醒列表页面包含搜索和筛选功能。
提醒列表逻辑
javascript
let allReminders = [];
async function renderReminderList() {
try {
allReminders = await db.getReminders();
const listContainer = document.getElementById('reminders-list');
listContainer.innerHTML = '';
if (allReminders.length === 0) {
listContainer.innerHTML = '<div class="no-data"><p>暂无提醒</p></div>';
return;
}
allReminders.forEach(reminder => {
const reminderEl = createReminderElement(reminder);
listContainer.appendChild(reminderEl);
});
// 绑定搜索事件
document.getElementById('reminder-search').addEventListener('input', function(e) {
const keyword = e.target.value.toLowerCase();
const filtered = allReminders.filter(r =>
r.name.toLowerCase().includes(keyword)
);
renderReminderItems(filtered);
});
} catch (error) {
console.error('Failed to render reminders:', error);
showToast('加载提醒失败', 'error');
}
}
function createReminderElement(reminder) {
const div = document.createElement('div');
div.className = 'reminder-item';
div.dataset.reminderId = reminder.id;
const time = new Date(reminder.time).toLocaleTimeString('zh-CN');
const statusClass = reminder.enabled ? 'enabled' : 'disabled';
const statusText = reminder.enabled ? '已启用' : '已禁用';
div.innerHTML = `
<div class="reminder-info">
<div class="reminder-name">${reminder.name}</div>
<div class="reminder-time">${time}</div>
<div class="reminder-status ${statusClass}">${statusText}</div>
</div>
<div class="reminder-actions">
<button class="btn-icon" onclick="toggleReminder(${reminder.id})" title="切换">🔔</button>
<button class="btn-icon" onclick="editReminder(${reminder.id})" title="编辑">✏️</button>
<button class="btn-icon" onclick="deleteReminder(${reminder.id})" title="删除">🗑️</button>
</div>
`;
return div;
}
function renderReminderItems(reminders) {
const listContainer = document.getElementById('reminders-list');
listContainer.innerHTML = '';
if (reminders.length === 0) {
listContainer.innerHTML = '<div class="no-data"><p>暂无提醒</p></div>';
return;
}
reminders.forEach(reminder => {
const reminderEl = createReminderElement(reminder);
listContainer.appendChild(reminderEl);
});
}
async function toggleReminder(reminderId) {
try {
const reminder = await db.getReminder(reminderId);
await db.updateReminder(reminderId, { enabled: !reminder.enabled });
if (window.cordova) {
cordova.exec(
null, null,
'TeaLogger',
'logEvent',
['reminder_toggled', { reminderId: reminderId, enabled: !reminder.enabled }]
);
}
showToast('提醒已更新', 'success');
renderReminderList();
} catch (error) {
console.error('Failed to toggle reminder:', error);
showToast('更新失败', 'error');
}
}
async function deleteReminder(reminderId) {
if (!confirm('确定要删除这个提醒吗？')) {
return;
}
try {
await db.deleteReminder(reminderId);
if (window.cordova) {
cordova.exec(
null, null,
'TeaLogger',
'logEvent',
['reminder_deleted', { reminderId: reminderId }]
);
}
showToast('提醒已删除', 'success');
renderReminderList();
} catch (error) {
console.error('Failed to delete reminder:', error);
showToast('删除失败', 'error');
}
}
function filterReminders() {
const filter = document.getElementById('reminder-filter').value;
const filtered = filter === '' ? allReminders :
filter === 'enabled' ? allReminders.filter(r => r.enabled) :
allReminders.filter(r => !r.enabled);
renderReminderItems(filtered);
}这段代码实现了提醒列表功能。renderReminderList() 加载并渲染提醒列表。createReminderElement() 创建提醒项。toggleReminder() 启用或禁用提醒。deleteReminder() 删除提醒。
🔌 OpenHarmony 原生代码
提醒通知管理
typescript
// entry/src/main/ets/plugins/ReminderNotification.ets
import { notificationManager } from '@kit.NotificationKit';
export class ReminderNotification {
static sendNotification(reminder: Reminder): void {
const request: notificationManager.NotificationRequest = {
id: reminder.id,
content: {
contentType: notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
normal: {
title: reminder.name,
text: `该喝茶了！`,
additionalText: new Date().toLocaleTimeString('zh-CN')
}
}
};
notificationManager.publish(request, (err) => {
if (err) {
hilog.error(0xFF00, 'ReminderNotification', `Failed to send notification: ${err}`);
} else {
hilog.info(0xFF00, 'ReminderNotification', `Notification sent for reminder: ${reminder.name}`);
}
});
}
static cancelNotification(reminderId: number): void {
notificationManager.cancel(reminderId, (err) => {
if (err) {
hilog.error(0xFF00, 'ReminderNotification', `Failed to cancel notification: ${err}`);
}
});
}
}
interface Reminder {
id: number;
name: string;
time: string;
enabled: boolean;
}这个类管理提醒通知。sendNotification() 发送提醒通知。cancelNotification() 取消提醒通知。
📝 总结
提醒列表模块展示了如何在 Cordova 框架中实现提醒管理功能。通过 Web 层的用户界面和交互，结合原生层的通知管理，为用户提供了完整的提醒管理体验。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net