HarmonyOs应用《日记本》开发第1篇 - 构建完整项目

背景

本人很喜欢写日记，所以很久之前就想做一个日记本相关的应用，这次正好有这个机会就以日记本为项目目标，开发一个日记本应用.

日记本开发如下：

项目概述

在本系列博客中，我们将以一个完整的鸿蒙（HarmonyOS）日记应用为案例，深入剖析 HarmonyOS ArkTS 开发的方方面面。这个日记应用虽然功能精简，却涵盖了一个完整应用所需的全部核心要素——从 UI 声明式开发到数据持久化，从页面路由到生命周期管理，从状态管理到组件设计。

应用功能一览

技术选型

• 开发语言: ArkTS（HarmonyOS 声明式 UI 开发框架）
• 应用模型: Stage 模型（HarmonyOS 推荐的新一代应用模型）
• 目标平台: HarmonyOS 5.0+（API 12）
• 数据存储: @kit.ArkData 的 Preferences 模块
• 设计模式: 单例模式（DiaryStore 数据管理层）

项目结构总览

Daily/ ├── AppScope/ │ └── app.json5 # 应用级配置 ├── entry/ │ ├── build-profile.json5 # 模块构建配置 │ ├── oh-package.json5 # 模块包配置 │ └── src/main/ │ ├── module.json5 # 模块配置（声明入口Ability） │ ├── ets/ │ │ ├── entryability/ │ │ │ └── EntryAbility.ets # 入口能力（UIAbility） │ │ ├── model/ │ │ │ └── DiaryModel.ets # 数据模型定义 │ │ ├── utils/ │ │ │ └── DiaryStore.ets # 数据存储管理 │ │ └── pages/ │ │ ├── Index.ets # 主页（日记列表） │ │ ├── DiaryEdit.ets # 日记编辑页 │ │ └── DiaryDetail.ets # 日记详情页 │ └── resources/base/ │ ├── element/ │ │ ├── color.json # 颜色资源 │ │ └── string.json # 字符串资源 │ └── profile/ │ └── main_pages.json # 页面路由配置 ├── build-profile.json5 # 项目构建配置 ├── oh-package.json5 # 项目包配置 └── hvigor/hvigor-config.json5 # Hvigor 构建工具配置

架构分层设计

本项目采用了清晰的分层架构：

┌─────────────────────────────────────────┐ │ UI 层 (Pages) │ │ Index.ets │ DiaryEdit.ets │ Detail │ ├─────────────────────────────────────────┤ │ 数据模型层 (Model) │ │ DiaryModel.ets │ ├─────────────────────────────────────────┤ │ 数据存储层 (Store) │ │ DiaryStore.ets │ ├─────────────────────────────────────────┤ │ HarmonyOS 平台层 (Platform) │ │ @kit.ArkData │ @kit.ArkUI │ ... │ └─────────────────────────────────────────┘

各层职责：

• UI 层：负责界面展示和用户交互，通过@State管理组件状态
• 模型层：定义数据结构（DiaryItem）、枚举常量（MoodList、WeatherList）和辅助函数
• 存储层：封装 Preferences API，提供增删改查接口，采用单例模式
• 平台层：HarmonyOS 提供的系统能力 Kit

核心代码速览

入口能力 EntryAbility

exportdefaultclassEntryAbilityextendsUIAbility{asynconCreate(want:Want,launchParam:AbilityConstant.LaunchParam):Promise<void>{// 初始化数据存储awaitdiaryStore.init(this.context);}onWindowStageCreate(windowStage:window.WindowStage):void{windowStage.loadContent('pages/Index',(err)=>{if(err.code){console.error('Failed to load content. cause: '+JSON.stringify(err));return;}console.info('Succeeded in loading content.');});}}

应用启动时，onCreate中异步初始化数据存储，onWindowStageCreate中加载主页pages/Index。

数据模型 DiaryModel

exportclassDiaryItem{id:string;title:string;content:string;date:string;// 日期 YYYY-MM-DDcreateTime:number;// 创建时间戳updateTime:number;// 更新时间戳mood:string;// 心情: happy / calm / sad / excited / angryweather:string;// 天气: sunny / cloudy / rainy / snowy / overcast}

数据存储 DiaryStore

exportclassDiaryStore{privatestore:preferences.Preferences|null=null;privatestaticinstance:DiaryStore;staticgetInstance():DiaryStore{if(!DiaryStore.instance){DiaryStore.instance=newDiaryStore();}returnDiaryStore.instance;}asyncinit(context:Context):Promise<void>{this.store=awaitpreferences.getPreferences(context,{name:'diary_store'});}}

页面路由设计

pages/Index (主页) ├──→ pages/DiaryEdit (写日记/编辑日记) └──→ pages/DiaryDetail (日记详情) └──→ pages/DiaryEdit (编辑日记)

页面路由在main_pages.json中声明：

{"src":["pages/Index","pages/DiaryEdit","pages/DiaryDetail"]}

设计理念

珊瑚红主题色

整个应用以#FF6B6B（珊瑚红）作为主色调，搭配#F5F5F5的浅灰背景和#FFFFFF的白色卡片，营造出温暖、清新的视觉风格：

卡片式设计

日记列表采用卡片式布局，每张卡片包含：

• 顶部：日期 + 天气 emoji + 心情 emoji
• 中部：标题（单行截断）+ 内容预览（两行截断）
• 底部：更新时间

卡片带有圆角（16vp）和柔和阴影，视觉效果精致。

环境准备

开始本系列之前，确保已安装以下工具：

1. DevEco Studio：HarmonyOS 官方 IDE
2. HarmonyOS SDK：API 12+（HarmonyOS 5.0）
3. Node.js：构建工具 Hvigor 依赖

小结

本篇作为系列开篇，对整个日记项目进行了全景式概览。从项目结构、架构分层、核心技术选型到设计理念，为后续深入各个模块打下了基础。接下来的篇章将逐一深入每个主题，从配置文件到源码实现，全面解析鸿蒙 ArkTS 开发的每个细节。