学习提醒模块 Cordova 与 OpenHarmony 混合开发实战

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

概述

学习提醒模块是福报养成计应用中的一个辅助功能，它为用户提供了灵活的学习提醒机制。用户可以根据自己的学习计划设置提醒，系统会在指定的时间发送提醒通知，帮助用户坚持学习，养成良好的学习习惯。这个模块的设计目的是通过定时提醒增强用户的学习自律性，提高学习效率。

学习提醒模块支持多种提醒方式。用户可以设置每日提醒、每周提醒等定期提醒。系统支持自定义提醒时间和提醒内容。用户可以管理所有的提醒，启用或禁用特定的提醒。系统会记录用户的提醒历史，用户可以查看过去的提醒。

完整流程

第一部分：提醒设置与创建

用户在提醒设置页面中创建新的学习提醒。用户可以设置提醒的频率（每日、每周等）、时间、内容等。系统会验证提醒设置的有效性，确保提醒时间合理。

第二部分：提醒发送与通知

系统根据用户设置的提醒规则，定时检查是否需要发送提醒。当到达提醒时间时，系统会发送通知给用户。通知会显示提醒的内容，用户可以点击通知进入应用。

第三部分：提醒管理与反馈

用户可以查看所有的提醒列表，管理提醒的启用/禁用状态。用户可以编辑或删除提醒。系统会记录用户对提醒的响应情况，用于优化提醒策略。

Web 代码实现

html 复制代码

<div class="reminders-container">
  <h1>学习提醒</h1>
  <div class="reminder-form">
    <input type="time" id="reminderTime">
    <button onclick="setReminder()">设置提醒</button>
  </div>
  <div class="reminders-list" id="remindersList"></div>
</div>

HTML 结构包含提醒设置表单和提醒列表容器。用户可以在表单中输入提醒时间，点击按钮设置提醒。

JavaScript 逻辑

javascript 复制代码

class RemindersModule {
  setReminder() {
    const time = document.getElementById('reminderTime').value;

    cordova.exec(
      (result) => {
        this.loadReminders();
      },
      (error) => console.error('设置提醒失败:', error),
      'RemindersPlugin',
      'setReminder',
      [{ time }]
    );
  }

  loadReminders() {
    cordova.exec(
      (result) => {
        this.renderReminders(result.reminders);
      },
      (error) => console.error('加载提醒失败:', error),
      'RemindersPlugin',
      'getReminders',
      []
    );
  }

  renderReminders(reminders) {
    const list = document.getElementById('remindersList');
    list.innerHTML = '';
    reminders.forEach(reminder => {
      const div = document.createElement('div');
      div.className = 'reminder-item';
      div.innerHTML = `
        <p>每天 ${reminder.time} 提醒</p>
        <button onclick="deleteReminder(${reminder.id})">删除</button>
      `;
      list.appendChild(div);
    });
  }
}

const remindersModule = new RemindersModule();
remindersModule.loadReminders();

JavaScript 代码通过 Cordova 的 exec 方法调用原生插件设置和获取提醒。setReminder 方法获取用户输入的提醒时间，提交到原生层保存。loadReminders 方法获取所有提醒，renderReminders 方法将提醒渲染成列表项。

原生代码

typescript 复制代码

export class RemindersPlugin {
  setReminder(params: any, callback: (success: boolean) => void): void {
    try {
      const db = this.getDatabase();
      const userId = this.getUserId();

      db.insert('learning_reminders', [userId, params.time, Date.now()]);
      callback(true);
    } catch (error) {
      callback(false);
    }
  }

  getReminders(callback: (data: any) => void): void {
    try {
      const db = this.getDatabase();
      const userId = this.getUserId();

      const reminders = db.query(`
        SELECT * FROM learning_reminders WHERE user_id = ?
      `, [userId]);

      callback({ reminders });
    } catch (error) {
      callback({ reminders: [] });
    }
  }

  private getDatabase(): any { return null; }
  private getUserId(): string { return ''; }
}

原生代码使用 ArkTS 实现提醒的保存和查询。setReminder 方法将用户设置的提醒保存到数据库。getReminders 方法查询当前用户的所有提醒。

📝 总结

学习提醒模块帮助用户养成定期学习的习惯。关键技术包括：提醒设置、定时通知、提醒管理等。通过 Cordova 与 OpenHarmony 的结合，实现了完整的学习提醒功能。