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

📌 概述

提醒列表模块展示了所有已创建的提醒。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的提醒管理功能。用户可以查看所有提醒、启用或禁用提醒、编辑提醒和删除提醒。模块支持提醒的分类显示和搜索。

🔗 完整流程

第一步：提醒数据加载

当用户进入提醒列表页面时，应用会从数据库中加载所有提醒。应用会按提醒类型或状态进行分类显示。

第二步：提醒展示与交互

数据加载完成后，应用会将提醒显示为列表形式。每个提醒显示提醒名称、时间和状态。用户可以点击提醒进行编辑或删除。

第三步：提醒状态管理

用户可以启用或禁用提醒。应用会实时更新提醒的状态。当提醒被触发时，应用会通过原生通知系统发送提醒。

🔧 Web 代码实现

HTML 提醒列表

<divid="reminder-list-page"class="page"><divclass="page-header"><h1>提醒列表</h1><buttonclass="btn btn-primary"onclick="navigateTo('create-reminder')">+ 创建提醒</button></div><divclass="reminder-toolbar"><inputtype="text"id="reminder-search"class="search-box"placeholder="搜索提醒..."><selectid="reminder-filter"onchange="filterReminders()"><optionvalue="">全部</option><optionvalue="enabled">已启用</option><optionvalue="disabled">已禁用</option></select></div><divid="reminders-list"class="reminders-list"><!-- 提醒项动态生成 --></div></div>

提醒列表页面包含搜索和筛选功能。

提醒列表逻辑

letallReminders=[];asyncfunctionrenderReminderList(){try{allReminders=awaitdb.getReminders();constlistContainer=document.getElementById('reminders-list');listContainer.innerHTML='';if(allReminders.length===0){listContainer.innerHTML='<div class="no-data"><p>暂无提醒</p></div>';return;}allReminders.forEach(reminder=>{constreminderEl=createReminderElement(reminder);listContainer.appendChild(reminderEl);});// 绑定搜索事件document.getElementById('reminder-search').addEventListener('input',function(e){constkeyword=e.target.value.toLowerCase();constfiltered=allReminders.filter(r=>r.name.toLowerCase().includes(keyword));renderReminderItems(filtered);});}catch(error){console.error('Failed to render reminders:',error);showToast('加载提醒失败','error');}}functioncreateReminderElement(reminder){constdiv=document.createElement('div');div.className='reminder-item';div.dataset.reminderId=reminder.id;consttime=newDate(reminder.time).toLocaleTimeString('zh-CN');conststatusClass=reminder.enabled?'enabled':'disabled';conststatusText=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>`;returndiv;}functionrenderReminderItems(reminders){constlistContainer=document.getElementById('reminders-list');listContainer.innerHTML='';if(reminders.length===0){listContainer.innerHTML='<div class="no-data"><p>暂无提醒</p></div>';return;}reminders.forEach(reminder=>{constreminderEl=createReminderElement(reminder);listContainer.appendChild(reminderEl);});}asyncfunctiontoggleReminder(reminderId){try{constreminder=awaitdb.getReminder(reminderId);awaitdb.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');}}asyncfunctiondeleteReminder(reminderId){if(!confirm('确定要删除这个提醒吗？')){return;}try{awaitdb.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');}}functionfilterReminders(){constfilter=document.getElementById('reminder-filter').value;constfiltered=filter===''?allReminders:filter==='enabled'?allReminders.filter(r=>r.enabled):allReminders.filter(r=>!r.enabled);renderReminderItems(filtered);}

这段代码实现了提醒列表功能。renderReminderList()加载并渲染提醒列表。createReminderElement()创建提醒项。toggleReminder()启用或禁用提醒。deleteReminder()删除提醒。

🔌 OpenHarmony 原生代码

提醒通知管理

// entry/src/main/ets/plugins/ReminderNotification.etsimport{notificationManager}from'@kit.NotificationKit';exportclassReminderNotification{staticsendNotification(reminder:Reminder):void{constrequest:notificationManager.NotificationRequest={id:reminder.id,content:{contentType:notificationManager.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,normal:{title:reminder.name,text:`该喝茶了！`,additionalText:newDate().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}`);}});}staticcancelNotification(reminderId:number):void{notificationManager.cancel(reminderId,(err)=>{if(err){hilog.error(0xFF00,'ReminderNotification',`Failed to cancel notification:${err}`);}});}}interfaceReminder{id:number;name:string;time:string;enabled:boolean;}

这个类管理提醒通知。sendNotification()发送提醒通知。cancelNotification()取消提醒通知。

📝 总结

提醒列表模块展示了如何在 Cordova 框架中实现提醒管理功能。通过 Web 层的用户界面和交互，结合原生层的通知管理，为用户提供了完整的提醒管理体验。