侧边栏壁纸
博主头像
DevWiki博主等级

不怕慢,只怕站!

  • 累计撰写 156 篇文章
  • 累计创建 90 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

鸿蒙App开发学习04 - 组件跳转页面的方式

DevWiki
2024-04-02 / 0 评论 / 0 点赞 / 42 阅读 / 5264 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-04-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 背景说明

我们创建好默认项目的时候, 可以看到有一个默认的 AppAbility 类, 里面有这样的跳转 page 的代码:

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

windowStage.loadContent('pages/Index', (err, data) => {
    if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
                    return;
                    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
               });
}

即: WindowStage的 loadContent(path: string, callback: AsyncCallback<void>): void;函数.

那么如果我要在 Component 组件里如何跳转 page 呢?

2. router 跳转

在组件内可以使用 router 进行页面跳转, 首先导入:

import { router } from '@kit.ArkUI';

其次是使用函数 pushUrl跳转:

/**
     * Navigates to a specified page in the application based on the page URL and parameters.
     *
     * @param { RouterOptions } options - Options.
     * @param { RouterMode } mode - RouterMode.
     * @returns { Promise<void> } the promise returned by the function.
     * @throws { BusinessError } 401 - if the number of parameters is less than 1 or the type of the url parameter is not string.
     * @throws { BusinessError } 100001 - if UI execution context not found.
     * @throws { BusinessError } 100002 - if the uri is not exist.
     * @throws { BusinessError } 100003 - if the pages are pushed too much.
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @crossplatform
     * @atomicservice
     * @since 11
     */
    function pushUrl(options: RouterOptions, mode: RouterMode): Promise<void>;

其中:

  • RouterOptions : 路由跳转选项。

系统能力: SystemCapability.ArkUI.ArkUI.Lite。

名称 类型 必填 说明
url string 表示目标页面的url,可以用以下两种格式:
- 页面绝对路径,由配置文件中pages列表提供,
例如:- pages/index/index- pages/detail/detail- 特殊值,
如果url的值是"/",则跳转到首页。
params object 表示路由跳转时要同时传递到目标页面的数据,切换到其他页面时,
当前接收的数据失效。跳转到目标页面后,
使用router.getParams()获取传递的参数,
此外,在类web范式中,参数也可以在页面中直接使用,
如this.keyValue(keyValue为跳转时params参数中的key值),
如果目标页面中已有该字段,则其值会被传入的字段值覆盖。
**说明:**params参数不能传递方法和系统接口返回的对象
(例如,媒体接口定义和返回的PixelMap对象)。
建议开发者提取系统接口返回的对象中需要被传递的基础类型属性,
自行构造object类型对象进行传递。
  • RouterMode :路由跳转模式。

系统能力: SystemCapability.ArkUI.ArkUI.Full。

名称 说明
Standard 多实例模式,也是默认情况下的跳转模式。目标页面会被添加到页面栈顶,
无论栈中是否存在相同url的页面。
说明: 不使用路由跳转模式时,则按照默认的多实例模式进行跳转。
Single 单实例模式。如果目标页面的url已经存在于页面栈中,则该url页面移动到栈顶。
如果目标页面的url在页面栈中不存在同url页面,则按照默认的多实例模式进行跳转。

其中 options 的url 可以两种格式:

  • 页面绝对路径,由配置文件中pages列表提供,例如:- pages/index/index
  • 使用包名指定的路径, 如: @bundle:net.devwiki.hm4demo/app/ets/pages/WebPage

具体实现代码在: router:

https://git.devwiki.net/Harmony/HM4Demo/src/commit/68a08d785ed13022aad8e3a0ba2bc4d41cb915ee/app/src/main/ets/pages/Index.ets#L40

本文的代码存放在:

Harmony/HM4Demo - HM4Demo - DevWiki Gitea
https://git.devwiki.net/Harmony/HM4Demo

3. 后记

如果你觉得本文对你有帮助, 欢迎点击收藏. 关注我的公众号,获取最新信息.

公众号

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区