在这里插入图片描述

📌 概述

创建提醒模块允许用户创建定时提醒。该模块集成了 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

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐