【HarmonyOS5.0实战开发】时刻助手应用之功能开发

鸿蒙初辟梦创道远

于 2024-08-29 16:38:13 发布

阅读量177

点赞数 6

分类专栏：安卓鸿蒙前端文章标签： harmonyos 华为鸿蒙安卓前端

本文链接：https://blog.csdn.net/HarmonyOS_666/article/details/141682408

版权

鸿蒙同时被 3 个专栏收录

338 篇文章 4 订阅

订阅专栏

前端

327 篇文章 0 订阅

订阅专栏

安卓

314 篇文章 0 订阅

订阅专栏

效果图

0000000000028230179.20240823133833.42258078380233082528427765703703.gif

时刻助手应用主要为了记录一些特殊的时刻和事件，并在设置的时间点进行提醒。

一、主要功能

1. 用户可以创建事件分类，如生活、学习、工作等，用于对事件进行分类管理，可以创建、编辑和删除分类。

2. 用户可以创建事件，记录一个重要事件，如节假日、节气、发布会等，事件可以包含一个或者多个时刻。用户可以对事件进行编辑和删除。

3. 用户可以在事件中创建一个或多个时刻，从而对事件进行更加详细的记录，时刻根据发生时间进行排序，可以实现一个时刻表。例如记录节气、发布会流程以及日常工作生活中的重要时刻。同时支持提醒功能。

4. 用户可以通过搜索快速找到事件和时刻，可以通过点击事件列表中的事件，查看该事件下的所有时刻。

5. 用户可以通过切换分类，查看该分类下的所有事件和时刻。

6. 应用使用了多端布局，支持手机、平板和折叠屏。

9. 点击时刻Tab页面的悬浮添加按钮或者在时刻列表页面点击添加按钮，在弹窗中可以添加时刻，如果时刻发生时间在创建时间之后，则可以设置提醒。

10. 在搜索框中输入搜索词，可以对事件和时刻进行搜索，并会对当前选择的分类进行关联搜索。

二、所用技术和API

@Provide和@Consume：@Provide作为数据提供者，可以更新子节点的数据，触发页面渲染。@Consume检测到@Provide数据更新后，会发起当前视图的重新渲染。
List：实现列表和滚动
Search组件：实现搜索。
Toggle：组件提供勾选框样式、状态按钮样式及开关样式。
SideBarContainer组件：实现侧边栏功能。
DatePickerDialog组件：实现日期选择器弹窗。
TextPickerDialog组件：实现文本选择器弹窗。
TextInput组件：用于文本输入。
关系型数据库：一种基于关系模型来管理数据的数据库。
首选项：首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。
后台代理提醒：后台代理提醒功能主要提供后台提醒通知发布接口，用于设置日历提醒
emitter: 事件通信。
transition: 动画。
bindSheet半模态组件：实现添加信息的半模态弹窗。
lottie动画：动画图标。

三、相关技术难点和解决方案

1. 代理提醒和权限申请

用户在添加或者修改时刻的时候，如果时间在当前时间之后，则可以通过Toggle组件，打开代理提醒。会在时刻发生时，系统发送代理提醒。

首次设置会弹出权限申请，用户允许以后后续不再弹出。如果用选择了禁止，则后续会弹出自定义的申请权限，跳转去设置页面进行设置。

具体实现细节：

代理提醒使用 @ohos.reminderAgentManager (后台代理提醒)：供后台代理提醒的能力，即当应用被冻结或应用退出时，计时和提醒的功能将被系统服务代理。在开发过程中，开发者可以调用本模块接口创建定时提醒，提醒类型支持倒计时、日历、闹钟三种。时刻助手使用的提醒类型为日历。需要注意的是，

当到达设置的提醒时间点时，通知中心会弹出相应提醒的通知卡片（通知栏消息）。若未点击通知卡片上的关闭/CLOSE按钮，则代理提醒是有效/未过期的；若点击了关闭/CLOSE按钮，则代理提醒过期。

当代理提醒类型是闹钟时，若设置每天提醒，无论是否点击关闭/CLOSE按钮，代理提醒都是有效的。

需要用到以下api:

reminderAgentManager.publishReminder  //发布后台代理提醒。使用promise异步回调

reminderAgentManager.cancelReminder  // 取消指定Id的代理提醒。使用callback异步回调

reminderAgentManager.getValidReminders //获取当前应用设置的所有有效（未过期）的代理提醒。

检查是否开启代理提醒权限：

通过首选项、notificationManager.isNotificationEnabledSync()和requestEnableNotification对是否开启代理权限进行判断，因为用户禁止以后，再次调用requestEnableNotification，不会再弹窗。所以需要开发者自己实现一个自定义弹窗，在用户禁止权限以后，如果再次调用能够弹窗提示。

export function requestEnableNotification(context: common.UIAbilityContext) {
  return new Promise<boolean>(async (resolve, reject) => {
    let enabled = notificationManager.isNotificationEnabledSync();
    if(!enabled) { // 没有通知权限
      // 判断是否权限请求弹窗是否弹过
      preferences = dataPreferences.getPreferencesSync(context, options);
      let isRequestEnableNotification: dataPreferences.ValueType = preferences.getSync('isRequestEnableNotification', false);
      if(!isRequestEnableNotification) { // 如果没有弹过，请求通知授权弹窗
        notificationManager.requestEnableNotification(context).then(() => {
          preferences && preferences.putSync('isRequestEnableNotification', true);
          preferences && preferences.flush();
          resolve(true);
        }).catch((err: BusinessError) => {
          if (1600004 == err.code) {
            // hilog.error(DOMAIN_NUMBER, TAG, `[ANS] requestEnableNotification refused, code is ${err.code}, message is ${err.message}`);
          } else {
            // hilog.error(DOMAIN_NUMBER, TAG, `[ANS] requestEnableNotification failed, code is ${err.code}, message is ${err.message}`);
          }
          preferences && preferences.putSync('isRequestEnableNotification', true);
          preferences && preferences.flush();
          reject(false);
        });
      } else { // 已经弹过了，则返回false，用于自定义弹窗
        reject(false);
      }
    } else {
      resolve(true);
    }
  });
}

2. 动画

为了提升用户体验，在列表中加入了动画。当用户下滑或者编辑项目的的时候，会执行动画，而不是一下子显示出来，这样更加顺滑。

0000000000028230179.20240823152211.82839826685927517588695102146225.gif

具体实现：

组件内转场 (transition)

//基本用法
Image($r('app.media.testImg')).width(200).height(200)
          .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
            TransitionEffect.rotate({ z: 1, angle: 180 })
          ))

时刻助手中，因为要在列表中使用，随着列表滚动，没有被渲染的列表项才执行动画。这就需要根据列表项的索引对动画进行延迟处理。

//实现公共方法，在列表渲染时，返回不同的TransitionEffect
export function getTransitionEffect(index: number) {
  return TransitionEffect.asymmetric(
    TransitionEffect.OPACITY.combine(TransitionEffect.scale({ x: 0.6, y: 0.6 }))
      .animation({ duration: aniDuration, curve: Curve.Friction, delay: aniInterval * index }),
    TransitionEffect.OPACITY.animation({ duration: aniDuration, curve: Curve.Friction, delay: aniInterval})
  )
}

//列表渲染时，根据索引返回不同的TransitionEffect
     ListItem() {

    }

    .transition(getTransitionEffect(this.index))

以上是鸿蒙原生应用时刻助手的功能、技术选择以及遇到的问题和解决方案