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

页面预览

前言

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

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

一、项目背景与需求概览

1.1 应用定位

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

功能模块核心能力目标用户

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

主要特点：

一站式管理：整合日记、健康、相册、提醒四大核心功能

可视化数据：体重变化曲线、心情分布图、活动统计

社交属性：社区发现、宠物话题、动态互动

个性化体验：宠物档案、自定义主题、多维度标签

核心优势：

基于 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 注册，构成完整的页面路由表：

{
"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()
}
})

页面间通信的三种模式：

通信模式适用场景实现方式

回调函数	父 → 子传递事件	通过属性传入 lambda
@State 状态提升	兄弟组件共享状态	提升到共同父组件
全局状态管理	跨页面数据共享	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 生命周期关键节点：

onCreate：Ability 创建时调用，适合初始化全局数据

onWindowStageCreate：窗口创建时调用，加载主页面

onForeground：应用进入前台，适合恢复资源

onBackground：应用进入后台，适合保存状态

onDestroy：Ability 销毁，释放资源

七、构建与依赖管理

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 + Navigation？

Tabs 提供底部导航栏，切换 Tab 时保持页面状态
Navigation 提供独立子页面栈，每个 Tab 的导航互不干扰
两者结合实现 N 个 Tab × M 个子页面的灵活导航架构

总结

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

Stage 模型下 HarmonyOS 应用的标准项目结构

Tabs + Navigation 双层导航架构的设计模式

资源文件的统一管理与引用方式

Ability 生命周期的关键节点与最佳实践

单体应用的模块化架构组织方法

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

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

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

前言

一、项目背景与需求概览

1.1 应用定位

1.2 技术栈选型

二、项目结构深度解析

2.1 目录结构总览

2.2 页面清单与路由映射

三、导航架构设计

3.1 双层导航模型

3.2 子页面路由注册

3.3 页面间通信机制

四、项目配置体系

4.1 应用级配置

4.2 模块级配置

五、主题与资源体系

5.1 色彩系统设计

5.2 字符串资源化

六、Ability 生命周期与入口

6.1 EntryAbility 实现

七、构建与依赖管理

7.1 项目依赖配置

7.2 构建配置文件

八、Mock 与测试体系

九、代码质量与规范

十、从设计到实现的关键决策

10.1 为什么选择 Stage 模型？

10.2 为什么选择 Tabs + Navigation？

总结

相关推荐

评论抢沙发

热门标签

热门文章

最新文章

归档

分类

前言

一、项目背景与需求概览

1.1 应用定位

1.2 技术栈选型

二、项目结构深度解析

2.1 目录结构总览

2.2 页面清单与路由映射

三、导航架构设计

3.1 双层导航模型

3.2 子页面路由注册

3.3 页面间通信机制

四、项目配置体系

4.1 应用级配置

4.2 模块级配置

五、主题与资源体系

5.1 色彩系统设计

5.2 字符串资源化

六、Ability 生命周期与入口

6.1 EntryAbility 实现

七、构建与依赖管理

7.1 项目依赖配置

7.2 构建配置文件

八、Mock 与测试体系

九、代码质量与规范

十、从设计到实现的关键决策

10.1 为什么选择 Stage 模型？

10.2 为什么选择 Tabs + Navigation？

总结

相关推荐

评论 抢沙发

热门标签

热门文章

最新文章

归档

分类

评论抢沙发