01. HarmonyOS 应用开发实践与技术解析

2025-03-03
北京
本文字数：3350 字
阅读完需：约 11 分钟

前言
项目概述
HarmonyOS 应用架构项目结构 Ability 生命周期
ArkTS 语言特性装饰器状态管理
UI 组件与布局基础组件响应式布局样式与主题
页面路由与参数传递页面跳转参数接收
数据绑定与循环渲染数据接口定义循环渲染
条件渲染
组件生命周期
最佳实践与性能优化组件复用响应式设计性能优化

前言

随着华为 HarmonyOS 生态的不断发展，越来越多的开发者开始关注并投入到 HarmonyOS 应用开发中。本文将通过一个实际的项目案例，详细讲解 HarmonyOS 应用开发的核心技术和最佳实践，帮助开发者快速掌握 HarmonyOS 应用开发的要点。

项目概述

本项目是一个基于 HarmonyOS 的学习应用，主要包含了一个仪表盘示例页面，用于展示业务数据概览。项目采用了 ArkTS 语言开发，使用了 HarmonyOS 提供的 UI 框架和组件，实现了响应式布局和页面路由等功能。

HarmonyOS 应用架构

项目结构

HarmonyOS 应用的项目结构遵循一定的规范，主要包括以下几个部分：

entry：应用的入口模块，包含了应用的主要代码和资源 src/main/ets：ArkTS 代码目录 entryability：应用的 Ability 实现，是应用的入口点 pages：应用的页面组件 components：可复用的 UI 组件 common：公共工具和常量 src/main/resources：应用的资源文件，如图片、字符串等 src/main/module.json5：模块配置文件

Ability 生命周期

Ability 是 HarmonyOS 应用的基本组成单元，类似于 Android 的 Activity。在本项目中，EntryAbility 是应用的主入口，它的生命周期包括：

export default class EntryAbility extends UIAbility {    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {        // Ability创建时调用    }
    onDestroy(): void {        // Ability销毁时调用    }
    onWindowStageCreate(windowStage: window.WindowStage): void {        // 窗口创建时调用，在这里加载主页面        windowStage.loadContent('pages/Index', (err) => {            // 页面加载回调        });    }
    onWindowStageDestroy(): void {        // 窗口销毁时调用    }
    onForeground(): void {        // Ability进入前台时调用    }
    onBackground(): void {        // Ability进入后台时调用    }}

复制代码

ArkTS 语言特性

ArkTS 是 HarmonyOS 应用开发的首选语言，它基于 TypeScript，增加了声明式 UI 和状态管理等特性。

装饰器

ArkTS 中的装饰器是一种特殊的声明，可以附加在类、方法、访问器、属性或参数上。本项目中使用了多种装饰器：

@Entry：标记一个组件为页面入口
@Component：定义一个自定义组件
@State：定义组件内部的状态变量，当状态变化时会触发 UI 刷新
@Prop：用于父组件向子组件传递数据

例如，在 NavBar 组件中：

@Componentexport struct Navbar {    @Prop title: string = ''    build() {        // 组件UI构建    }}

复制代码

状态管理

ArkTS 提供了多种状态管理机制，用于处理组件内部状态和组件间通信：

@State：组件内部状态，变化时会触发组件重新渲染
@Prop：父组件向子组件传递的属性，子组件不能修改
@Link：双向绑定，父子组件可以共同修改
AppStorage：应用级的状态存储

在 DashboardExample 组件中，使用 @State 管理数据：

@State screenWidth: number = 0@State dataCards: DashboardCardItem[] = [    {title: '今日销售额', value: '8,846', unit: '元', trend: '+12.5%', color: '#2A9D8F'},    // 其他数据...]

复制代码

UI 组件与布局

基础组件

HarmonyOS 提供了丰富的基础 UI 组件，本项目中使用了：

Text：文本显示组件
Image：图片显示组件
Column：垂直布局容器
Row：水平布局容器
Flex：弹性布局容器
List：列表容器

响应式布局

HarmonyOS 支持响应式布局，可以根据屏幕尺寸自适应调整 UI。在 DashboardExample 中，通过检测屏幕宽度实现响应式布局：

aboutToAppear() {    // 获取屏幕宽度，用于响应式布局    this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)}
// 根据屏幕宽度决定每行显示的卡片数量Flex({ wrap: FlexWrap.Wrap, justifyContent: this.screenWidth > 600 ? FlexAlign.Start : FlexAlign.SpaceAround }) {    // 卡片布局}

复制代码

样式与主题

ArkTS 支持链式调用设置组件样式，使 UI 代码更加简洁：

Text(card.value)    .fontSize(28)    .fontWeight(FontWeight.Bold)    .fontColor(card.color)

复制代码

还可以通过设置 backgroundColor、borderRadius、shadow 等属性实现丰富的视觉效果：

.width(this.screenWidth > 600 ? '22%' : '45%').height(120).padding(16).margin(8).borderRadius(12).backgroundColor(Color.White)// 添加卡片阴影效果.shadow({radius: 4, color: '#1A000000', offsetY: 2})

复制代码

页面路由与参数传递

HarmonyOS 提供了 router 模块用于页面间导航和参数传递。

页面跳转

在 Index 页面中，通过 router.pushUrl 实现页面跳转：

router.pushUrl({    url: item.path,    params: {        desc: item.desc,        value: item.value    }})

复制代码

参数接收

在目标页面中，通过 router.getParams 获取传递的参数：

onPageShow(): void {    // 获取传递过来的参数对象    const params = router.getParams() as Record<string, string>;    //   获取传递的值    if (params) {        this.desc = params.desc as string        this.title = params.value as string    }}

复制代码

数据绑定与循环渲染

数据接口定义

使用 TypeScript 接口定义数据结构，提高代码的可读性和可维护性：

export interface DashboardCardItem {    title: string;    // 卡片标题    value: string;    // 数值内容    unit: string;     // 数值单位    trend: string;    // 趋势变化    color: string;    // 卡片主题颜色}

复制代码

循环渲染

使用 ForEach 语法实现列表循环渲染：

ForEach(this.dataCards, (card: DashboardCardItem) => {    // 数据卡片UI构建})

复制代码

条件渲染

ArkTS 支持在 UI 构建中使用条件表达式，实现动态 UI：

// 根据趋势是否为正值显示不同颜色Text(card.trend)    .fontSize(14)    .fontColor(card.trend.includes('+') ? '#2A9D8F' : '#E76F51')

复制代码

组件生命周期

ArkTS 组件有多个生命周期回调函数：

aboutToAppear：组件即将出现时调用，用于初始化
aboutToDisappear：组件即将消失时调用，用于清理资源
onPageShow：页面显示时调用
onPageHide：页面隐藏时调用
onBackPress：处理返回按键事件

aboutToAppear() {    // 初始化工作    this.screenWidth = px2vp(AppStorage.Get<number>('windowWidth') || 720)}
onPageShow(): void {    // 页面显示时的处理    const params = router.getParams() as Record<string, string>;    // ...}

复制代码

最佳实践与性能优化

组件复用

将通用 UI 封装为可复用组件，如本项目中的 NavBar 组件：

@Componentexport struct Navbar {    @Prop title: string = ''    build() {        Row(){            Image($r('app.media.tornLeft')).width(30)                .onClick(()=>{                    router.back()                })            Text(this.title).fontSize(20).fontWeight(800)        }        .justifyContent(FlexAlign.SpaceBetween)        .width('100%')        .height('50')    }}

复制代码

响应式设计

根据不同屏幕尺寸调整布局，提升用户体验：

.width(this.screenWidth > 600 ? '22%' : '45%')

复制代码

性能优化

懒加载：只在需要时加载组件和资源
状态管理：合理使用状态管理机制，避免不必要的重渲染
资源复用：复用组件和资源，减少内存占用

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/c0034cb2300d890d630d5ee05】。文章转载请联系作者。

全栈若城

关注

解读Python与前端技术，助你成为技术大牛 2023-06-28 加入

我是一名专注于 Python 和前端技术的技术讲解者。我擅长将复杂的技术概念转化为简单易懂的语言，帮助初学者快速入门，并满足高级开发者对更深入理解的需求。

发布

暂无评论

创作场景

01. HarmonyOS 应用开发实践与技术解析

前言

项目概述

HarmonyOS 应用架构

项目结构

Ability 生命周期

ArkTS 语言特性

装饰器

状态管理

UI 组件与布局

基础组件

响应式布局

样式与主题

页面路由与参数传递

页面跳转

参数接收

数据绑定与循环渲染

数据接口定义

循环渲染

条件渲染

组件生命周期

最佳实践与性能优化

组件复用

响应式设计

性能优化

全栈若城

评论