实现页面跳转的前提,必须在resources/base/profile/main_pages中添加页面

页面跳转

页面跳转可以用 pushUrl replaceUrl 进行跳转。
使用pushUrl跳转可以返回上一页,而replaceUrl不可以返回
可用back方法进行返回

页面栈

页面栈是用来存储程序运行时页面的一种 数据结构,遵循先进后出原则
页面栈最大容量为32个页面
但是replaceUrl方法不会进行堆栈而是将上一个页面销毁,载入新页面
获取页面栈长度:router.getLength()
清空页面栈:router.clear()

路由模式

  1. Standard:无论之前是否添加过,一直添加到页面栈(默认常用)
  2. Single:如果目标页面已存在,会将已有的最近同url页面移到栈顶(看情况用)

注:Single 主要用于两个页面需要经常来回切换的场景

路由传参

日常开发中有这样的场景:点击不同的电影,商品,标题等,需要跳转到与之对应的详情页面

跳转时进行传参数,以对象的形式传递参数

Button('传参去首页')
  .onClick(() => {
    router.pushUrl({
      url: 'pages/Index',
      params: { //以对象的形式传递参数
        username: this.username,
        msg: '测试消息'
      }
    })
  })

跳转后在aboutToAppear中接收参数,步骤如下:

  1. 通过 as 类型断言 转为具体类型(必须)
  2. 通过点语法取值
interface ParamsObj{
  username: string
  msg: string
}

aboutToAppear(): void {
  //确认内容
  console.log('传递过来的数据', JSON.stringify(router.getParams()))
  //1.通过 as 类型断言 转为具体类型(必须)
  const params = router.getParams() as ParamsObj
  //2.通过点语法取值
  this.myName = params.username
}

页面的生命周期

组件 和 页面 在创建、显示、销毁的这一整个过程中,会自动执行一系列的【生命周期钩子】就是一些列 函数,让开发者有机会再特定的阶段运行自己的代码。
区分 页面组件:@Entry(有Entry修饰的就是页面,页面有更多的函数可使用(比组件多3个))

生命周期运行顺序

  • 若包含子组件,显示先运行aboutToAppear,包括子组件的,再运行onPageShow。
  • 销毁先运行onPageHide,再运行aboutToDisappear
  • onPageShow、onPageHide、onBackPress是页面专属的额外属性,组件只有aboutToAppear和aboutToDisappear

        注:

  • aboutToDisappear 是组件实例销毁前执行,不允许修改变量
  • 若onBackPress中写return true则表示阻止返回键的默认返回效果
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐