鸿蒙5.0开发进阶：ArkTS组件-元服务（NavPushPathHelper）

鸿蒙5.0开发：NavPushPathHelper组件详解
最新推荐文章于 2025-12-02 00:52:42 发布
原创 最新推荐文章于 2025-12-02 00:52:42 发布 · 783 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

NavPushPathHelper

当跳转的目标NavDestination在不同的hsp分包，且未被主包依赖，首次运行元服务只会下载安装主包，需要使用NavPushPathHelper先下载安装相应hsp分包，再将指定的NavDestination页面信息入栈。使Navigation支持动态加载hsp分包后再跳转。

说明

该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { NavPushPathHelper } from '@kit.ArkUI'

子组件

无

属性

不支持通用属性

对Navigation路由栈NavPathStack的所有路由跳转接口进行了封装，在NavPushPathHelper中持有一个NavPathStack对象，在封装的跳转接口中，去判断子包是否存在，如果不存在则进行动态下载子包，等结果返回后调用NavPathStack的相应的接口将指定的NavDestination页面信息入栈。

constructor

constructor(navPathStack: NavPathStack)

NavPushPathHelper的构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
navPathStackNavPathStack是Navigation路由栈。

pushPath

pushPath(moduleName: string, info: NavPathInfo, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是NavDestination页面的信息。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

pushPath

pushPath(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是NavDestination页面的信息。
optionsNavigationOptions否页面栈操作选项。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

pushPathByName

pushPathByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将name指定的NavDestination页面信息入栈，传递的数据为param，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
namestring是NavDestination页面名称。
paramObject是NavDestination页面详细参数。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

pushPathByName

pushPathByName(moduleName: string, name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
namestring是NavDestination页面名称。
paramObject是NavDestination页面详细参数。
onPopCallback<PopInfo>是Callback回调，用于页面出栈时触发该回调处理返回结果。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

pushDestination

pushDestination(moduleName: string, info: NavPathInfo, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是NavDestination页面的信息。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.
100001Internal error.
100005Builder function not registered.
100006NavDestination not found.
300001hsp silent install fail.

pushDestination

pushDestination(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是NavDestination页面的信息。
optionsNavigationOptions否页面栈操作选项。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.
100001Internal error.
100005Builder function not registered.
100006NavDestination not found.
300001hsp silent install fail.

pushDestinationByName

pushDestinationByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将name指定的NavDestination页面信息入栈，传递的数据为param，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
namestring是NavDestination页面名称。
paramObject是NavDestination页面详细参数。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.
100001Internal error.
100005Builder function not registered.
100006NavDestination not found.
300001hsp silent install fail.

pushDestinationByName

pushDestinationByName(moduleName: string, name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的OnPop回调，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
namestring是NavDestination页面名称。
paramObject是NavDestination页面详细参数。
onPopCallback<PopInfo>是Callback回调，用于页面出栈时处理返回结果。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameters types. 3. Parameter verification failed.
100001Internal error.
100005Builder function not registered.
100006NavDestination not found.
300001hsp silent install fail.

replacePath

replacePath(moduleName: string, info: NavPathInfo, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将当前页面栈栈顶退出，将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是新栈顶页面参数信息
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

replacePath

replacePath(moduleName: string, info: NavPathInfo, options?: NavigationOptions): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将当前页面栈栈顶退出，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
infoNavPathInfo是新栈顶页面参数信息。
optionsNavigationOptions否页面栈操作选项。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

replacePathByName

replacePathByName(moduleName: string, name: string, param: Object, animated?: boolean): Promise<void>

先判断分包是否存在，若不存在，则通过moduleName下载分包，再将当前页面栈栈顶退出，将name指定的页面入栈，使用Promise异步回调返回接口调用结果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
moduleNamestring是目标NavDestination所在分包的moduleName。
namestring是NavDestination页面名称。
paramObject是NavDestination页面详细参数。
animatedboolean否是否支持转场动画，默认值：true。

返回值：

类型说明
Promise<void>异常返回结果。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
300001hsp silent install fail.

事件

不支持通用事件

示例

主包：

// Index.ets
import { NavPushPathHelper } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct NavigationExample {
  pageInfo: NavPathStack = new NavPathStack()
  helper: NavPushPathHelper = new NavPushPathHelper(this.pageInfo)

  build() {
    Navigation(this.pageInfo) {
      Column() {
        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.helper.pushPath('hsptest1', { name: 'pageOne' }, false)
              .catch((error: BusinessError) => {
              console.error(`[pushPath]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.error('[pushPath]success.');
            }); // 将name指定的NavDestination页面信息入栈。
          })
      }
    }.title('NavIndex')
  }
}

分包hsptest1：

// PageOne.ets
import { NavPushPathHelper } from '@kit.ArkUI'
import { BusinessError } from '@kit.BasicServicesKit';

class TmpClass {
  count: number = 10
}

class ParamWithOp {
  operation: number = 1
  count: number = 10
}

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

@Component
export struct PageOne {
  pageInfo: NavPathStack = new NavPathStack();
  helper: NavPushPathHelper = new NavPushPathHelper(this.pageInfo)
  @State message: string = 'Hello World'

  build() {
    NavDestination() {
      Column() {
        Text(this.message)
          .width('80%')
          .height(50)
          .margin(10)

        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            this.helper.pushPath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[pushPath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}).catch((error: BusinessError) => {
              console.error(`[pushPath]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[pushPath]success.');
            });
          })

        Button('pushPath with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            this.helper.pushPath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[pushPath with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
              console.error(`[pushPath with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[pushPath with NavigationOptions]success.');
            });
          })

        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushPathByName('hsptest2', 'pageTwo', tmp, (popInfo) => {
              this.message = '[pushPathByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }).catch((error: BusinessError) => {
              console.error(`[pushPathByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[pushPathByName]success.');
            });
          })

        Button('pushPathByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushPathByName('hsptest2', 'pageTwo', tmp, true)
            .catch((error: BusinessError) => {
              console.error(`[pushPathByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[pushPathByNameWithoutOnPop]success.');
            });
          })

        Button('pushDestination', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushDestination('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[pushDestination]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}).catch((error: BusinessError) => {
              console.error(`[pushDestination]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.error('[pushDestination]success.');
            });
          })

        Button('pushDestination with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushDestination('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[pushDestination with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
              console.error(`[pushDestination with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.error('[pushDestination with NavigationOptions]success.');
            });
          })

        Button('pushDestinationByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushDestinationByName('hsptest2','pageTwo', tmp, (popInfo) => {
              this.message = '[pushDestinationByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }).catch((error: BusinessError) => {
              console.error(`[pushDestinationByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.error('[pushDestinationByName]success.');
            });
          })

        Button('pushDestinationByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.pushDestinationByName('hsptest2','pageTwo', tmp, true)
              .catch((error: BusinessError) => {
                console.error(`[pushDestinationByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`);
              }).then(() => {
              console.error('[pushDestinationByNameWithoutOnPop]success.');
            });
          })

        Button('replacePath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            this.helper.replacePath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[replacePath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}).catch((error: BusinessError) => {
              console.error(`[replacePath]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[replacePath]success.');
            });
          })

        Button('replacePath with NavigationOptions', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            this.helper.replacePath('hsptest2', { name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo) => {
              this.message = '[replacePath with NavigationOptions]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result);
            }}, {launchMode:0, animated:true}).catch((error: BusinessError) => {
              console.error(`[replacePath with NavigationOptions]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[replacePath with NavigationOptions]success.');
            });
          })

        Button('replacePathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(35)
          .margin(10)
          .onClick(() => {
            let tmp = new TmpClass()
            this.helper.replacePathByName('hsptest2', 'pageTwo', tmp)
              .catch((error: BusinessError) => {
              console.error(`[replacePathByName]failed, error code = ${error.code}, error.message = ${error.message}.`);
            }).then(() => {
              console.log('[replacePathByName]success.');
            });
          })

      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() => {
      this.pageInfo.pop({ number: 1 }) // 弹出路由栈栈顶元素。
      return true
    }).onReady((context: NavDestinationContext) => {
      this.pageInfo = context.pathStack;
      this.helper = new NavPushPathHelper(this.pageInfo);
    })
  }
}
// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}

分包hsptest2：

// PageTwo.ets

class resultClass {
  constructor(count: number) {
    this.count = count;
  }
  count: number = 10
}

@Builder
export function PageTwoBuilder() {
  PageTwo()
}

@Component
export struct PageTwo {
  pathStack: NavPathStack = new NavPathStack()

  build() {
    NavDestination() {
      Column() {
        Button('pop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pathStack.pop(new resultClass(1)); // 回退到上一个页面，将处理结果传入push的onPop回调中。
          })
      }.width('100%').height('100%')
    }.title('pageTwo')
    .onBackPressed(() => {
      this.pathStack.pop(new resultClass(0)); // 回退到上一个页面，将处理结果传入push的onPop回调。
      return true;
    }).onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })
  }
}
// 工程配置文件module.json5中配置 {"routerMap": "$profile:route_map"}
// route_map.json
{
  "routerMap": [
    {
      "name": "pageTwo",
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
      "buildFunction": "PageTwoBuilder",
      "data": {
        "description": "this is pageTwo"
      }
    }
  ]
}

鸿蒙OpenHarmony【NavPushPathHelper】元服务
hhhhhh2323的博客
11-24 904
当跳转的目标[NavDestination]在不同的hsp分包，且未被主包依赖，首次运行元服务只会下载安装主包，需要使用NavPushPathHelper先下载安装相应hsp分包，再将指定的[NavDestination]页面信息入栈。使[Navigation]支持动态加载hsp分包后再跳转。
HarmonyOS核心知识点：组件导航 (Navigation) (推荐)
wuliusan5的博客
03-20 1066
Navigation通过 customNavContentTransition 事件提供自定义转场动画的能力，通过如下三步可以定义一个自定义的转场动画。构建一个自定义转场动画工具类CustomNavigationUtils，通过一个Map管理各个页面自定义动画对象CustomTransition，页面在创建的时候将自己的自定义转场动画对象注册进去，销毁的时候解注册；
【鸿蒙next开发】ArkUI框架：ArkTS组件-NavPushPathHelper
m0_73088370的博客
06-05 786
本文详细介绍了鸿蒙5.0中NavPushPathHelper组件的使用方法，该组件从API Version 12开始支持，主要用于解决跨HSP分包页面跳转时的动态加载问题。
鸿蒙初学者(HarmonyOSNext_API12)学习手册_元服务（一）
m0_71977266的博客
12-06 3006
元服务(原名为原子化服务)是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口、免安装、可为用户提供一个或多个便捷服务的新型应用程序形态。元服务基于HarmonyOS APY开发，支持运行在148+N设备上，供用户在合适的场景、合适的设备上便捷使用。元服务相对于传统方式的需要安装的应用形态更加轻量，同时提供更丰富的入口、更精准的分发。（来自官方文档）注：简单点说，有点像现在版本的微信小程序。原理上来说只要改变一个属性就可以将一个应用转为一个元服务。
精讲鸿蒙navigation路由导航
2301_77677027的博客
02-06 1135
navigation路由导航实践。
鸿蒙5.0版开发：ArkTS组件-基础组件（NavRouter）
m0_69424697的博客
09-14 1039
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
鸿蒙5.0版开发：ArkTS组件-LoadingProgress
m0_69424697的博客
11-17 1033
用于显示加载动效的组件。
鸿蒙5.0版开发：ArkTS组件-Component3D
m0_69424697的博客
11-24 1050
3D渲染组件，可以加载3D模型资源并做自定义渲染，通常用于3D动效场景。
鸿蒙5.0版开发：ArkTS组件通用属性-文本通用
m0_69424697的博客
10-29 1247
文本通用属性目前只针对包含文本元素的组件，设置文本样式。
鸿蒙5.0版开发：ArkTS组件-Radio
m0_69424697的博客
11-10 847
单选框，提供相应的用户交互选择项。
鸿蒙NEXT版实战开发：如何实现跨模块的页面跳转功能？
qq_39652397的博客
03-05 1269
在业务体系庞大或复杂的情况下，通常会将业务拆分成多个子业务模块，单个子业务模块为一个har/hsp。
【每日学点HarmonyOS Next知识】navigation跳转异常、默认加载移动端版本网页、Menu位置、View生成图片保存相册、H5原生交互
轻口味的专栏
12-29 1075
参考文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ui-js-components-menu-V5#%E5%88%9B%E5%BB%BAmenu%E7%BB%84%E4%BB%B6。在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过postMessage()接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。view生成图片，然后保存到相册。
鸿蒙5.0版开发：ArkTS组件-基础组件（Navigation）
m0_69424697的博客
09-14 1979
Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用...
鸿蒙5.0版开发：ArkTS组件-AtomicServiceNavigation
m0_69424697的博客
12-02 930
作为Page页面的根容器使用............
在HarmonyOS Api12中，路由(Navigation)跳转主要的几种方式
m0_53992752的博客
11-25 1413
Navigation路由相关的操作都是基于页面栈提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。。
基于DevEco Studio的OpenHarmony应用原子化服务（元服务）入门教程
weixin_69135651的博客
11-06 913
现最新版的DevEco Studio中OpenHarmony项目在本目录下调整。将runtimeOS:””中间内容调为OpenHarmony即可。这种方式，不用开发板，通过预览器就可以查看项目样式效果。
东南亚小微商户支付云喇叭市场现状与九联物联Cat.1鸿蒙模组UMA223-H技术价值分析
通信行业老兵、物联网从业者，做一个有趣的普通人。
12-01 1011
东南亚小微商户正经历数字化支付转型，支付云喇叭成为关键工具。搭载九联物联Cat.1鸿蒙模组UMA223-H的收款设备，凭借离线语音播报、多语言支持和弱网适应能力，在街头摊贩、零售店、跨境旅游等场景广泛应用。市场呈现国际支付巨头、本土服务商和中国出海企业多元竞争格局，其中中国企业的技术优势明显。该技术通过离线TTS引擎、硬件级音频输出等创新，降低商户成本，提升运营效率。随着东南亚电商增长和政策支持，支付云喇叭市场前景广阔，未来将向智能化、多功能化发展，成为小微商户数字化转型的核心枢纽。
Electron for 鸿蒙PC项目开发之模态框组件
风中追风
12-02 430
这是一个基于Electron开发的模态框组件示例，展示了如何在Electron应用中实现各种类型的模态对话框。该组件适用于需要用户交互确认、信息展示、表单填写等场景的桌面应用，如文件操作确认、设置面板、通知提醒等。
Electron for 鸿蒙PC项目实战案例之记忆卡片游戏
最新发布
风中追风
12-02 450
这是一个基于Electron for 鸿蒙PC的记忆翻牌游戏实现，专为初学者设计。玩家需要翻转卡片，找到匹配的一对，锻炼记忆力和专注力。游戏支持不同难度级别和多种卡片主题。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值