HarmonyOS 应用程序入口Ability与页面路由

需求描述

Stage模型下的Ability开发,实现Ability内页面间的跳转和数据传递

注:本文的 API 基于 Stage模型 和 HarmonyOS 3.1 Developer Preview 

页面效果

    

Ability概述

Ability框架概述-Ability开发-开发-HarmonyOS应用开发

 

Ability内页面跳转和数据传递

Ability的数据传递包括有Ability内页面的跳转和数据传递、Ability间的数据跳转和数据传递

页面路由,需要导入router模块,如下代码所示。

import router from '@ohos.router';

页面路由使用方法请参考官方文档

@ohos.router (页面路由)https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-router-0000001333321105#ZH-CN_TOPIC_0000001333321105__routeroptions

  • router.clear() 方法清除页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。 
  • API9及以上,router.push() 方法新增了mode参数,可以将mode参数配置为 router.RouterMode.Single 单实例模式和 router.RouterMode.Standard 标准模式。
    在单实例模式下:如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的同url页面会被移动到栈顶,移动后的页面为新建页,原来的页面仍然存在栈中,页面栈数量不变;如果目标页面的url在页面栈中不存在同url页面,按标准模式跳转,页面栈数量会加1。

代码实例

Index.ets

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = '第一页'
  @State dataFromIndex: string = ''
  @State dataFromSecond: string = ''

  onPageShow() {
    this.dataFromSecond = router.getParams()?.['dataFromSecond']
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Text('传递给第二页的数据:')
          .margin({ top: 16 })
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput()
          .width('95%')
          .onChange((value) => {
            this.dataFromIndex = value
          })

        Text('从第二页返回的数据:')
          .margin({ top: 16 })
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text(this.dataFromSecond)
          .fontSize(20)
          .fontColor(Color.Green)

        Button('下一页')
          .width('50%')
          .margin({ top: 16 })
          .onClick(() => {
            router.push({
              url: 'pages/Second',
              params: {
                dataFromIndex: this.dataFromIndex
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Second.ets

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State message: string = '第二页'
  @State dataFromIndex: string = router.getParams()?.['dataFromIndex']

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.dataFromIndex)
          .fontSize(20)
          .margin({ top: 16 })
          .fontColor(Color.Orange)
        Button('清除页面栈')
          .width('50%')
          .margin({ top: 16 })
          .onClick(() => {
            router.clear()
          })
        Button('跳转第一页\n单实例模式')
          .width('50%')
          .margin({ top: 16 })
          .onClick(() => {
            router.push({
              url: 'pages/Index',
              params: {
                dataFromSecond: '单例模式跳转的数据'
              }
            }, router.RouterMode.Single)
          })
        Button('返回')
          .width('50%')
          .margin({ top: 16 })
          .onClick(() => {
            router.back({
              url: 'pages/Index',
              params: {
                dataFromSecond: '直接返回的数据'
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

参考

华为开发者学堂

Ability框架概述-Ability开发-开发-HarmonyOS应用开发

ohos.router (页面路由)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋冠巡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值