华为HarmonyOS NEXT 原生应用开发:页面路由、页面和组件生命周期函数

页面路由、组件生命周期

一、路由的基本使用

1. 如何新建页面
  1. 直接右键新建Page。【这个是最直接最常用的】
  2. 新建普通ets文件,然后通过配置变成页面。 【该方法是遇到这种情况的解决方案】
2. 路由 - 页面之间的跳转
  1. 使用 **router.pushUrl({})**进行跳转
ts 复制代码
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build () {
    Column() {
      Text('登录页')
        .fontSize(66)
      // 点击按钮,从登录页跳转到首页
      Button('登录(跳转首页)')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index'
          })
        })
    }
  }
}
  1. 使用 router.replaceUrl({}) 进行跳转(该方法不能返回
ts 复制代码
import { router } from '@kit.ArkUI'
@Entry
@Component
struct Login {
  build () {
    Column() {
      Text('登录页')
        .fontSize(66)
      // 点击按钮,从登录页跳转到首页
      Button('登录(跳转首页)')
        .onClick(() => {
          router.replaceUrl({
            url: 'pages/Index'
          })
        })
    }
  }
}
  1. 使用 router.back 进行页面返回
  • 实际开发中,登录成功跳转首页是不能再返回的,这里是示例代码!
ts 复制代码
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('返回登录页面')
        .onClick(() => {
          router.back()  // 需要注意:该方法一般不会和 replaceUrl方法配合使用
        })
    }
  }
}
3. 页面栈

页面栈:就如同弹夹一样,先进后出原则。

  1. router.pushUrl: 就像当于是将子弹一直往弹夹里面装,及时返回到栈里面有的页面依旧会累加进栈。
  2. router.replaceUrl: 装一个子弹,打一个子弹,栈里面只会保留当前的页面,所以,router.back方法无法使用。
  1. router.getLength() 获取页面栈长度
ts 复制代码
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('获取页面栈长度')
        .onClick(() => {
          let num: string = router.getLength() // 获取页面栈长度
          console.log('页面栈长度为', num)
        })
    }
  }
}
  1. router.clear() 清空页面栈清空页面栈
ts 复制代码
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('清空页面栈')
        .onClick(() => {
          router.clear() // 清空页面栈
        })
    }
  }
}
4. 路由模式
5. 路由传参

我们 在 A 页面 跳转到 B 页面的同时,携带 A 页面数据跳转过去,B页面可以去除携带过来的数据包。

第一步: 在 A 页面,传递一个 params 对象(将数据打包传递给B)

ts 复制代码
      // 点击按钮,从登录页跳转到首页
      Button('携带参数跳转首页')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/Index',
            // 数据打包成对象,丢过去!
            params: {
              username: this.username,
              password: this.password
            }
          })
        })

第二步: 取出数据包

  • 数据传递过来,需要通过类型断言,并且数据名字保持一致!
ts 复制代码
import { router } from '@kit.ArkUI'

// 创建接口,指定携带过来数据包的类型
interface UserInformation {
  username: string,
  password: string
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('首页')
        .fontSize(66)
      Button('获取A页面传递过来的数据')
        .onClick(() => {
          // 获取数据包,记得类型断言。否则报错
          let getUserData: UserInformation = router.getParams() as UserInformation
          // 输出数据内容
          console.log('数据包内容为:', getUserData.username + '-' + getUserData.username)
        })
    }
  }
}

二、生命周期函数(页面、组件)

1. 页面生命周期函数
2. 组件生命周期函数
  • 需要注意的是, @Entry修饰的是不是也可以使用组件的生命周期函数呀!
相关推荐
我科绝伦(Huanhuan Zhou)13 分钟前
华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”(无法挂载或访问),但挂载点目录仍在且无数据
运维·服务器·华为
塞尔维亚大汉1 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会1 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HarmonyOS小助手3 小时前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
刘阿宾3 小时前
【华为昇腾|CUDA】服务器A6000显卡部署LLM实战记录
服务器·华为·语言模型·gpu算力·kylin
HarmonyOS_SDK5 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
harmonyos
别说我什么都不会5 小时前
【OpenHarmony】鸿蒙开发之epublib
harmonyos
塞尔维亚大汉5 小时前
鸿蒙内核源码分析(VFS篇) | 文件系统和谐共处的基础
源码·harmonyos
RUZHUA6 小时前
华为 Mate 80 影像配置揭秘:硬软双升
华为
Georgewu21 小时前
【HarmonyOS】鸿蒙端云一体化开发入门详解 (一)
harmonyos