创建提醒模块 Cordova 与 OpenHarmony 混合开发实战-编程实验室

📌 概述

创建提醒模块允许用户创建定时提醒。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的提醒创建功能。用户可以设置提醒名称、提醒时间、重复周期等信息。模块支持多种提醒类型，帮助用户创建各种提醒。

🔗 完整流程

第一步：提醒表单初始化

当用户进入创建提醒页面时，应用会加载提醒类型列表。用户可以选择提醒类型或从空白表单开始。应用会显示当前时间作为默认值。

第二步：提醒信息输入与验证

用户在表单中输入提醒信息。应用会实时验证用户输入的数据，确保提醒时间等信息有效。当用户输入不合法的数据时，应用会显示错误提示。

第三步：提醒保存与同步

当用户点击保存按钮时，应用会进行最终的数据验证。如果所有字段都通过验证，应用会将提醒保存到 IndexedDB 数据库中。同时，应用会通过 Cordova 调用原生插件，注册系统提醒。

🔧 Web 代码实现

HTML 创建提醒表单

<divid="create-reminder-page"class="page"><divclass="page-header"><h1>创建提醒</h1></div><formid="reminder-form"class="form"><divclass="form-group"><labelfor="reminder-name">提醒名称 *</label><inputtype="text"id="reminder-name"name="name"required></div><divclass="form-group"><labelfor="reminder-time">提醒时间 *</label><inputtype="time"id="reminder-time"name="time"required></div><divclass="form-group"><labelfor="reminder-repeat">重复周期</label><selectid="reminder-repeat"name="repeat"><optionvalue="none">不重复</option><optionvalue="daily">每天</option><optionvalue="weekly">每周</option><optionvalue="monthly">每月</option></select></div><divclass="form-group"><labelfor="reminder-description">描述</label><textareaid="reminder-description"name="description"rows="3"></textarea></div><divclass="form-actions"><buttontype="submit"class="btn btn-primary">保存提醒</button><buttontype="button"class="btn btn-secondary"onclick="navigateTo('reminder-list')">取消</button></div></form></div>

创建提醒页面包含提醒表单。用户可以设置提醒的各项信息。

创建提醒逻辑

asyncfunctionhandleCreateReminder(event){event.preventDefault();constformData=newFormData(document.getElementById('reminder-form'));constreminderData={name:formData.get('name'),time:formData.get('time'),repeat:formData.get('repeat'),description:formData.get('description'),enabled:true,createdAt:newDate().toISOString()};// 验证数据if(!reminderData.name||!reminderData.time){showToast('请填写所有必填字段','warning');return;}try{constreminderId=awaitdb.addReminder(reminderData);// 注册系统提醒if(window.cordova){cordova.exec(function(){console.log('Reminder registered');},function(err){console.error('Error:',err);},'ReminderManager','registerReminder',[{id:reminderId,name:reminderData.name,time:reminderData.time,repeat:reminderData.repeat}]);cordova.exec(null,null,'TeaLogger','logEvent',['reminder_created',{reminderId:reminderId,name:reminderData.name}]);}showToast('提醒已创建','success');setTimeout(()=>navigateTo('reminder-list'),1000);}catch(error){console.error('Failed to create reminder:',error);showToast('创建失败，请重试','error');}}// 初始化表单document.addEventListener('DOMContentLoaded',function(){constform=document.getElementById('reminder-form');if(form){form.addEventListener('submit',handleCreateReminder);// 设置默认时间为当前时间constnow=newDate();consthours=String(now.getHours()).padStart(2,'0');constminutes=String(now.getMinutes()).padStart(2,'0');document.getElementById('reminder-time').value=`${hours}:${minutes}`;}});

这段代码实现了创建提醒功能。handleCreateReminder()处理表单提交并保存提醒。

🔌 OpenHarmony 原生代码

系统提醒注册

// entry/src/main/ets/plugins/ReminderManager.etsimport{reminderAgentManager}from'@kit.BackgroundTasksKit';exportclassReminderManager{staticregisterReminder(reminder:ReminderInfo):void{const[hours,minutes]=reminder.time.split(':').map(Number);constreminderRequest:reminderAgentManager.ReminderRequest={reminderType:reminderAgentManager.ReminderType.REMINDER_TYPE_ALARM,hour:hours,minute:minutes,title:reminder.name,content:`提醒:${reminder.name}`,expiredTime:0,notificationId:reminder.id,slotType:reminderAgentManager.SlotType.SLOT_TYPE_CUSTOM};reminderAgentManager.publishReminder(reminderRequest,(err,reminderId)=>{if(err){hilog.error(0xFF00,'ReminderManager',`Failed to register reminder:${err}`);}else{hilog.info(0xFF00,'ReminderManager',`Reminder registered with id:${reminderId}`);}});}staticcancelReminder(reminderId:number):void{reminderAgentManager.cancelReminder(reminderId,(err)=>{if(err){hilog.error(0xFF00,'ReminderManager',`Failed to cancel reminder:${err}`);}else{hilog.info(0xFF00,'ReminderManager',`Reminder cancelled:${reminderId}`);}});}}interfaceReminderInfo{id:number;name:string;time:string;repeat:string;}