鸿蒙应用开发-组件、页面和UIAbility首先给大家介绍一下在鸿蒙应用开发中基本应用程序的包结构，在API7时FA(F

鸿蒙应用开发-组件、页面和UIAbility

Stage模型

首先给大家介绍一下在鸿蒙应用开发中基本应用程序的包结构，在API7时FA(Feature Ability)模型开始，到了API9新增了目前主推并且会长期演进的Stage模型。Stage模型应用程序包结构如下图所示：

一个应用程序（App）可以分成多个模块（Module），模块（Module）编译后的产物叫做 HAP （Harmony Ability Package）
模块(Module)分成两种，一种是主模块（Entry），另一种是功能模块（Feature）。同一个应用，同一设备类型只支持一个主模块。功能模块可以是没有，也可以有多个。
一个应用可以有多个 HAP，所有的HAP合在一起成为一个 Bundle，而bundleName就是应用的唯一标识。

4.后期项目上架到应用商店时，需要将Bundle打包成一个.app后缀的文件。

核心构成

下图就是Stage模型工程目录结构：

这边就给大家介绍最常用的几个文件：

AppScope->app.json5:应用的全局配置信息
entry:HarmonyOS工程模块,编译构建生成一个HAP包
- src->main->ets:用于存放ArkTS源码
- src->main->ets->entryability:应用/服务的入口
- src->main->ets->pages:应用/服务包含的页面
- src->main->ets->resources:用于存放应用/服务所用到的资源文件
- src->main->module.json5:模块配置文件

页面和自定义组件的生命周期

自定义组件：@Component装饰的UI单元
页面：就是应用的UI页面。@Entry装饰的自定义组件作为页面的

组件生命周期:

aboutToAppear:函数在创建自定义组件的新实例后，在执行其build函数之前执行。
aboutToDisappear:函数在自定义组件析构销毁之前执行

@Component
struct SonCom {
  aboutToAppear(): void {
    console.log('组件创建')
  }

  aboutToDisappear(): void {
    console.log('组件销毁')
  }

  build() {
    Column() {
      Text('我是子组件')
    }
    .width(200)
    .height(200)
    .border({ width: .5 })
  }
}

@Entry
@Component
struct LiteFunc01 {
  @State show: boolean = false

  build() {
    Column() {
      Text('组件的生命周期')
      Button('切换子组件显示')
        .onClick(() => {
          this.show = !this.show
        })
      if (this.show) {
        SonCom()
      }
    }
  }
}

页面生命周期:

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

！！！因为@Entry 也是@Component组件，所以页面组件同时拥有自定义组件的生命周期

recording


@Entry
@Component
struct LiteFunc01 {
  @State show: boolean = false
  aboutToAppear(): void {
    console.log('组件创建')
  }
  onPageShow() {
    console.log("页面显示")
  }

  onPageHide() {
    console.log("页面隐藏")
  }

  onBackPress() {
    console.log("按了后退键")
    // 阻止点击返回的操作，
    return true
  }

  aboutToDisappear(): void {
    console.log('组件销毁')
  }
  build() {
    Column({space:30}) {
      Text('页面的生命周期')
    }
  }
}

图标配置

/entry/src/main/module.json5

图标名称配置

/entry/src/main/module.json5

UIAbility

指定启动页面

entry/src/main/ets/entryability/EntryAbility.ets

生命周期

onCreate:Ability创建时回调，执行初始化业务逻辑操作。
onDestory:Ability生命周期回调，在销毁时回调，执行资源清理等操作。
onWindowStageCreate:当WindowStage创建后调用。
onWindowStageDestory:当WindowStage销毁后调用。
onForeground:Ability生命周期回调，当应用从后台转到前台时触发。
onBackground:Ability生命周期回调，当应用从前台转到后台时触发。

下面带大家验证一下这个流程，我会在每个事件中都加入日志输出：

recording

测试代码：

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    console.log('onCreate')
  }

  onDestroy(): void {
    console.log('onDestroy')
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    windowStage.loadContent('pages/Index', (err) => {
      console.log('onWindowStageCreate')
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    console.log('onWindowStageDestroy')
  }

  onForeground(): void {
    // Ability has brought to foreground
    console.log('onForeground')
  }

  onBackground(): void {
    // Ability has back to background
    console.log('onBackground')
  }
}