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

文章目录 前言项目概述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组件中：

@Component export 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组件：

@Component export 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%') 性能优化 懒加载：只在需要时加载组件和资源状态管理：合理使用状态管理机制，避免不必要的重渲染资源复用：复用组件和资源，减少内存占用