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

前言

随着华为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中的装饰器是一种特殊的声明，可以附加在类、方法、访问器、属性或参数上。本项目中使用了多种装饰器：

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

例如，在NavBar组件中：

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

状态管理

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

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

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

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

UI组件与布局

基础组件

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

1. Text：文本显示组件
2. Image：图片显示组件
3. Column：垂直布局容器
4. Row：水平布局容器
5. Flex：弹性布局容器
6. 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组件有多个生命周期回调函数：

1. aboutToAppear：组件即将出现时调用，用于初始化
2. aboutToDisappear：组件即将消失时调用，用于清理资源
3. onPageShow：页面显示时调用
4. onPageHide：页面隐藏时调用
5. 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%')

性能优化

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