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

export default class EntryAbility extends UIAbility {
async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
// 初始化数据存储
await diaryStore.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

export class DiaryItem {
id: string;
title: string;
content: string;
date: string; // 日期 YYYY-MM-DD
createTime: number; // 创建时间戳
updateTime: number; // 更新时间戳
mood: string; // 心情: happy / calm / sad / excited / angry
weather: string; // 天气: sunny / cloudy / rainy / snowy / overcast
}

数据存储 DiaryStore

export class DiaryStore {
private store: preferences.Preferences | null = null;
private static instance: DiaryStore;

static getInstance(): DiaryStore {
if (!DiaryStore.instance) {
DiaryStore.instance = new DiaryStore();
}
return DiaryStore.instance;
}

async init(context: Context): Promise<void> {
this.store = await preferences.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）和柔和阴影，视觉效果精致。

环境准备

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

小结

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