HarmonyOS鸿蒙Next中如何存放页面并跳转 请提供对应Demo

HarmonyOS鸿蒙Next中如何存放页面并跳转 请提供对应Demo Har里如何存放页面并跳转，请提供对应Demo

4 回复

挎包路由Router和Navigation都是可以的：

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-router-to-navigation-V5# 跨包路由

更多关于HarmonyOS鸿蒙Next中如何存放页面并跳转 请提供对应Demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


har包内跳转可以通过路由命名的方式进行跳转；

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5#命名路由

在HarmonyOS（鸿蒙）Next中，页面存放和跳转主要通过AbilitySlice和PageAbility来实现。以下是一个简单的Demo，展示如何在鸿蒙Next中存放页面并实现跳转。

1. 创建PageAbility

首先，创建一个PageAbility，它是页面的入口点。

import Ability from '@ohos.application.Ability';
import AbilitySlice from '@ohos.application.AbilitySlice';

export default class MainAbility extends Ability {
    onCreate(want, launchParam) {
        console.log("MainAbility onCreate");
        this.setMainRoute(MainAbilitySlice.PATH);
    }
}

export class MainAbilitySlice extends AbilitySlice {
    static PATH = "pages/MainAbilitySlice";

    onStart() {
        console.log("MainAbilitySlice onStart");
        this.loadContent("pages/MainAbilitySlice", null);

        // 添加按钮点击事件
        let button = this.findComponentById("button");
        button.onClick(() => {
            let want = {
                bundleName: "com.example.myapplication",
                abilityName: "com.example.myapplication.SecondAbility",
                parameters: {
                    key: "value"
                }
            };
            featureAbility.startAbility(want).then(() => {
                console.log("Jump to SecondAbilitySlice");
            }).catch((err) => {
                console.error("Jump failed: " + JSON.stringify(err));
            });
        });
    }
}

2. 创建目标页面

接下来，创建目标页面的AbilitySlice。

import AbilitySlice from '@ohos.application.AbilitySlice';

export class SecondAbilitySlice extends AbilitySlice {
    static PATH = "pages/SecondAbilitySlice";

    onStart() {
        console.log("SecondAbilitySlice onStart");
        this.loadContent("pages/SecondAbilitySlice", null);
    }
}

3. 配置文件

在config.json中，注册MainAbility和SecondAbility。

{
  "app": {
    "bundleName": "com.example.myapplication",
    "version": {
      "code": 1,
      "name": "1.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "com.example.myapplication",
    "name": ".MyApplication",
    "reqPermissions": [],
    "abilities": [
      {
        "name": "MainAbility",
        "icon": "$media:icon",
        "label": "$string:mainability_label",
        "visible": true,
        "launchType": "standard"
      },
      {
        "name": "SecondAbility",
        "icon": "$media:icon",
        "label": "$string:secondability_label",
        "visible": true,
        "launchType": "standard"
      }
    ]
  }
}

4. 页面布局

在resources/base/layout目录下，创建MainAbilitySlice和SecondAbilitySlice的布局文件。

MainAbilitySlice.xml:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="32">
    <Button
        ohos:id="$+id:button"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="Jump to Second Page"/>
</DirectionalLayout>

SecondAbilitySlice.xml:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:padding="32">
    <Text
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="Second Page"/>
</DirectionalLayout>

通过以上步骤，你可以在鸿蒙Next中实现页面的存放和跳转。

在HarmonyOS鸿蒙Next中，页面存放和跳转可以通过Ability和Page来实现。以下是一个简单的Demo：

  1. 创建页面：在resources/base/layout目录下创建XML布局文件，如main_page.xml。

  2. 定义Ability：在src/main/ets/entryability目录下创建EntryAbility.ts，继承Ability类，并加载页面。

import Ability from '@ohos.application.Ability';
import Want from '@ohos.application.Want';

export default class EntryAbility extends Ability {
    onCreate(want: Want) {
        console.log('EntryAbility onCreate');
        this.context.startAbility({
            bundleName: 'com.example.demo',
            abilityName: 'com.example.demo.MainAbility'
        });
    }
}
  1. 定义Page：在src/main/ets/pages目录下创建MainPage.ts，继承Page类，并加载布局。
import Page from '@ohos.application.Page';
import AbilityContext from '@ohos.application.AbilityContext';

export default class MainPage extends Page {
    onInit() {
        console.log('MainPage onInit');
        this.setUIContent($r('app.layout.main_page'));
    }
}
  1. 跳转页面：在MainPage.ts中使用router.push跳转到其他页面。
import router from '@ohos.router';

router.push({
    url: 'pages/SecondPage'
});

通过以上步骤，你可以在HarmonyOS鸿蒙Next中实现页面的存放和跳转。

回到顶部