【鸿蒙实战开发】手把手教你开发一个灵感速记APP

1. 环境搭建

我们首先需要完成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. 开发者可以参考以下链接，完成设备调试的相关配置：
   • 使用真机进行调试

2 .代码结构解读

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

.
|-- 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桌面卡片

3. 构建应用主界面

灵感速记应用程序遵循多端、极简页面、功能一触即达的设计理念。以手机端为例，如下图所示，首页布局了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%')
    }
  }

4. 笔记数据管理

数据定义

应用开发与数据结构息息相关，在进行其他功能开发前，规划如下灵感速记的数据，主要包含笔记文本内容、记录时间、类别、完成情况等。

export default class InspirationData {
  id: number = -1;
  inspirationName: string = '';
  updateTime: string = '';
  progressValue: number = 0;
  inspirationType:number = InspirationType.CREATE_IDEA;
  inspirationColor:string = CommonConstants.CREATE_COLOR;
  inspirationDone: boolean = false;
  inspirationAlarm: boolean  = false; 
  inspirationPic: string = '';
  inspirationPicIndex: number = 0;
  inspirationIcon: string ='app.media.create_idea_filled';
  constructor() {