鸿蒙界面开发——组件（7）：组件导航 & 页面路由

于 2024-09-10 10:58:38 发布
阅读量1.2k 收藏 24
点赞数 18
分类专栏： 鸿蒙前端学习 文章标签： harmonyos 华为 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littleyy666/article/details/141951798
版权

组件导航 (Navigation)(推荐)

Navigation()
Navigation(pathInfos: NavPathStack)

Navigation是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上，Navigation组件能够自适应显示大小，自动切换分栏展示效果。

Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。
导航页由标题栏(Titlebar，包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过hideNavBar属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。

子组件

可以包含子组件。
在API Version 9上，需要配合NavRouter组件实现页面路由，从API Version 10开始，推荐使用NavPathStack实现页面路由。

示例

1. 主页面
创建一个页面栈对象并传入Navigation
@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  页面栈对象传入Navigation
  Navigation(this.pageInfos) {
     List({ space: 12 }) {
       ForEach(this.arr, (item:string) => {
         ListItem() {
           Text("NavRouter" + item)
           ...
             .onClick(()=>{  // 点击跳转 页面路由操作，参见下文详解  pushPath  name
               this.pageInfos.pushPath({ name: "NavDestinationTitle" + item})
             })
         }
       }, (item:string):string => item)
     }
   }
   .title("主标题")
   .mode(NavigationMode.Stack) //单栏显示
   .navDestination(this.PageMap) //创建NavDestination组件

3. 子页面
@Builder
PageMap(name: string) {
  if (name === "NavDestinationTitle1") { //pushPath({ name: "NavDestinationTitle1" })
    pageOneTmp()
  } else if (name === "NavDestinationTitle2") {
    pageTwoTmp()
  } else if (name === "NavDestinationTitle3") {
    pageThreeTmp()
  }
}

3.子页面结构
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  build() {
   //NavDestination组件
    NavDestination() {Column() {...}}.title("NavDestinationTitle1")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      return true
    })
  }
}

属性

除支持通用属性外，还支持以下属性：

  1. title(value: ResourceStr | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle, options?: NavigationTitleOptions)设置页面标题。
  2. menus(value: Array | CustomBuilder)设置页面右上角菜单。不设置时不显示菜单项。
    使用Array 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被自动收齐，放入自动生成的更多图标。
    说明：不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
Navigation() { ...}.menus([TooTmp,...])
  1. titleMode(value: NavigationTitleMode)设置页面标题栏显示模式。
    标题栏在界面顶部，用于呈现界面名称和操作入口
    Mini模式：普通型标题栏，用于一级页面不需要突出标题的场景。
    Full模式：强调型标题栏，用于一级页面需要突出标题的场景。
Navigation() { ...}.titleMode(NavigationTitleMode.Mini)
Navigation() { ...}.titleMode(NavigationTitleMode.Full)
  1. toolbarConfiguration(value: Array | CustomBuilder, options?: NavigationToolbarOptions)设置底部工具栏内容。不设置时不显示工具栏。
    说明：不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() {..}.toolbarConfiguration(TooBar)
  1. hideToolBar(value: boolean)设置是否隐藏工具栏。
  2. hideTitleBar(value: boolean)
  3. hideBackButton(value: boolean)设置是否隐藏标题栏中的返回键。返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。
  4. hideNavBar(value: boolean)设置是否隐藏导航栏。设置为true时，隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。如果此时路由栈中存在NavDestination页面，则直接显示栈顶NavDestination页面，反之显示空白。
  5. navBarWidth(value: Length)设置导航栏宽度。仅在Navigation组件分栏时生效。
  6. navBarPosition(value: NavBarPosition)设置导航栏位置。仅在Navigation组件分栏时生效。
  7. mode(value: NavigationMode)设置导航栏的显示模式。支持Stack、Split与Auto模式。
    自适应模式：Navigation组件默认为自适应模式，此时mode属性为NavigationMode.Auto。自适应模式下，当页面宽度大于等于一定阈值( API version 9及以前：520vp，API version 10及以后：600vp )时，Navigation组件采用分栏模式，反之采用单栏模式。
Navigation() {...}.mode(NavigationMode.Auto)

单页面模式：NavigationMode.Stack
在这里插入图片描述

分栏模式：NavigationMode.Split
在这里插入图片描述

  1. backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier)设置标题栏中返回键图标。
    说明:
    不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。
  2. navDestination(builder: (name: string, param: unknown) => void) 创建NavDestination组件。使用builder函数，基于name和param构造NavDestination组件。builder下只能有一个根节点。builder中允许在NavDestination组件外包含一层自定义组件， 但自定义组件不允许设置属性和事件，否则仅显示空白。
  3. navBarWidthRange(value: [Dimension, Dimension])设置导航栏最小和最大宽度（双栏模式下生效）。
  4. minContentWidth(value: Dimension) 设置导航栏内容区最小宽度（双栏模式下生效）。
    默认值：360单位：vp
    undefined：行为不做处理，导航栏内容区最小宽度与默认值保持一致。
    Auto模式断点计算：默认600vp，minNavBarWidth(240vp) + minContentWidth (360vp)
    说明:
    仅设置navBarWidth，不支持Navigation分割线拖拽。
    navBarWidthRange指定分割线可以拖拽范围。如果不设置值，则按照默认值处理。拖拽范围需要满足navBarWidthRange设置的范围和minContentWidth限制。
    Navigation显示范围缩小：a. 缩小内容区大小。如果不设置minContentWidth属性，则可以缩小内容区至0， 否则最小缩小至minContentWidth。b. 缩小导航栏大小，缩小时需要满足导航栏宽度大于navBarRange的下限。c. 对显示内容进行裁切。
  5. ignoreLayoutSafeArea(types?: Array, edges?: Array)控制组件的布局，使其扩展到非安全区域
  6. systemBarStyle(style: Optional)当Navigation中显示Navigation首页时，设置对应系统状态栏的样式。

事件

onTitleModeChange
onNavBarStateChange9+
onNavigationModeChange11+
customNavContentTransition11+

路由操作详解——页面栈NavPathStack对象

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行，每个Navigation都需要创建并传入一个NavPathStack对象，用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

从API version 12开始，页面栈允许被继承。开发者可以在派生类中自定义属性和方法，也可以重写父类的方法。派生类对象可以替代基类NavPathStack对象使用。

创建页面栈对象

struct Index {
  // 1.创建一个页面栈对象并传入Navigation
  pageStack: NavPathStack = new NavPathStack()
  build() {
    // 2. 传入页面栈对象
    Navigation(this.pageStack) {...}.title('Main')
  }
}

页面跳转

pushPath(info: NavPathInfo, animated?: boolean): void  将info指定的NavDestination页面信息入栈。
pushPath(info: NavPathInfo, options?: NavigationOptions): void 将info指定的NavDestination页面信息入栈，具体根据options中指定不同的LaunchMode，有不同的行为。

info NavPathInfo 是 NavDestination页面的信息。
animated boolean 否 是否支持转场动画，默认值：true。
options NavigationOptions 否 页面栈操作选项。launchMode&animated
LaunchMode枚举说明：
STANDARD 系统默认的栈操作模式。push操作会将指定的NavDestination入栈；replace操作会将当前栈顶NavDestination替换。

MOVE_TO_TOP_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将对应的NavDestination页面移到栈顶（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。

POP_TO_SINGLETON 从栈底向栈顶查找，如果指定的名称已经存在，则将其上方的NavDestination页面全部移除（replace操作会将最后的栈顶替换成指定的NavDestination），否则行为和STANDARD一致。

NEW_INSTANCE 创建新的NavDestination实例。与STANDARD模式相比，该方法不会复用栈中同名实例。

pushPathByName(name: string, param: unknown, animated?: boolean): void将name指定的NavDestination页面信息入栈，传递的数据为param。
pushPathByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): void将name指定的NavDestination页面信息入栈，传递的数据为param，添加onPop回调接收入栈页面出栈时的返回结果，并进行处理。

name string 是 NavDestination页面名称。
param unknown 是 NavDestination页面详细参数。
onPop Callback 是 Callback回调，用于页面出栈时触发该回调处理返回结果。仅pop中设置result参数后触发。
param Object 是 NavDestination页面详细参数。

pushDestination(info: NavPathInfo, animated?: boolean): Promise<void> 将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果。
pushDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void>将info指定的NavDestination页面信息入栈，使用Promise异步回调返回接口调用结果，具体根据options中指定不同的LaunchMode，有不同的行为。

pushDestinationByName(name: string, param: Object, animated?: boolean): Promise<void>将name指定的NavDestination页面信息入栈，传递的数据为param，使用Promise异步回调返回接口调用结果。
pushDestinationByName(name: string, param: Object, onPop: Callback<PopInfo>, animated?: boolean): Promise<void>将name指定的NavDestination页面信息入栈，传递的数据为param，并且添加用于页面出栈时处理返回结果的OnPop回调，使用Promise异步回调返回接口调用结果。

NavPathStack通过Push相关的接口去实现页面跳转的功能，主要分为以下三类:

  1. 普通跳转，通过页面的name去跳转，并可以携带param。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  1. 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并进行处理。
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
  console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
  1. 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
console.error('Push destination succeed.');
});

页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页（清除栈中所有页面）
this.pageStack.clear()

pop(animated?: boolean): NavPathInfo | undefined 弹出路由栈栈顶元素。
pop(result: Object, animated?: boolean): NavPathInfo | undefined弹出路由栈栈顶元素，并触发onPop回调传入页面处理结果。

popToName(name: string, animated?: boolean): number 回退路由栈到由栈底开始第一个名为name的NavDestination页面。
popToName(name: string, result: Object, animated?: boolean): number回退路由栈到由栈底开始第一个名为name的NavDestination页面，并触发onPop回调传入页面处理结果。

popToIndex(index: number, animated?: boolean): void回退路由栈到index指定的NavDestination页面。
popToIndex(index: number, result: Object, animated?: boolean): void回退路由栈到index指定的NavDestination页面，并触发onPop回调传入页面处理结果。

页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

replacePath(info: NavPathInfo, animated?: boolean): void将当前页面栈栈顶退出，将info指定的NavDestination页面信息入栈。
replacePath(info: NavPathInfo, options?: NavigationOptions): void替换页面栈操作，具体根据options中指定不同的LaunchMode，有不同的行为。

replacePathByName(name: string, param: Object, animated?: boolean): void

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

removeByIndexes(indexes: Array<number>): number将页面栈内索引值在indexes中的NavDestination页面删除。返回删除的NavDestination页面数量。
removeByName(name: string): number将页面栈内指定name的NavDestination页面删除。返回删除的NavDestination页面数量。
removeByNavDestinationId(navDestinationId: string): boolean将页面栈内指定navDestinationId的NavDestination页面删除。navDestinationId可以在NavDestination的onReady回调中获取，也可以在NavDestinationInfo中获取。返回是否成功删除该页面，true为删除成功。

navDestinationId string 是 删除的NavDestination页面的唯一标识符navDestinationId。

参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。

setInterception(interception: NavigationInterception): void设置Navigation页面跳转拦截回调。

该方法需要传入一个NavigationInterception对象，该对象包含三个回调函数：
willShow 页面跳转前回调，允许操作栈，在当前跳转生效。
didShow 页面跳转后回调，在该回调中操作栈会在下一次跳转生效。
modeChange Navigation单双栏显示状态发生变更时触发该回调。
说明
无论是哪个回调，在进入回调时页面栈都已经发生了变化。

开发者可以在willShow回调中通过修改路由栈来实现路由拦截重定向的能力。

this.pageStack.setInterception({
  willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
    operation: NavigationOperation, animated: boolean) => {
    if (typeof to === "string") {
      console.log("target page is navigation home page.");
      return;
    }
    // 将跳转到PageTwo的路由重定向到PageOne
    let target: NavDestinationContext = to as NavDestinationContext;
    if (target.pathInfo.name === 'PageTwo') {
      target.pathStack.pop();
      target.pathStack.pushPathByName('PageOne', null);
    }
  }
})

其他

详情参见：here。

moveToTop10+将由栈底开始第一个名为name的NavDestination页面移到栈顶。
moveIndexToTop10+
size10+获取栈大小。
disableAnimation11+关闭（true）或打开（false）当前Navigation中所有转场动画。
getParent11+
setInterception12+

子页面NavDestination

NavDestination
NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。

如果页面栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。
子页面结构如下所示：

3.子页面结构
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;
  build() {
   //NavDestination组件
    NavDestination() {Column() {...}}.title("NavDestinationTitle1")
    .onBackPressed(() => {
      const popDestinationInfo = this.pageInfos.pop() // 弹出路由栈栈顶元素
      return true
    })
  }
}

NavDestination是Navigation子页面的根容器，用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性，使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型，用于满足不同页面的诉求。

子页面显示类型

  1. 标准类型
    NavDestination组件默认为标准类型，此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

  2. 弹窗类型
    NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期，两者可以同时显示。

页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的形式开放。

其生命周期大致可分为三类，自定义组件生命周期、通用组件生命周期和自有生命周期。

华为开发文档原话：其中，aboutToAppear和aboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在，OnAppear和OnDisappear是组件的通用生命周期。剩下的六个生命周期为NavDestination独有。

自己理解：aboutToAppear和aboutToDisappear是自定义组件的生命周期，如果NavDestination外层包含自定义组件时则存在。OnAppear和OnDisappear是组件的通用生命周期。剩下的六个生命周期为NavDestination独有。
（句号的位置会让句子的意思改变）

生命周期时序如下图所示：
在这里插入图片描述

  • aboutToAppear(自定义)：在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
  • onWillAppear：NavDestination创建后，挂载到组件树之前执行，在该方法中更改状态变量会在当前帧显示生效。
  • onAppear（通用）：通用生命周期事件，NavDestination组件挂载到组件树时执行。
  • onWillShow：NavDestination组件布局显示之前执行，此时页面不可见（应用切换到前台不会触发）。
  • onShown：NavDestination组件布局显示之后执行，此时页面已完成布局。
  • onWillHide：NavDestination组件触发隐藏之前执行（应用切换到后台不会触发）。
  • onHidden：NavDestination组件触发隐藏后执行（非栈顶页面push进栈，栈顶页面pop出栈或应用切换到后台）。
  • onWillDisappear：NavDestination组件即将销毁之前执行，如果有转场动画，会在动画前触发（栈顶页面pop出栈）。
  • onDisappear（通用）：通用生命周期事件，NavDestination组件从组件树上卸载销毁时执行。
  • aboutToDisappear(自定义)：自定义组件析构销毁之前执行，不允许在该方法中改变状态变量。

页面监听和查询

为了方便组件跟页面解耦，在NavDestination子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。

页面信息查询

自定义组件提供queryNavDestinationInfo方法，可以在NavDestination内部查询到当前所属页面的信息，返回值为NavDestinationInfo，若查询不到则返回undefined。

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

     // NavDestination内的自定义组件
     @Component
     struct MyComponent {
       navDesInfo: uiObserver.NavDestinationInfo | undefined

       aboutToAppear(): void {
         this.navDesInfo = this.queryNavDestinationInfo();
       }

       build() {
           Column() {
             Text("所属页面Name: " + this.navDesInfo?.name)
           }.width('100%').height('100%')
       }
     }

页面状态监听

通过observer.on('navDestinationUpdate')提供的注册接口可以注册NavDestination生命周期变化的监听，使用方式如下：

   import { uiObserver } from '@kit.ArkUI';
   
   uiObserver.on('navDestinationUpdate', (info) => {
         console.info('NavDestination state update', JSON.stringify(info));
     });

也可以注册页面切换的状态回调，能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo，并且提供了UIAbilityContext和UIContext不同范围的监听：

// 在UIAbility中使用
 import { UIContext, uiObserver } from '@kit.ArkUI';

 // callBackFunc 是开发者定义的监听回调函数
 function callBackFunc(info: uiObserver.NavDestinationSwitchInfo) {}
 uiObserver.on('navDestinationSwitch', this.context, callBackFunc);

 // 可以通过窗口的getUIContext()方法获取对应的UIContent
 uiContext: UIContext | null = null;
 uiObserver.on('navDestinationSwitch', this.uiContext, callBackFunc);

页面转场

Navigation默认提供了页面切换的转场动画，通过页面栈操作时，会触发不同的转场效果（Dialog类型的页面默认无转场动画），Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

全局关闭：Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开所有转场动画。

   pageStack: NavPathStack = new NavPathStack()
   
    aboutToAppear(): void {
      this.pageStack.disableAnimation(true)
    }

单次关闭： NavPathStack中提供的Push、Pop、Replace等接口中可以设置animated参数，默认为true表示有转场动画，需要单次关闭转场动画可以置为false，不影响下次转场动画。

pageStack: NavPathStack = new NavPathStack()

this.pageStack.pushPath({ name: "PageOne" }, false)
this.pageStack.pop(false)

自定义转场

共享元素转场

Router切换Navigation

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。
组件导航 (Navigation)具有更强的功能和自定义能力，推荐使用该组件作为应用的路由框架。

二者对比

都支持跳转HSP中页面、跳转HAR中页面、 跳转传参、跳转单例页面、页面返回、页面返回传参、返回指定路由、转场动画等
差别在于：

业务场景NavigationRouter
一多能力支持，Auto模式自适应单栏跟双栏显示不支持
跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute
获取指定页面参数支持不支持
传参类型传参为对象形式传参为对象形式，对象中暂不支持方法变量
页面返回弹窗支持，通过路由拦截实现showAlertBeforeBackPage
路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute
路由栈清理clearclear
清理指定路由removeByIndexes & removeByName不支持
自定义转场动画支持支持，动画类型受限
屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0
geometryTransition共享元素动画支持（NavDestination之间共享）不支持
页面生命周期监听UIObserver.on(‘navDestinationUpdate’)UIObserver.on(‘routerPageUpdate’)
获取页面栈对象支持不支持
路由拦截支持通过setInercption做路由拦截不支持
路由栈信息查询支持getState() & getLength()
路由栈move操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）支持不支持
模态嵌套路由支持不支持

切换指导：here。

跨包动态路由

通过静态import页面再进行路由跳转的方式会造成不同模块之间的依赖耦合，以及首页加载时间长等问题。
动态路由设计的目的就是为了解决多个模块（HAR/HSP）之间可以复用相同的业务，各个业务模块之间解耦和路由功能扩展整合。

动态路由的优势：

  1. 路由定义除了跳转的URL以外，可以丰富的配置扩展信息，如横竖屏默认模式，是否需要鉴权等等，做路由跳转时统一处理。
  2. 给每个路由页面设置一个名字，按照名称进行跳转而不是文件路径。
  3. 页面的加载可以使用动态Import（按需加载），防止首个页面加载大量代码导致卡顿。

动态路由提供系统路由表和自定义路由表两种方式。

  1. 系统路由表相对自定义路由表，使用更简单，只需要添加对应页面跳转配置项，即可实现页面跳转。
  2. 自定义路由表使用起来更复杂，但是可以根据应用业务进行定制处理。

支持自定义路由表和系统路由表混用。

系统路由表

从API version 12开始，Navigation支持使用系统路由表的方式进行动态路由。各业务模块（HSP/HAR）中需要独立配置router_map.json文件，在触发路由跳转时，应用只需要通过NavPathStack提供的路由方法，传入需要路由的页面配置名称，此时系统会自动完成路由模块的动态加载、页面组件构建，并完成路由跳转，从而实现了开发层面的模块解耦。

其主要步骤如下：

  1. 在跳转目标模块的配置文件module.json5添加路由表配置：
 {
  "module" : {
    "routerMap": "$profile:route_map"
  }
}

在这里插入图片描述

  1. 添加完路由配置文件地址后，需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息：
{
  "routerMap": [
    {
      "name": "PageOne",//跳转页面名称
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",//跳转目标页在包内的路径，相对src目录的相对路径。
      "buildFunction": "PageOneBuilder",//跳转目标页的入口函数名称，必须以@Builder修饰。
      "data": {//data：应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。
        "description" : "this is PageOne"
      }
    }
  ]
}
  1. 在跳转目标页面中，需要配置入口Builder函数，函数名称需要和router_map.json配置文件中的buildFunction保持一致，否则在编译时会报错。
 // 跳转页面入口函数 (子页面)
  @Builder
  export function PageOneBuilder() {//跳转目标页的入口函数名称,须以@Builder修饰。
    PageOne()
  }
  @Component
  struct PageOne {
    pathStack: NavPathStack = new NavPathStack()
    build() {
      NavDestination() {。。。}
      .title('PageOne')
      .onReady((context: NavDestinationContext) => {
         this.pathStack = context.pathStack
      })
    }
  }
  1. 通过pushPathByName等路由接口进行页面跳转。(注意：此时Navigation中可以不用配置navDestination属性)
 @Entry
 //主页面
  @Component
  struct Index {
    pageStack : NavPathStack = new NavPathStack();//创建一个页面栈对象
    build() {
      Navigation(this.pageStack){//绑定页面栈对象
      }.onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
    }
  }

完成以上四步，但是一直跳转失败。。。继续找原因中。

自定义路由表

详情参见：here。

实现方案：

  1. 定义页面跳转配置项。
  • 使用资源文件进行定义，通过资源管理@ohos.resourceManager在运行时对资源文件解析。
  • 在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。
  1. 加载目标跳转页面，通过动态import将跳转目标页面所在的模块在运行时加载, 在模块加载完成后，调用模块中的方法，通过import在模块的方法中加载模块中显示的目标页面，并返回页面加载完成后定义的Builder函数。
  2. 触发页面跳转，在Navigation的navDestination属性执行步骤2中加载的Builder函数，即可跳转到目标页面。

End

weightOneMillion
关注
专栏目录
鸿蒙南向开发实战：容器类组件开发
shudaoshanQAQ的博客
04-25 1257
容器类组件，指能包含其它UI组件的组件.......
基于原生能力的组件封装
hongxiaomeng的博客
07-23 368
【鸿蒙开发教程】HarmonyOS Next 页面路由
HarmonyOS_001的博客
06-17 2042
即 Navigation + NavPathStack + navDestination// 主页用Navigation// 子页面用 NavDestination})有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
【HarmonyOS实战开发】鸿蒙内置组件详解
HarmonyOS_002的博客
07-09 931
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙开发进阶之鸿蒙组件化项目搭建
weixin_48091641的博客
04-25 1011
鸿蒙战略胜利，目前鸿蒙开发是一个急需要人才的缺口，在未来几年势必会有大量的鸿蒙岗位出现，目前所存在的鸿蒙岗位也是给出了相当高的薪资。事实证明，鸿蒙开发确实是一块香饽饽。作为华为自家的操作系统，正在逐步扩张市场份额。想要转行或者入行的朋友可以下手了。在这里，为大家提供一份我整理的鸿蒙开发学习资料，涵盖了UI开发、web、应用模型多个知识点，有需要的朋友可以扫描下方二维码，免费获取更多相关资料。
鸿蒙界面系统,鸿蒙系统是什么样的界面,详解华为鸿蒙系统
weixin_33245735的博客
05-27 1624
鸿蒙OS是基于微内核的全场景分布式OS，这是分布式架构首次用于终端OS，可以实现跨终端无缝协同体验。鸿蒙系统系统4大特点据悉，“微内核”是鸿蒙OS的特点之一。即微内核采用同一套操作平台，针对不同硬件能力的产品进行部署，并采用分布式架构，提升效率。对此余承东指出，Android有超过1亿行代码，内核就超过2000万行，但一般用户用到的代码不到8%，整体比较冗余，在IoT时代这既没必要也不需要。鸿蒙O...
鸿蒙开发逐个击破系列——组件导航 (Navigation)(推荐)和页面路由 (@ohos.router)
最新发布
qq_44160056的博客
08-12 992
提示：以下是本篇文章正文内容，下面案例可供参考易用性层面：Navigation天然具备标题、内容、回退按钮的功能联动，开发者可以直接使用此能力。Router若要实现此能力，需要自行定义；Navigation的页面是由组件构成，易于实现共享元素的转场。功能层面：Navigation天然支持一多，Router不支持；Navigation没有路由数量限制，Router限制32个；Navigation可以获取到路由栈NavPathStack，并对路由栈进行操作；
鸿蒙HarmonyOS应用开发——跨端迁移_openharmony 跨端迁移包括哪些
2401_84181125的博客
04-21 1218
​ c.系统权限设置(以api10目录为例): 将Sdk目录下的openharmony\api版本(如：10)\toolchains\lib\UnsgnedReleasedProfileTemplate.json文件中的”apl”:“normal_core”改为”apl”:“system_core”。如果应用不想让系统自动退出迁移源端应用，则可以设置不退出，参数定义见SUPPORT_CONTINUE_SOURCE_EXIT_KEY。// 若不需要自动迁移页面栈信息，则需要在此处设置应用迁移后进入的页面。
鸿蒙开发最佳实践——状态管理
qq_44160056的博客
08-11 1020
ArkUI采用了MVVM模式，其中ViewModel将数据与视图绑定在一起，更新数据的时候直接更新视图。如下图所示：在ArkUI的开发过程中，如果没有选择合适的装饰器或合理的控制状态更新范围，可能会导致以下问题：状态和UI的不一致，如同一状态的界面元素展示的UI不同，或UI界面展示的不是最新的状态。非必要的UI视图刷新，如只修改局部组件状态时导致组件所在页面的整体刷新。
鸿蒙开源第三方组件——日期和时间处理组件JodaTime-ohos
VincenZsw的博客
06-21 1902
前言 基于安卓平台的日期和时间处理组件JodaTime-ohos（https://github.com/dlew/joda-time-android）， 实现鸿蒙化迁移和重构。代码已经开源到（https://gitee.com/isrc_ohos/joda-time_ohos），欢迎各位下载使用并提出宝贵意见！ 背景 JodaTime-ohos是一个日期和时间处理组件，可以获取标准时间、当前时间、相对时间、格式化时间等多种形式的时间，并支持对各类时间进行计算和判断。该组...
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
【鸿蒙】Harmony应用开发-目录导航
Tomes.V.White
03-11 538
鸿蒙系统架构
HarmonyOS从简单页面开始(1)，2024年最新HarmonyOS鸿蒙开发环境页面设计
2401_84165953的博客
04-13 786
TextInput({ placeholder: ‘请输入帐号’ })TextInput({ placeholder: ‘请输入密码’ })@Entry@Componentbuild() {Column() {Button(‘设置光标位置’)})@Entry@Componentbuild() {Column() {TextInput({ placeholder: ‘请输入账号’ })
鸿蒙系统北斗导航系统,这个“北斗导航” App，竟欺骗了几百万人！
weixin_42365492的博客
05-31 3524
近期有不少朋友问我，北斗导航在哪里下载？应用商城里面的那些应用哪个才是真正的北斗导航？如下图，一个“北斗导航”APP竟有347万的下载量。其实这里给大家说明一下，北斗导航并非应用，而且北斗卫星导航系统也并没有发布任何应用。只要你的手机芯片支持北斗导航系统，那么你的手机就能使用它。但我们要如何知道自己的手机是否支持北斗导航系统呢？其实在手机的参数中我们就能看到。比如华为P40 ，这个我们在官网的规格...
鸿蒙HarmonyOS APP开发入门3——组件（九 按钮组件 ）—(1)
2401_84181942的博客
04-14 363
利用圆形按钮，胶囊按钮，文本组件可以绘制出如下拨号盘的UI界面。
【最新鸿蒙应用开发】——Navigation路由管理
m0_68038853的博客
07-09 1299
一多开发的项目适合使用Navigation进行统一的页面路由管理。Navigation还提供统一的标题栏、工具栏、菜单栏，并且自带导航返回功能。另外，Navigation还支持一些Router不支持的功能，比如：自带的路由拦截功能，自带的沉浸式功能等等。
鸿蒙系统导航仪,华为鸿蒙os2.0系统支持的手机型号,华为鸿蒙系统官方下载入口...
weixin_39532466的博客
06-01 442
最近华为最新的公布会上已经上线了最新的华为鸿蒙os2.0系统，现在照样处于内测的阶段，人人若是想要感受全新的玩机体验，那么就可以来这里申请公测哦，不外需要适配专门的机型，人人可以来看一下自己是否匹配。华为鸿蒙os2.0系统支持的手机型号华为消费者营业软件部总裁王成录示意，现在面向开发者开放鸿蒙OS系统能力、开发工具与API等，为人人带来智能家居、智慧办公、出行、运动康健、影音娱乐等差别场景的全新体...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：NavDestination）
m0_64420071的博客
03-11 1152
ArkTS声明式开发（基础手势：NavDestination）
导航菜单的实现
sanchuanhi的专栏
02-17 511
总结几种简单的导航菜单的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weightOneMillion

感谢未来的亿万富翁捧个钱场~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值