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

背景本人很喜欢写日记所以很久之前就想做一个日记本相关的应用这次正好有这个机会就以日记本为项目目标开发一个日记本应用.日记本开发如下项目概述在本系列博客中我们将以一个完整的鸿蒙HarmonyOS日记应用为案例深入剖析 HarmonyOS ArkTS 开发的方方面面。这个日记应用虽然功能精简却涵盖了一个完整应用所需的全部核心要素——从 UI 声明式开发到数据持久化从页面路由到生命周期管理从状态管理到组件设计。应用功能一览功能模块说明日记列表卡片式展示所有日记支持加载状态和空状态日记创建支持日期选择、天气/心情标签、标题与内容输入日记编辑复用创建页面支持回填数据与更新日记详情展示完整日记内容支持编辑和删除数据持久化基于 Preferences 轻量级存储单例模式管理技术选型开发语言: ArkTSHarmonyOS 声明式 UI 开发框架应用模型: Stage 模型HarmonyOS 推荐的新一代应用模型目标平台: HarmonyOS 5.0API 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核心代码速览入口能力 EntryAbilityexportdefaultclassEntryAbilityextendsUIAbility{asynconCreate(want:Want,launchParam:AbilityConstant.LaunchParam):Promisevoid{// 初始化数据存储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。数据模型 DiaryModelexportclassDiaryItem{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}数据存储 DiaryStoreexportclassDiaryStore{privatestore:preferences.Preferences|nullnull;privatestaticinstance:DiaryStore;staticgetInstance():DiaryStore{if(!DiaryStore.instance){DiaryStore.instancenewDiaryStore();}returnDiaryStore.instance;}asyncinit(context:Context):Promisevoid{this.storeawaitpreferences.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淡粉选中态背景卡片式设计日记列表采用卡片式布局每张卡片包含顶部日期 天气 emoji 心情 emoji中部标题单行截断 内容预览两行截断底部更新时间卡片带有圆角16vp和柔和阴影视觉效果精致。环境准备开始本系列之前确保已安装以下工具DevEco StudioHarmonyOS 官方 IDEHarmonyOS SDKAPI 12HarmonyOS 5.0Node.js构建工具 Hvigor 依赖小结本篇作为系列开篇对整个日记项目进行了全景式概览。从项目结构、架构分层、核心技术选型到设计理念为后续深入各个模块打下了基础。接下来的篇章将逐一深入每个主题从配置文件到源码实现全面解析鸿蒙 ArkTS 开发的每个细节。