提醒列表模块 Cordova 与 OpenHarmony 混合开发实战

📌 概述

提醒列表模块展示了所有已创建的提醒。该模块集成了 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