@[toc]

HarmonyOS详解

HarmonyOS（鸿蒙OS）是华为公司推出的一款面向多设备、全场景的分布式操作系统。它于2019年8月9日正式发布，并在多个设备类型上进行了广泛的应用，包括智能手机、平板电脑、智能手表、电视、汽车系统等。

以下是一些关键特点和信息：

分布式技术： HarmonyOS的最大亮点之一是其支持分布式技术。这意味着开发者可以使用一套代码同时构建适用于多种设备类型的应用程序，而不需要对不同设备进行特定的适配。用户可以在不同设备之间实现无缝的体验，比如从智能手机切换到平板电脑而无需中断正在进行的任务。

多设备适配： HarmonyOS支持一次开发，多端部署，能够适应多种终端设备，包括但不限于手机、平板、电视、智能手表、汽车等。

微内核架构： HarmonyOS采用了微内核架构，这意味着核心系统服务被分解成更小的、独立的模块，提高了系统的稳定性和可靠性。这种架构的设计使得系统更加灵活，可以更好地适应不同设备的需求。

开放原子服务： HarmonyOS提供了一组开放原子服务，这些服务可以被开发者调用，加速应用程序的开发。这使得开发者可以更加便捷地构建功能丰富、创新性强的应用。

跨平台开发： HarmonyOS支持多种开发语言，包括C、C++、Java、JavaScript等，同时支持开发者使用标准的开发工具，降低了学习和迁移成本。

总体而言，HarmonyOS的目标是构建一个统一、开放、共享的多设备生态系统，为用户提供更加智能、便捷、统一的数字化体验。

ArkTS详解

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

ArkTS在TS的基础上主要扩展了如下能力：

基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

在ArkUI中创建自定义组件的详细指南

在ArkUI中，UI的显示内容由系统组件和自定义组件共同构成。系统组件由框架直接提供，而开发者可以通过定义自己的自定义组件来实现更高度的复用性、业务逻辑与UI分离以及后续版本演进等需求。本文将介绍自定义组件的基本用法、结构、生命周期和样式。

自定义组件的基本用法

自定义组件在ArkUI中具有以下特点：

可组合性： 允许开发者组合使用系统组件，并可以自由搭配属性和方法。
可重用性： 自定义组件可以在其他组件中重用，作为不同实例在不同的父组件或容器中使用。
数据驱动UI更新： 通过状态变量的改变，来触发UI的刷新。

以下是一个简单的自定义组件示例：

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定义组件组合系统组件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

HelloComponent可以在其他自定义组件的build()函数中多次创建，实现了自定义组件的重用。

自定义组件的基本结构

自定义组件基于struct实现，并通过@Component装饰器赋予组件化能力。一个自定义组件的基本结构如下：

@Component
struct MyComponent {
  // 成员变量和函数声明
  ...

  build() {
    // UI描述
    ...
  }
}

其中，@Component装饰器用于标识该struct是一个自定义组件，build()函数用于描述组件的UI。

自定义组件的参数规定

在创建自定义组件时，可以通过构造方法或者装饰器的方式传递参数。以下是一个示例：

@Component
struct MyComponent {
  private countDownFrom: number = 0;
  private color: Color = Color.Blue;

  build() {
    // 创建MyComponent实例，并初始化成员变量
    Row() {
      Text(`Count: ${this.countDownFrom}`)
        .textColor(this.color)
    }
  }
}

@Entry
@Component
struct ParentComponent {
  build() {
    // 创建MyComponent实例，并传递参数
    MyComponent({ countDownFrom: 10, color: Color.Red });
  }
}

自定义组件的生命周期

自定义组件和页面有不同的生命周期。页面生命周期由被@Entry装饰的组件控制，而组件生命周期由@Component装饰的组件控制。

页面生命周期

onPageShow： 页面每次显示时触发。
onPageHide： 页面每次隐藏时触发一次。
onBackPress： 当用户点击返回按钮时触发。

组件生命周期

aboutToAppear： 组件即将出现时回调。
aboutToDisappear： 组件即将销毁时回调。

以下是一个生命周期的示例：

@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;

  onPageShow() {
    console.info('MyComponent onPageShow');
  }

  onPageHide() {
    console.info('MyComponent onPageHide');
  }

  onBackPress() {
    console.info('MyComponent onBackPress');
  }

  aboutToAppear() {
    console.info('MyComponent aboutToAppear');
  }

  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    // UI描述
    ...
  }
}

以上示例展示了自定义组件和页面的生命周期调用时机。通过了解这些生命周期，可以更好地管理组件的初始化、更新和销毁过程。

在ArkUI中，自定义组件的创建、渲染和销毁是基于框架的状态管理和UI更新机制实现的。通过这篇文章，希望你能更好地理解在ArkUI中创建自定义组件的基本用法和生命周期管理。

自定义组件的最小化应用

自定义组件的最小化应用或者从后台切回前台时，也会触发相应的生命周期。在这种情况下，主要是执行onPageHide和onPageShow。

以下是一个最小化应用的示例：

@Entry
@Component
struct MyComponent {
  onPageShow() {
    console.info('MyComponent onPageShow');
  }

  onPageHide() {
    console.info('MyComponent onPageHide');
  }

  build() {
    // UI描述
    ...
  }
}

在最小化应用时，当前页面会触发onPageHide，当应用再次回到前台时，会触发onPageShow。

页面切换与组件销毁

在ArkUI中，页面切换和组件销毁的时机会影响生命周期的执行。如果是页面切换，即切换到了另一个页面，当前页面的组件可能会触发相应的生命周期。

以下是一个页面切换与组件销毁的示例：

@Entry
@Component
struct MyComponent {
  onPageHide() {
    console.info('MyComponent onPageHide');
  }

  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    // UI描述
    ...
  }
}

在这个示例中，当用户点击某个按钮跳转到另一个页面时，当前页面的onPageHide和aboutToDisappear会被触发。如果使用router.replaceUrl方法，当前页面将被销毁，依次执行组件的aboutToDisappear。

注意事项

在自定义组件的生命周期中，有一些注意事项需要注意：

不建议在生命周期aboutToDisappear内使用异步操作（例如，async/await）。如果在生命周期的aboutToDisappear使用异步操作，可能导致组件被保留在Promise的闭包中，直到异步操作完成，阻碍了组件的垃圾回收。

通过了解和合理利用生命周期，可以更好地控制自定义组件的初始化、更新和销毁过程，提高应用的性能和用户体验。

结语

在ArkUI中，自定义组件的创建和管理是构建复杂UI界面的关键部分。通过合理使用自定义组件的生命周期，可以更好地控制组件的初始化、更新和销毁过程，实现更灵活、高效的应用开发。希望本文能够帮助你更深入地理解在ArkUI中创建自定义组件的方法和生命周期管理。

文章来源:华为云社区