创建提醒模块 Cordova 与 OpenHarmony 混合开发实战
摘要:创建提醒模块集成Cordova与OpenHarmony原生能力,提供完整的提醒创建功能。用户可设置名称、时间、重复周期等信息,支持多种提醒类型。实现流程包括表单初始化、信息验证及保存同步。前端采用HTML表单和JavaScript处理逻辑,后端通过OpenHarmony原生API注册系统提醒,实现跨平台提醒功能。

📌 概述
创建提醒模块允许用户创建定时提醒。该模块集成了 Cordova 框架与 OpenHarmony 原生能力,提供了完整的提醒创建功能。用户可以设置提醒名称、提醒时间、重复周期等信息。模块支持多种提醒类型,帮助用户创建各种提醒。
🔗 完整流程
第一步:提醒表单初始化
当用户进入创建提醒页面时,应用会加载提醒类型列表。用户可以选择提醒类型或从空白表单开始。应用会显示当前时间作为默认值。
第二步:提醒信息输入与验证
用户在表单中输入提醒信息。应用会实时验证用户输入的数据,确保提醒时间等信息有效。当用户输入不合法的数据时,应用会显示错误提示。
第三步:提醒保存与同步
当用户点击保存按钮时,应用会进行最终的数据验证。如果所有字段都通过验证,应用会将提醒保存到 IndexedDB 数据库中。同时,应用会通过 Cordova 调用原生插件,注册系统提醒。
🔧 Web 代码实现
HTML 创建提醒表单
<div id="create-reminder-page" class="page">
<div class="page-header">
<h1>创建提醒</h1>
</div>
<form id="reminder-form" class="form">
<div class="form-group">
<label for="reminder-name">提醒名称 *</label>
<input type="text" id="reminder-name" name="name" required>
</div>
<div class="form-group">
<label for="reminder-time">提醒时间 *</label>
<input type="time" id="reminder-time" name="time" required>
</div>
<div class="form-group">
<label for="reminder-repeat">重复周期</label>
<select id="reminder-repeat" name="repeat">
<option value="none">不重复</option>
<option value="daily">每天</option>
<option value="weekly">每周</option>
<option value="monthly">每月</option>
</select>
</div>
<div class="form-group">
<label for="reminder-description">描述</label>
<textarea id="reminder-description" name="description" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存提醒</button>
<button type="button" class="btn btn-secondary" onclick="navigateTo('reminder-list')">取消</button>
</div>
</form>
</div>
创建提醒页面包含提醒表单。用户可以设置提醒的各项信息。
创建提醒逻辑
async function handleCreateReminder(event) {
event.preventDefault();
const formData = new FormData(document.getElementById('reminder-form'));
const reminderData = {
name: formData.get('name'),
time: formData.get('time'),
repeat: formData.get('repeat'),
description: formData.get('description'),
enabled: true,
createdAt: new Date().toISOString()
};
// 验证数据
if (!reminderData.name || !reminderData.time) {
showToast('请填写所有必填字段', 'warning');
return;
}
try {
const reminderId = await db.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() {
const form = document.getElementById('reminder-form');
if (form) {
form.addEventListener('submit', handleCreateReminder);
// 设置默认时间为当前时间
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
document.getElementById('reminder-time').value = `${hours}:${minutes}`;
}
});
这段代码实现了创建提醒功能。handleCreateReminder() 处理表单提交并保存提醒。
🔌 OpenHarmony 原生代码
系统提醒注册
// entry/src/main/ets/plugins/ReminderManager.ets
import { reminderAgentManager } from '@kit.BackgroundTasksKit';
export class ReminderManager {
static registerReminder(reminder: ReminderInfo): void {
const [hours, minutes] = reminder.time.split(':').map(Number);
const reminderRequest: 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}`);
}
});
}
static cancelReminder(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}`);
}
});
}
}
interface ReminderInfo {
id: number;
name: string;
time: string;
repeat: string;
}
这个类管理系统提醒。registerReminder() 注册系统提醒。cancelReminder() 取消系统提醒。
📝 总结
创建提醒模块展示了如何在 Cordova 框架中实现提醒创建功能。通过 Web 层的表单处理,结合原生层的系统提醒注册,为用户提供了完整的提醒创建体验。
欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net
更多推荐


所有评论(0)