HarmonyOS应用开发实战：萌宠日记 - 整体架构设计与技术选型解析

xianjixiance_2026-07-22 15:03

前言

萌宠日记 是一款基于 HarmonyOS ArkTS 框架开发的宠物生活记录应用，旨在帮助宠物主人记录爱宠的日常、健康、成长等多维度信息。本文将从 架构设计 、技术选型 、项目结构 、页面路由 、状态管理 、主题系统 等核心维度，全面解析这款应用的设计思路与实现方案。

本系列文章共 100 篇，将以 萌宠日记 应用为实战蓝本，手把手带你深入 HarmonyOS 应用开发的每一个技术细节。本文为开篇总览，后续将逐一拆解每个页面的实现。

一、项目背景与需求概览

1.1 应用定位

萌宠日记 定位为一站式宠物生活管理工具，覆盖以下核心场景：

功能模块 核心能力 目标用户
日记记录 图文日记、心情标记、地点天气 宠物主人
健康管理 体重追踪、疫苗驱虫提醒、体检记录 宠物主人
成长档案 时间轴、里程碑事件、照片对比 养宠家庭
社区互动 动态发布、热门话题、宠物活动 宠物爱好者
数据统计 记录数量、心情分布、活动分析 数据分析型用户

主要特点：

  1. 一站式管理：整合日记、健康、相册、提醒四大核心功能
  2. 可视化数据：体重变化曲线、心情分布图、活动统计
  3. 社交属性：社区发现、宠物话题、动态互动
  4. 个性化体验：宠物档案、自定义主题、多维度标签

核心优势：

  • 基于 HarmonyOS 原生框架，性能流畅
  • ArkUI 声明式 UI，代码可读性强
  • 模块化架构，易于扩展维护
  • 丰富的数据可视化，用户体验佳

1.2 技术栈选型

技术维度 选型方案 选择理由
开发语言 ArkTS HarmonyOS 原生声明式语言，类型安全
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 注册，构成完整的页面路由表：

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 应用中非常经典的多页面导航模式：

typescript 复制代码 
// 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')
  }
}

架构设计的关键要点：

  1. 每个 Tab 独立 Navigation 栈 ：5 个 NavPathStack 实例分别管理各 Tab 的页面栈
  2. 预初始化根页面 ：aboutToAppear 中 push 根页面，确保首次显示即有内容
  3. TabBar 自定义渲染 ：通过 @Builder TabBarBuilder 实现图标 + 标签的自定义样式
  4. NavDestination 子页面 ：通过 navDestination 属性注册子页面构建器

3.2 子页面路由注册

每个 Tab 通过 navDestination 属性注册子页面，实现页面栈的压入与弹出：

typescript 复制代码 
@Builder
HomeNavDestinations() {
  NavDestination() {
    PetProfilePage()
  }.title('宠物档案')

  NavDestination() {
    GrowthTimelinePage()
  }.title('成长时间轴')

  NavDestination() {
    CommunityPage()
  }.title('发现')
}

提示 ：NavDestination 会自动处理页面栈的导航栏、返回键、转场动画，开发者只需关注页面内容本身，无需手动管理页面生命周期。

3.3 页面间通信机制

萌宠日记 使用 回调函数模式 实现父页面与子页面的数据传递：

typescript 复制代码 
// 父组件定义回调接口
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()
  }
})

页面间通信的三种模式：

通信模式 适用场景 实现方式
回调函数 父 → 子传递事件 通过属性传入 lambda
@State 状态提升 兄弟组件共享状态 提升到共同父组件
全局状态管理 跨页面数据共享 AppStorage / LocalStorage
路由参数 页面间数据传递 NavPathStack pushPath 参数

四、项目配置体系

4.1 应用级配置

AppScope/app.json5 定义了应用的全局元信息：

json 复制代码 
{
  "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、页面、扩展能力：

json 复制代码 
{
  "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 统一管理：

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 字符串资源化

json 复制代码 
{
  "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 实现

typescript 复制代码 
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 生命周期关键节点：

  1. onCreate：Ability 创建时调用，适合初始化全局数据
  2. onWindowStageCreate：窗口创建时调用，加载主页面
  3. onForeground：应用进入前台，适合恢复资源
  4. onBackground：应用进入后台，适合保存状态
  5. onDestroy：Ability 销毁，释放资源

七、构建与依赖管理

7.1 项目依赖配置

json 复制代码 
{
  "modelVersion": "6.0.2",
  "dependencies": {},
  "devDependencies": {
    "@ohos/hypium": "1.0.25",
    "@ohos/hamock": "1.0.0"
  }
}

7.2 构建配置文件

json5 复制代码 
// 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，确保代码质量和安全：

json5 复制代码 
// 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 模型的原因：

  1. 更清晰的 生命周期管理
  2. 丰富的 ExtensionAbility 扩展能力（如备份能力）
  3. 更好的 Context 隔离，避免全局变量污染
  4. HarmonyOS 未来演进方向，长期维护性更强
  • Tabs 提供底部导航栏，切换 Tab 时保持页面状态
  • Navigation 提供独立子页面栈，每个 Tab 的导航互不干扰
  • 两者结合实现 N 个 Tab × M 个子页面 的灵活导航架构

总结

本文从 萌宠日记 应用的 整体架构设计 、技术选型 、项目结构 、导航架构 、配置体系 、主题系统 、生命周期 等核心维度进行了全面解析。通过本文，你可以掌握：

  1. Stage 模型 下 HarmonyOS 应用的标准项目结构
  2. Tabs + Navigation 双层导航架构的设计模式
  3. 资源文件 的统一管理与引用方式
  4. Ability 生命周期 的关键节点与最佳实践
  5. 单体应用的 模块化架构 组织方法

下一篇我们将深入 UIAbility 生命周期 在萌宠日记中的具体实践，分析每个生命周期方法的实际应用场景。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

相关推荐
掘金者阿豪3 小时前
数据库优化器到底在想什么：一个SQL今天能跑明天崩的背后
后端
b130538100493 小时前
HarmonyOS应用开发实战：萌宠日记 - 回调函数模式
后端
Conan在掘金3 小时前
鸿蒙报错速查：Cannot find name 'image'，忘 import 编译就炸，根因 + 真解法
后端
雪隐3 小时前
个人电脑玩AI-13让5060 Ti给你打工——我用 0.9B 小模型终结了"谁来记会议纪要"这个世纪难题
前端·人工智能·后端
无名之辈J3 小时前
Ai开发
后端
Conan在掘金3 小时前
�鸿蒙报错速查：arkts-strict-typing 函数返回值类型必须显式，忘标就炸，根因 + 真解法
后端
半个落月3 小时前
用 LangChain JS 做可控写作实验：理解温度参数、提示词与异步调用
javascript·人工智能·后端
爱勇宝3 小时前
《道德经》第 7 章：真正厉害的领导者，不抢主角
前端·后端·程序员
用户208046804563 小时前
Python3 条件控制新手实战指南
后端
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04AI科技热点日报 | 2026年07月01日05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路092026 年 AI 大模型 & AI 编程工具实战全总结10Kimi K3 真实体验：全网评价整理，优缺点一次性说清楚