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

比眉伴天荒 2023-10-06 00:29 10阅读 0赞

## 需求描述 ##

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

> 注：本文的 API 基于 [Stage模型][Stage] 和 [HarmonyOS 3.1 Developer Preview ][HarmonyOS 3.1 Developer Preview]

## 页面效果 ##

![7e68f386dc22477a8b8db00a26f8d1ca.png][] ![553e2276571f4701a091462261dfd1e4.png][]

## Ability概述 ##

[Ability框架概述-Ability开发-开发-HarmonyOS应用开发][Ability_-Ability_-_-HarmonyOS]

![4272aee1ceeb45879c58ea1295fef011.png][]

![a11084e1e9954dfb878eb203263f0fc9.png][]

## Ability内页面跳转和数据传递 ##

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

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

import router from '@ohos.router';

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

[@ohos.router (页面路由)![icon-default.png_t_M85B][]https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-router-0000001333321105\#ZH-CN\_TOPIC\_0000001333321105\_\_routeroptions][ohos.router _icon-default.png_t_M85B_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%')
      }
    }

## 参考 ##

[华为开发者学堂][Link 1]

[Ability框架概述-Ability开发-开发-HarmonyOS应用开发][Ability_-Ability_-_-HarmonyOS]

[ohos.router (页面路由)][ohos.router]

[Stage]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/stage-brief-0000001430440529-V3?catalogVersion=V3
[HarmonyOS 3.1 Developer Preview]: https://developer.harmonyos.com/cn/docs/documentation/doc-releases/harmonyos_release_3_202211-0000001384974906
[7e68f386dc22477a8b8db00a26f8d1ca.png]: https://img-blog.csdnimg.cn/7e68f386dc22477a8b8db00a26f8d1ca.png
[553e2276571f4701a091462261dfd1e4.png]: https://img-blog.csdnimg.cn/553e2276571f4701a091462261dfd1e4.png
[Ability_-Ability_-_-HarmonyOS]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ability-brief-0000001430320769-V3?catalogVersion=V3
[4272aee1ceeb45879c58ea1295fef011.png]: https://img-blog.csdnimg.cn/4272aee1ceeb45879c58ea1295fef011.png
[a11084e1e9954dfb878eb203263f0fc9.png]: https://img-blog.csdnimg.cn/a11084e1e9954dfb878eb203263f0fc9.png
[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[ohos.router _icon-default.png_t_M85B_https_developer.harmonyos.com_cn_docs_documentation_doc-references_js-apis-router-0000001333321105_ZH-CN_TOPIC_0000001333321105_routeroptions]: https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-router-0000001333321105#ZH-CN_TOPIC_0000001333321105__routeroptions
[Link 1]: https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667310940295021?isFrom=studyRecord
[ohos.router]: https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-router-0000001333321105