鸿蒙Next中ability page如何配置和使用

在鸿蒙Next中，ability的page应该如何正确配置和使用？具体步骤和注意事项有哪些？

2 回复

鸿蒙Next的Ability Page配置？简单！在module.json5里声明"type": "page"，再写个UI代码。启动用startAbility()，传参靠Want对象，交互走AbilityContext。记住：PageAbility负责UI，其他杂活交给ServiceAbility。代码别写太浪，不然鸿蒙让你“页”面崩溃！

更多关于鸿蒙Next中ability page如何配置和使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，Ability Page 是 UIAbility 的页面组件，用于展示用户界面。以下是配置和使用的步骤：

1. 配置 Ability Page

在 module.json5 文件中声明 UIAbility 和 Page：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "actions": ["action.system.home"],
            "entities": ["entity.system.home"]
          }
        ]
      }
    ],
    "pages": "$profile:main_pages"
  }
}

在 resources/base/profile/main_pages.json 中定义页面路由：

{
  "src": [
    "pages/Index",
    "pages/Detail"
  ]
}

2. 创建 Ability 和 Page

  • UIAbility（EntryAbility.ts）：
import UIAbility from '@ohos.app.ability.UIAbility';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    console.log('Ability onCreate');
  }
}
  • Page 页面（Index.ets）：
@Entry
@Component
struct Index {
  @State message: string = 'Hello HarmonyOS';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('跳转详情')
          .onClick(() => {
            // 跳转到详情页
            router.pushUrl({ url: 'pages/Detail' });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. 页面跳转

使用 router 模块进行导航：

import router from '@ohos.router';

// 跳转到新页面
router.pushUrl({ url: 'pages/Detail' });

// 返回上一页
router.back();

4. 生命周期

Page 的生命周期方法：

  • aboutToAppear：页面即将显示时触发
  • aboutToDisappear：页面即将隐藏时触发

5. 注意事项

  • 确保 module.json5 和路由配置正确。
  • 页面路径需与 main_pages.json 中声明的一致。
  • 使用 @Entry 装饰器标记入口组件。

通过以上步骤即可在鸿蒙Next中配置和使用 Ability Page。

回到顶部