七、鸿蒙开发-页面路由、组件生命周期钩子函数

提示：本文根据b站尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程课整理

链接指引 => 尚硅谷2024最新鸿蒙开发HarmonyOS4.0+鸿蒙NEXT星河版零基础教程

一、页面路由

1.1 概述

页面路由用于实现应用程序中不同页面之间的跳转。HarmonyOS提供了router模块，用于实现页面路由功能。通过该模块，开发者可以轻松实现页面跳转、页面返回等功能。

1.2 页面跳转

router模块提供了两种跳转模式，分别是router.pushUrl()和router.replaceUrl()，这两种模式的区别在于是否保留当前页的状态。pushUrl()会将当前页面压入历史页面栈，因此使用该方法跳转到目标页面之后，还可以再返回。而replaceUrl()，会直接销毁当前页面并释放资源，然后用目标页替换当前页，因此使用该方法跳转到目标页面后，不能返回。
上述两方法的基础用法如下：

第一步：注册页面
页面注册后才能进行跳转，具体操作如下，例如现有一个页面的路径为src/main/ets/pages/SourcePage.ets，我们在src/main/resources/base/profile/main_pages.json文件增加如下配置即可

{
  "src": [
    "pages/Index",
    "pages/SourcePage", //新增配置
  ]
}

注意：
在创建页面时，若选择新建Page而不是ArkTs File，则IDE会自动完成页面的注册。

第二步：导入router模块

import router from '@ohos.router'

之后便可使用上述两个方法完页面的跳转

router.pushUrl({ url: 'pages/router/pushAndReplace/TargetPage' })
router.replaceUrl({ url: 'pages/router/pushAndReplace/TargetPage' })

例子：

import router from '@ohos.router'
@Entry
@Component
struct SourcePage {
  build() {
    Column({ space: 50 }) {
      Text('SourcePage')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Blank()
      Row({ space: 50 }) {
        Button('push')
          .onClick(() => {
            //todo:pushUrl
            router.pushUrl({url:'pages/router/pushAndReplace/TargetPage'})
          })
        Button('replace')
          .onClick(() => {
            //todo:replaceUrl
            router.replaceUrl({url:'pages/router/pushAndReplace/TargetPage'})
          })
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({
      top: 200,
      bottom: 200
    })
  }
}

1.3 页面返回

返回页面使用router.back()方法即可，直接调用router.back()将返回上一页面，除此之外该方法也支持返回指定页面，例如

router.back({url:'pages/Index'})

注意：
若指定的页面不在历史页面栈中，也就是用户并未浏览过指定页面，那么将无法回到指定页面。

例子：

import router from '@ohos.router'

@Entry
@Component
struct FromPage {
  build() {
    Column({ space: 50 }) {
      Text('FromPage')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Blank()
      Row({ space: 50 }) {
        Button('push')
          .onClick(() => {
            router.pushUrl({ url: 'pages/router/back/ToPage' })
          })
        Button('replace')
          .onClick(() => {
            router.replaceUrl({ url: 'pages/router/back/ToPage' })
          })
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({
      top: 200,
      bottom: 200
    })
  }
}

1.4 传递数据

在进行页面跳转时，如果需要传递一些数据给目标页面，可以在调用上述方式时，添加一个params属性，并指定一个对象作为参数，例如

router.pushUrl({
  url: 'pages/router/pushAndReplace/TargetPage',
  params: {
    id: 10,
    name: 'zhangsan',
    age: '20'
  }
})

目标页面可通过router.getParams()方法获取参数，例如

let params = router.getParams();

let id = params['id'];
let name = params['name'];
let age = params['age'];

案例：

import router from '@ohos.router'

@Entry
@Component
struct StartPage {
  build() {
    Column({ space: 50 }) {
      Text('SourcePage')
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Blank()
      Row({ space: 50 }) {
        Button('pushUrl')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/router/params/EndPage',
              params: {
                id: 10,
                name: 'zhangsan',
                age: '20'
              }
            })
          })
      }
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({
      top: 200,
      bottom: 200
    })
  }
}

二、组件生命周期钩子函数

在鸿蒙应用中，每个自定义组件从创建到销毁，都会经历一系列的步骤，在这个过程中，系统会在一些特定的阶段运行一些特定函数，这些函数就被称为生命周期钩子函数，利用这些钩子函数，开发者可以在组件创建或者销毁时执行一些自己的代码，例如在组件出现之前从后台服务器请求数据。

普通组件生命周期函数
普通组件的生命周期函数只有如下两个：

• aboutToAppear()：该函数会在组件出现之前被调用，具体时机为创建自定义组件的实例之后，执行build()方法之前。
• aboutToDisappear()：该函数会在组件销毁之前被调用
  

页面入口组件生命周期函数
页面入口组件（使用@Entry装饰的组件）的生命周期函数函数如下五个：

• aboutToAppear()：该函数会在组件出现之前被调用，具体时机为创建自定义组件的实例之后，执行build()方法之前。
• aboutToDisappear()：该函数会在组件销毁之前被调用。
• onPageShow()：页面每次显示时都会被调用一次，包括路由、应用从后台进入前台等场景。
• onPageHide()：页面每次隐藏时都会被调用一次，包括路由、应用从前台进入后台等场景。
• onBackPress()：当用后点击返回按钮时会被调用。

案例:

import router from '@ohos.router';

@Entry
@Component
struct Parent {
  @State flag: boolean = true;

  build() {
    Column({ space: 50 }) {
      Text('Page A')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      if (this.flag) {
        Child()
      }
      Blank()
      Row({ space: 50 }) {
        Button('Child消失')
          .backgroundColor(Color.Orange)
          .onClick(() => {
            this.flag = false;
          })

        Button('Child出现')
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.flag = true;
          })
      }.margin({ bottom: 100 })

      Row({ space: 50 }) {
        Button('下一页(push)')
          .onClick(() => {
            router.pushUrl({ url: 'pages/lifecircle/PageB' })
          })

        Button('下一页(replace)')
          .onClick(() => {
            router.replaceUrl({ url: 'pages/lifecircle/PageB' })
          })
      }

    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({ top: 200, bottom: 20 })
  }

  aboutToAppear() {
    console.log('PageA Parent aboutToAppear')
  }

  aboutToDisappear() {
    console.log('PageA Parent aboutToDisappear');
  }

  onPageShow() {
    console.log('PageA onPageShow')
  }

  onPageHide() {
    console.log('PageA onPageHide')
  }

  onBackPress() {
    console.log('PageA onBackPress')
  }
}


@Component
struct Child {
  build() {
    Text('Child')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }

  aboutToAppear() {
    console.log('PageA Child aboutToAppear')
  }

  aboutToDisappear() {
    console.log('PageA Child aboutToDisappear')
  }
}