第十五天 学习并实践HarmonyOS应用的基本结构、页面导航和状态管理

HarmonyOS应用开发入门:从基本结构到状态管理实战指南

前言

(约300字,说明HarmonyOS的发展前景,应用开发的市场需求,以及本教程的核心价值。强调手把手教学特点,降低学习门槛)


一、HarmonyOS应用基本结构解析

1.1 项目目录结构详解

bash 复制代码
MyFirstApp/
├── AppScope/           # 全局资源
│   ├── resources/
│   └── app.json5      # 应用配置
├── entry/              # 主模块
│   ├── src/main/
│   │   ├── ets/       # 业务代码
│   │   ├── resources/ # 模块资源
│   │   └── module.json5
└── features/          # 可选功能模块

对比传统Android项目结构,突出AppScope的全局资源管理特性,解释entry模块的入口意义

1.2 Ability的核心作用

typescript 复制代码
// EntryAbility.ts
export default class EntryAbility extends Ability {
    onCreate() {
        // 初始化操作
    }
    
    onWindowStageCreate(windowStage: window.WindowStage) {
        // 加载首页
        windowStage.loadContent("pages/IndexPage", (err) => {
            if (err.code) {
                // 错误处理
            }
        });
    }
}

通过实际代码演示Ability生命周期,重点说明WindowStage与页面加载的关系

1.3 页面文件组织结构

bash 复制代码
pages/
├── IndexPage.ets     # 页面逻辑
├── IndexPage.css     # 样式文件
└── IndexPage.json    # 页面配置

结合MVVM模式讲解三者协同工作原理,演示数据绑定的基础实现


二、页面导航实战演练

(核心功能模块,约1000字)

2.1 路由配置基础

json5 复制代码
// module.json5
"pages": [
    "pages/IndexPage",
    "pages/DetailPage"
]

强调路由注册的重要性,演示动态路由注册的进阶用法

2.2 页面跳转六种方式

typescript 复制代码
// 基础跳转
router.pushUrl({
    url: "pages/DetailPage"
})

// 带参跳转
router.pushUrl({
    url: "pages/DetailPage?itemId=123"
})

// 带回调跳转
router.pushUrl({
    url: "pages/DetailPage"
}).then(() => {
    // 跳转成功处理
})

每种方式配合实际应用场景说明(电商商品详情跳转、表单提交跳转等)

2.3 导航栏开发实战

typescript 复制代码
// 自定义导航栏
@Entry
@Component
struct NavDemo {
    @State currentIndex: number = 0

    build() {
        Column() {
            // 导航按钮
            Row() {
                Button('首页').onClick(() => this.switchTab(0))
                Button('我的').onClick(() => this.switchTab(1))
            }

            // 内容区域
            Swiper() {
                HomePage()
                MinePage()
            }
        }
    }

    private switchTab(index: number) {
        this.currentIndex = index
    }
}

完整实现带滑动效果的Tab导航,包含状态联动与动画优化


三、状态管理深度解析

3.1 状态管理全景图

graph TD A[状态类型] --> B[页面级状态] A --> C[应用级状态] B --> D[@State] C --> E[AppStorage] C --> F[LocalStorage]

通过图示清晰划分状态管理层次,说明各方案的适用场景

3.2 页面级状态实战

typescript 复制代码
@Entry
@Component
struct CounterPage {
    @State count: number = 0

    build() {
        Column() {
            Text(`点击次数: ${this.count}`)
                .fontSize(20)
            
            Button("增加")
                .onClick(() => {
                    this.count++
                })
        }
    }
}

扩展实现双向绑定、状态监听等进阶功能

3.3 全局状态管理方案

typescript 复制代码
// 定义全局状态
AppStorage.SetOrCreate<number>('globalCount', 0)

// 在组件中使用
@Component
struct GlobalCounter {
    @StorageLink('globalCount') count: number

    build() {
        Button(`全局计数: ${this.count}`)
            .onClick(() => this.count++)
    }
}

对比LocalStorage与AppStorage的差异,演示跨页面状态同步

3.4 状态持久化实践

typescript 复制代码
// 使用Preferences存储
import preferences from '@ohos.data.preferences'

async function saveData(key: string, value: preferences.ValueType) {
    const pref = await preferences.getPreferences(this.context)
    await pref.put(key, value)
    await pref.flush()
}

结合本地存储实现状态持久化,确保应用重启后数据不丢失


四、综合项目实战:TODO应用

  1. 项目功能规划:添加任务、分类展示、状态切换
  2. 技术点整合:
    • 使用@State管理任务列表
    • 通过路由实现详情页跳转
    • 应用AppStorage实现主题切换
  3. 关键代码片段展示:
typescript 复制代码
@Entry
@Component
struct TodoApp {
    @StorageLink('theme') currentTheme: string = 'light'
    @State todos: TodoItem[] = []

    build() {
        Column() {
            ThemeSwitcher()
            TodoList()
            AddButton()
        }
    }
}

五、调试与优化技巧

(约300字,提升内容实用价值)

  1. 开发者模式开启指南
  2. 常用调试命令:
bash 复制代码
hdc shell 
bm get -u
  1. 性能优化建议:减少不必要的状态更新、合理使用组件复用
相关推荐
落笔画忧愁e1 小时前
数据通信学习笔记之OSPF其他内容1
笔记·学习
GHL2842710901 小时前
mysql学习-B+树相关问题
b树·学习·mysql
Raink2 小时前
第 9 章 ArkWeb适配与开发
harmonyos
中草药z2 小时前
【RabbitMQ高级特性】消息确认机制、持久化、发送方确认、TTL和死信队列
java·学习·rabbitmq·java-rabbitmq·持久化·高级特性
云上艺旅2 小时前
K8S学习之基础四十六:k8s中部署Kibana
学习·云原生·容器·kubernetes
别说我什么都不会2 小时前
OpenHarmony解读之设备认证:数据接收管理-获取HiChain实例(1)
物联网·嵌入式·harmonyos
weixin_502539852 小时前
rust学习笔记18-迭代器
笔记·学习·rust
GoldenaArcher2 小时前
lodash 学习笔记/使用心得
javascript·笔记·学习
XYN613 小时前
【嵌入式学习2】内存管理
c语言·开发语言·jvm·笔记·嵌入式硬件·学习
大白的编程日记.4 小时前
【Linux学习笔记】gcc编辑器和动静态库的深度剖析
linux·笔记·学习