当前位置：首页 > news >正文

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

news 2026/7/25 7:19:46

背景

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

日记本开发如下：

项目概述

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

应用功能一览

功能模块	说明
日记列表	卡片式展示所有日记，支持加载状态和空状态
日记创建	支持日期选择、天气/心情标签、标题与内容输入
日记编辑	复用创建页面，支持回填数据与更新
日记详情	展示完整日记内容，支持编辑和删除
数据持久化	基于 Preferences 轻量级存储，单例模式管理

技术选型

开发语言: 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的白色卡片，营造出温暖、清新的视觉风格：

色彩用途	色值	说明
主色调	#FF6B6B	珊瑚红，用于按钮、选中态、强调文字
背景色	#F5F5F5	浅灰，页面背景
卡片背景	#FFFFFF	纯白，卡片和导航栏
主文字	#333333	深灰，标题和重要文字
次要文字	#999999	中灰，辅助说明
提示文字	#CCCCCC	浅灰，占位提示
选中背景	#FFF0F0	淡粉，选中态背景