【鸿蒙教程】华为HarmonyOS NEXT 应用开发 实现日常提醒应用

前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。

这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

什么是HarmonyOS NEXT？

●HarmonyOS Next为鸿蒙内核，并非Android操作系统的Linux内核，也不再兼容Android的APK格式安装文件，这也是头部软件、游戏公司都在加紧开发鸿蒙原生应用的最主要原因。
●市面上主流的手机操作系统：iOS和Android在研发之初都是为了手机这一单一设备研发的，鸿蒙则是通过一套操作系统来满足多种终端（手机、平板、手表等），从而实现互联互通的目的。HarmonyOScNext就像是乐高，采用组件设计，开发者可以根据需要灵活组合、弹性部署。
●安全性上，HarmonyOS Next的鸿蒙内核已经获得行业三大最高等级的安全认证。并且华为会在最大程度上保障开发者利益和消费者体验。HarmonyOS Next的系统性安全机制和工具可以保障开发者应用不被破解 篡改和仿冒，建立健康纯净的生态秩序，给消费者提供高品质的应用。

为什么要开发这个日常提醒应用？

●最近鸿蒙热度一直不减，而且前端的就业环境越来越差，所以心里面萌生了换一个赛道的想法。
●HarmonyOS NEXT 是华为打造的国产之光，而且是纯血版不再是套壳，更加激起了我的好奇心。
●ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。所以对于我们前端开发来说非常友好。
●HarmonyOS NEXT 文档也比较齐全。而且官方也有相关示例极大的方便了开发。
●根据文档以及自己之前开发经验做一个日常提醒demo 加深自己对HarmonyOS NEXT的理解和实际应用。

日常提醒主要包含功能有哪些？

●首页和个人中心tab页切换，以及tab 底部自定义实现。

●封装公共弹窗日期选择、列表选择等组件。

●访问本地用户首选项preferences实现数据本地化持久存储。

●实现后台任务reminderAgentManager提醒。

●提醒列表展示，以及删除等。

●新增编辑日常提醒记录。

1.实现首页自定义tab页切换

主要依据tab组件以及tab 组件的BottomTabBarStyle的构造函数。

首页page/MinePage.ets代码如下

import {HomeTabs} from  "./components/TabHome"
import {UserBaseInfo} from  "./components/UserBaseInfo"


@Entry
@Component
struct MinePage {
  @State currentIndex: number = 0

  // 构造类 自定义底部切换按钮
  @Builder TabBuilder(index: number,icon:Resource,selectedIcon:Resource,name:string) {
    Column() {
      Image(this.currentIndex === index ? selectedIcon : icon)
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`${name}`)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#000000')
        .fontSize('14vp')
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%')
    .backgroundColor('#ffffff')
  }
  build() {

    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          HomeTabs(); //首页
        }.tabBar(this.TabBuilder(0,$r('app.media.ic_home'),$r('app.media.ic_home_selected'),'首页'))

        TabContent() {
          UserBaseInfo()//个人中心
        }.tabBar(this.TabBuilder(1,$r('app.media.ic_mine'),$r('app.media.ic_mine_selected'),'我的'))
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .width('100%')
    }
    .width('100%')
    .height('100%')

    .backgroundColor('#f7f7f7')
  }
}

2.封装公共弹窗组件

在ets/common/utils 目录下新建 CommonUtils.ets 文件

import CommonConstants from '../constants/CommonConstants';

/**
 * This is a pop-up window tool class, which is used to encapsulate dialog code.
 * Developers can directly invoke the methods in.
 */
export class CommonUtils {
  /**
   * 确认取消弹窗
   */
  alertDialog(content:{message:string},Callback: Function) {
    AlertDialog.show({
      message: content.message,
      alignment: DialogAlignment.Bottom,
      offset: {
        dx: 0,
        dy: CommonConstants.DY_OFFSET
      },
      primaryButton: {
        value: '取消',
        action: () => {
          Callback({
            type:1
          })
        }
      },
      secondaryButton: {
        value: '确认',
        action: () => {
          Callback({
            type:2
          })
        }
      }
    });
  }


  /**
   * 日期选择
   */
  datePickerDialog(dateCallback: Function) {
    DatePickerDialog.show({
      start: new Date(),
      end: new Date(CommonConstants.END_TIME),
      s