1.组件-生命周期
自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。
带@Entry修饰符的组件：
页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：
（1）onPageShow：页面每次显示时触发。
（2）onPageHide：页面每次隐藏时触发一次。
（3）onBackPress：当用户点击返回按钮时触发。
自定义组件生命周期：
组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：
（1）aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
（2）aboutToDisappear：在自定义组件即将析构销毁时执行。
因为@Entry 也是@Component组件，所以页面组件同时拥有自定义组件的生命周期。
在Index.ets文件中测试一下，代码如下：
@Entry
@Component
structIndex{
@Statemessage:string='Hello World';
aboutToAppear(){
console.log("页面初始化")
}
onPageShow(){
console.log("页面显示")
}
onPageHide(){
console.log("页面隐藏")
}
aboutToDisAppear(){
// 清理定时器
console.log("页面销毁")
}
onBackPress(){
console.log("后退键")
}
build(){
RelativeContainer(){
Text(this.message)
.id('HelloWorld')
.fontSize($r('app.float.page_text_font_size'))
.fontWeight(FontWeight.Bold)
.alignRules({
center:{anchor:'__container__',align:VerticalAlign.Center},
middle:{anchor:'__container__',align:HorizontalAlign.Center}
})
.onClick(()=>{
this.message='Welcome';
})
}
.height('100%')
.width('100%')
}
}
实现效果，如图所示。
带@Entry的页面组件：拥有页面进入，页面销毁，页面显示，页面隐藏，页面返回的生命周期。
@Component自定义组件：拥有组件进入、组件销毁生命周期。
2.UIAbility-生命周期
UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态，如图所示。
（1）onCreate：Ability创建时回调，执行初始化业务逻辑操作。
（2）onDestory：Ability生命周期回调，在销毁时回调，执行资源清理等操作。
（3）onWindowStageCreate：当WindowStage创建后调用。
（3）onWindowStageDestory：当WindowStage销毁后调用。
（4）onForeground：Ability生命周期回调，当应用从后台转到前台时触发。
（5）onBackground：Ability生命周期回调，当应用从前台转到后台时触发
UIAbility相当于我们应用中的一个任务，我们可以把自己的app想象成一个UIAbility，但是当项目越来越大，需要扩展和分担业务的时候，可以采取多个。
3.Ability跳转
Stage模型：
- 模块
- UIAbility- 项目中默认有一个- 任务窗口-绘制页面
- Page
- Component
UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口；一个UIAbility组件中可以通过多个页面来实现一个功能模块；每一个UIAbility组件实例，都对应于一个最近任务列表中的任务。
当我们项目中拆解多个任务的时候，可以通过新建多个Ability的方式来进行任务的拆解。
比如，我们支付的之后想新开一个任务去专门处理这件事，就可以采用拉起一个新的Ability来实现。
新建一个支付Ablility – PayAbility，如图所示。
新建PayAbility对应的跳转的支付页面 PayIndex.ets。
@Entry
@Component
structPayIndex{
build(){
Row(){
Column({space:15}){
Text("支付Ability")
.fontSize(40)
.fontColor(Color.Red)
Button("支付")
.width('100%')
}
}
.height('100%')
.padding(20)
}
}
实现效果，如图所示。
新建一个主页Page- MainPage用来跳转到支付Ability。
@Entry
@Component
structMainPage{
build(){
Row(){
Column({space:15}){
Text("主Ability")
.fontSize(50)
Button("去支付")
.width('100%')
}
}
.height('100%')
.padding(20)
}
}
实现效果，如图所示。
ability的拉起必须通过模拟器-所以把我们主Ability的启动页设置为我们刚刚新建的主页。
修改EntryAbility.ets文件。
修改PayAbility.ets文件。
接下来，我们点击去支付按钮的时候 要拉起支付PayAbility。
我们采用当前Ability的上下文来实现，参考官方文档。
使用Context上下文拉起Ability。
这里我们需要准备一个参数Want。
let want: Want = {
'deviceId': '', // deviceId为空表示本设备
'bundleName': '包名',
'abilityName': 'abilityName'
};
拉起Ability，修改MainPage.ets文件，代码如下：
import{common,Want}from'@kit.AbilityKit'
@Entry
@Component
structMainPage{
build(){
Row(){
Column({space:15}){
Text("主Ability")
.fontSize(50)
Button("去支付")
.width('100%')
.onClick(async()=>{
try{
letwant:Want={
'deviceId':'',// deviceId为空表示本设备
'bundleName':'com.xunfang.myapplication',
'abilityName':'PayAbility'
};
await(getContext(this)ascommon.UIAbilityContext).startAbility(want)
}catch(error){
}
})
}
}
.height('100%')
.padding(20)
}
}
实现效果，如图所示。
->
此时是2个Ability页面。
这里点击“去支付”（MainPage.ets），拉起另一个Ability页面（PayIndex.ets）。
欢迎加入课程班级，考取鸿蒙认证：
https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type=1?ha_source=hmosclass&ha_sourceId=89000248
