鸿蒙开发【记事APP】实战案例

1 简介

生活中的零碎信息太容易忘记，｢记事APP｣作为记录琐碎的小帮手，时刻记录用户关心的内容，分类整理，高效编辑，快捷分享。Less is More，借助HarmonyOS NEXT丰富的原生能力，一步操作完成各种所想，抓住每一刻灵感。

• 目标用户：学生、记者、产品经理、艺术创作者

本篇将介绍如何使用HarmonyOS NEXT原生能力开发灵感速记APP。效果为：

• 化繁为简，便捷高效

  • 聊天式一键添加备忘、关联日程、强提醒消息、私密消息等轻量笔记。
  • 可分类、搜索、分享、删除等管理记录的每条内容。
    

• 统一生态，有趣好用:

  • 可共享消息到生态互联设备（灵动看板）。

  • 支持多端布局。

    

2 环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

• DevEco Studio版本：DevEco Studio NEXT Developer Preview2及以上。
• HarmonyOS SDK版本：HarmonyOS NEXT Developer Preview2 SDK及以上。

硬件要求

• 设备类型：华为手机。
• HarmonyOS系统：HarmonyOS NEXT Developer Preview2及以上。

环境搭建

1. 安装DevEco Studio，详情请参考[下载]和[安装软件]。

2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考[配置开发环境]。

3. 开发者可以参考以下链接，完成设备调试的相关配置：

   • [使用真机进行调试]

3 代码结构解读

本篇文档只对核心代码进行讲解，对于完整代码，开源后提供下载链接。

.
|-- common
|   |-- BreakPointSystem.ets //断点-多端布局
|   |-- CommonConstant.ets   //常量
|   |-- DateUtil.ets         //时间日期工具
|   |-- InspiDataModule.ets  //灵感数据模型
|   |-- Logger.ets           //日志工具
|   |-- calendar.ets         //日历日程工具
|   |-- database             //RDB数据库，实现持久化存储
|   |   |-- InspirationTable.ets
|   |   |-- RDB.ets
|   |   `-- inspirationData.ets
|   |-- messageManager       //后台提醒、日程消息
|   |   |-- BackgroundReminder.ets
|   |   `-- CalenderMeaasge.ets
|   |-- microphone           //语音输入
|   |   `-- Recorder.ets
|   `-- shareTool.ets        //分享工具
|-- entryability
|   `-- EntryAbility.ts   
|-- entryformability
|   `-- EntryFormAbility.ets
|-- pages
|   |-- Index.ets            //入口页面
|   `-- SettingPage.ets      //设置页面
|-- subview                    
|   |-- AddPanel.ets            //添加笔记组件
|   |-- InspiComponent.ets      //笔记列表组件
|   |-- InspirationItemView.ets //单条笔记组件
|   |-- InspirationTotalView.ets//笔记分类视图
`-- widget22
    `-- pages
        `-- Widget22Card.ets    //2*2桌面卡片

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.

4 构建应用主界面

灵感速记应用程序遵循多端、极简页面、功能一触即达的设计理念。以手机端为例，如下图所示，首页布局了95%的功能，自下而上依次是添加和共享笔记、笔记查看、管理笔记的三大功能区。

在主页面中使用[断点])来分配布局，例如在手机端首页只展示消息列表视图，在折叠屏或平板上屏幕右侧新增了分类视图。整体的布局框架如下：

 build() {
    Stack() {
      Row() {
        Column() {
          // menu
	  Row（）{  ... }
          // inspiration内容
          // 配合List组件，循环渲染，可滚动内容
            List({ space: 6, scroller: this.listScroller }) {
              ForEach(this.Inspirations : this.searchInspirations,
                (item: InspirationData, index: number) => {
                  ListItem() {
                    InspirationItemView({
                      InspiItem: item,
                     ...
                 }) 
            }
      
          if (!this.isSearchPageShow && !this.isInsert && !this.isEditMode) {
            // 添加新内容+按钮
            Image($r('app.media.add_filled'))
            // 共享到灵动看板桌面 弹窗
            Image($r('app.media.panel_icon'))
              .onClick(() => {
                this.isShowDeskPanel = true
              })
        }
        .width(this.MycurrentBreakpoint != 'sm' ? '50%' : '100%') 
	  // 断点来实现多端布局
        if (this.MycurrentBreakpoint != 'sm') {
          Column() {
            // 内容按颜色整理的详情页
            InspirationTotalView({
              Inspirations: this.Inspirations
            })
          }
          .width('50%')
          .height('100%')
        }
      }.width('100%').height('100%')
    }
  }

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34