前言萌宠日记是一款基于HarmonyOS ArkTS框架开发的宠物生活记录应用旨在帮助宠物主人记录爱宠的日常、健康、成长等多维度信息。本文将从架构设计、技术选型、项目结构、页面路由、状态管理、主题系统等核心维度全面解析这款应用的设计思路与实现方案。本系列文章共 100 篇将以萌宠日记应用为实战蓝本手把手带你深入 HarmonyOS 应用开发的每一个技术细节。本文为开篇总览后续将逐一拆解每个页面的实现。一、项目背景与需求概览1.1 应用定位萌宠日记定位为一站式宠物生活管理工具覆盖以下核心场景功能模块核心能力目标用户日记记录图文日记、心情标记、地点天气宠物主人健康管理体重追踪、疫苗驱虫提醒、体检记录宠物主人成长档案时间轴、里程碑事件、照片对比养宠家庭社区互动动态发布、热门话题、宠物活动宠物爱好者数据统计记录数量、心情分布、活动分析数据分析型用户主要特点一站式管理整合日记、健康、相册、提醒四大核心功能可视化数据体重变化曲线、心情分布图、活动统计社交属性社区发现、宠物话题、动态互动个性化体验宠物档案、自定义主题、多维度标签核心优势基于HarmonyOS 原生框架性能流畅ArkUI 声明式 UI代码可读性强模块化架构易于扩展维护丰富的数据可视化用户体验佳1.2 技术栈选型技术维度选型方案选择理由开发语言ArkTSHarmonyOS 原生声明式语言类型安全UI 框架ArkUI声明式 UI、组件丰富、跨设备适配应用模型Stage 模型新标准模型生命周期管理更清晰数据持久化Preferences RDB轻量键值存储 关系型数据库导航方案Tabs Navigation多 Tab 底部导航 子页面栈构建工具DevEco Studio Hvigor官方 IDE工程化完善二、项目结构深度解析2.1 目录结构总览打开项目根目录我们可以看到如下组织方式mengchongriji_ohos_app/ ├── AppScope/ # 应用全局配置 │ ├── app.json5 # 应用级配置包名、版本等 │ └── resources/ # 全局资源文件 ├── entry/ # 主模块HAP │ ├── src/main/ │ │ ├── ets/ │ │ │ ├── entryability/ # Ability 入口 │ │ │ ├── entrybackupability/ # 备份扩展 │ │ │ └── pages/ # 所有页面 │ │ ├── resources/ # 模块资源 │ │ └── module.json5 # 模块配置 │ ├── build-profile.json5 # 构建配置 │ └── oh-package.json5 # 依赖声明 ├── oh_modules/ # 依赖包 ├── hvigor/ # 构建配置 └── build-profile.json5 # 项目级构建配置提示Stage 模型下每个模块独立配置module.json5应用级配置统一在AppScope/app.json5中管理这种分层设计更利于大型应用的模块化开发。2.2 页面清单与路由映射项目的12 个页面通过main_pages.json注册构成完整的页面路由表{ src: [ pages/Index, pages/SplashPage, pages/HomePage, pages/WriteDiaryPage, pages/PetProfilePage, pages/GrowthTimelinePage, pages/HealthRecordPage, pages/AlbumPage, pages/StatisticsPage, pages/ReminderPage, pages/CommunityPage, pages/ProfilePage ] }页面分类与功能定位页面功能导航方式数据状态SplashPage启动闪屏router.pushUrl无状态Index主容器5 Tab底部 Tab 切换多栈导航HomePage首页看板Tab 内嵌 Navigation宠物数据WriteDiaryPage写日记日记 Tab表单状态PetProfilePage宠物档案首页导航档案数据GrowthTimelinePage成长时间轴首页导航时间线数据HealthRecordPage健康记录记录 Tab健康数据AlbumPage相册记录导航相册数据ReminderPage提醒事项记录导航提醒数据StatisticsPage数据统计统计 Tab统计聚合CommunityPage社区发现首页导航社区数据ProfilePage个人中心我的 Tab用户数据三、导航架构设计3.1 双层导航模型萌宠日记采用了Tabs Navigation双层导航架构这是 HarmonyOS 应用中非常经典的多页面导航模式// Index.ets — 核心导航容器 Entry Component struct Index { State currentIndex: number 0 private homeStack: NavPathStack new NavPathStack() private diaryStack: NavPathStack new NavPathStack() private recordStack: NavPathStack new NavPathStack() private statsStack: NavPathStack new NavPathStack() private profileStack: NavPathStack new NavPathStack() aboutToAppear(): void { this.homeStack.pushPath({ name: home }) this.diaryStack.pushPath({ name: diary }) this.recordStack.pushPath({ name: record }) } build() { Tabs({ barPosition: BarPosition.End }) { TabContent() { Navigation(this.homeStack) { HomePage({...}) } .hideTitleBar(true) .navDestination(this.HomeNavDestinations) } .tabBar(this.TabBarBuilder(, 首页, 0)) // ... 其他 4 个 Tab } .barMode(BarMode.Fixed) .backgroundColor(#FFF8F0) } }架构设计的关键要点每个 Tab 独立 Navigation 栈5 个NavPathStack实例分别管理各 Tab 的页面栈预初始化根页面aboutToAppear中 push 根页面确保首次显示即有内容TabBar 自定义渲染通过Builder TabBarBuilder实现图标 标签的自定义样式NavDestination 子页面通过navDestination属性注册子页面构建器3.2 子页面路由注册每个 Tab 通过navDestination属性注册子页面实现页面栈的压入与弹出Builder HomeNavDestinations() { NavDestination() { PetProfilePage() }.title(宠物档案) NavDestination() { GrowthTimelinePage() }.title(成长时间轴) NavDestination() { CommunityPage() }.title(发现) }提示NavDestination会自动处理页面栈的导航栏、返回键、转场动画开发者只需关注页面内容本身无需手动管理页面生命周期。3.3 页面间通信机制萌宠日记使用回调函数模式实现父页面与子页面的数据传递// 父组件定义回调接口 HomePage({ onNavigateToPetProfile: () { this.homeStack.pushPath({ name: petProfile }) }, onNavigateToTimeline: () { this.homeStack.pushPath({ name: timeline }) }, onNavigateToCommunity: () { this.homeStack.pushPath({ name: community }) } }) // 子组件触发回调 // HomePage.ets onClick(() { if (this.onNavigateToPetProfile) { this.onNavigateToPetProfile() } })页面间通信的三种模式通信模式适用场景实现方式回调函数父 → 子传递事件通过属性传入 lambdaState 状态提升兄弟组件共享状态提升到共同父组件全局状态管理跨页面数据共享AppStorage / LocalStorage路由参数页面间数据传递NavPathStack pushPath 参数四、项目配置体系4.1 应用级配置AppScope/app.json5定义了应用的全局元信息{ app: { bundleName: com.mengchongriji.app, vendor: example, versionCode: 1000000, versionName: 1.0.0, icon: $media:layered_image, label: $string:app_name } }配置项说明bundleName应用唯一标识遵循反向域名规则versionCode版本号整数用于市场版本比较versionName版本显示名用于用户可见版本标识icon引用资源文件中的分层图标4.2 模块级配置entry/src/main/module.json5配置模块的 Ability、页面、扩展能力{ module: { name: entry, type: entry, mainElement: EntryAbility, deviceTypes: [phone], pages: $profile:main_pages, abilities: [ { name: EntryAbility, srcEntry: ./ets/entryability/EntryAbility.ets, exported: true, skills: [ { entities: [entity.system.home], actions: [ohos.want.action.home] } ] } ], extensionAbilities: [ { name: EntryBackupAbility, srcEntry: ./ets/entrybackupability/EntryBackupAbility.ets, type: backup, exported: false } ] } }五、主题与资源体系5.1 色彩系统设计萌宠日记采用了温暖、治愈的橙色系主题通过color.json统一管理{ color: [ { name: bg_primary, value: #FFF8F0 }, { name: bg_card, value: #FFFFFF }, { name: primary, value: #F5A623 }, { name: primary_light, value: #FFF3E0 }, { name: accent_green, value: #4CAF50 }, { name: accent_blue, value: #42A5F5 }, { name: text_primary, value: #333333 }, { name: text_secondary, value: #666666 }, { name: text_hint, value: #999999 }, { name: divider, value: #F0EBE3 } ] }色彩使用规范色彩变量用途色值bg_primary页面背景色#FFF8F0暖白primary主色调按钮、选中态#F5A623橙色primary_light浅色背景卡片、标签#FFF3E0浅橙text_primary主文字色#333333深灰text_hint辅助文字色#999999浅灰divider分割线#F0EBE3米色5.2 字符串资源化{ string: [ { name: app_name, value: 萌宠日记 }, { name: tab_home, value: 首页 }, { name: tab_diary, value: 日记 }, { name: tab_record, value: 记录 }, { name: tab_stats, value: 统计 }, { name: tab_profile, value: 我的 } ] }六、Ability 生命周期与入口6.1 EntryAbility 实现export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { this.context.getApplicationContext() .setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET) hilog.info(DOMAIN, testTag, Ability onCreate) } onWindowStageCreate(windowStage: window.WindowStage): void { windowStage.loadContent(pages/SplashPage, (err) { if (err.code) { hilog.error(DOMAIN, testTag, Failed to load content: %{public}s, JSON.stringify(err)) } }) } }Ability 生命周期关键节点onCreateAbility 创建时调用适合初始化全局数据onWindowStageCreate窗口创建时调用加载主页面onForeground应用进入前台适合恢复资源onBackground应用进入后台适合保存状态onDestroyAbility 销毁释放资源七、构建与依赖管理7.1 项目依赖配置{ modelVersion: 6.0.2, dependencies: {}, devDependencies: { ohos/hypium: 1.0.25, ohos/hamock: 1.0.0 } }7.2 构建配置文件// build-profile.json5 { app: { signingConfigs: [], compileSdkVersion: 12, products: [ { name: default, signingConfig: default } ] } }八、Mock 与测试体系项目内置了ohosTest和test目录以及mock目录支持单元测试和 UI 测试entry/src/ ├── main/ # 主代码 ├── mock/ # Mock 数据 ├── ohosTest/ # HarmonyOS 测试 └── test/ # 单元测试九、代码质量与规范项目配置了code-linter.json5和obfuscation-rules.txt确保代码质量和安全// code-linter.json5 { linter: { rules: { arkts: { no-unused-variable: error, no-any-usage: warn } } } }十、从设计到实现的关键决策10.1 为什么选择 Stage 模型FA 模型与 Stage 模型的核心区别对比维度FA 模型Stage 模型组件定义以 PageAbility 定义以 UIAbility 定义生命周期较简单更精细窗口/前后台共享方式通过全局变量通过 Context扩展能力有限ExtensionAbility 丰富推荐度兼容保留新项目首选萌宠日记选择 Stage 模型的原因更清晰的生命周期管理丰富的ExtensionAbility扩展能力如备份能力更好的Context 隔离避免全局变量污染HarmonyOS 未来演进方向长期维护性更强10.2 为什么选择 Tabs NavigationTabs提供底部导航栏切换 Tab 时保持页面状态Navigation提供独立子页面栈每个 Tab 的导航互不干扰两者结合实现N 个 Tab × M 个子页面的灵活导航架构总结本文从萌宠日记应用的整体架构设计、技术选型、项目结构、导航架构、配置体系、主题系统、生命周期等核心维度进行了全面解析。通过本文你可以掌握Stage 模型下 HarmonyOS 应用的标准项目结构Tabs Navigation双层导航架构的设计模式资源文件的统一管理与引用方式Ability 生命周期的关键节点与最佳实践单体应用的模块化架构组织方法下一篇我们将深入UIAbility 生命周期在萌宠日记中的具体实践分析每个生命周期方法的实际应用场景。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 应用开发官方文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guideArkUI 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-create-custom-componentsStage 模型开发指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/stage-model-development-overviewArkTS 语言介绍https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/introduction-to-arkts应用配置文件详解https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/app-configuration-file资源分类与访问https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-accessDevEco Studio 使用指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/deveco-overview开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net