快捷導(dǎo)航

鴻蒙HarmonyOS開發(fā):Navigation路由導(dǎo)航功能和實踐

更新時間：2024年08月24日 09:29:59 作者：Datcon

Navigation作為HarmonyOS?NEXT中推薦的路由管理方案,以其強大的功能和靈活性,為開發(fā)者提供了高效的頁面路由管理能力,本文將深入探討基于Navigation的路由管理機制,從原理到實踐,帶您一步步領(lǐng)略Navigation組件的強大功能和靈活應(yīng)用,

在HarmonyOS NEXT的開發(fā)中，掌握高效的路由管理是構(gòu)建流暢用戶體驗的關(guān)鍵。本文將深入探討基于Navigation的路由管理機制，從原理到實踐，帶您一步步領(lǐng)略Navigation組件的強大功能和靈活應(yīng)用。

Navigation路由導(dǎo)航概覽

Navigation組件是HarmonyOS NEXT中用于頁面路由導(dǎo)航的根視圖容器，支持單頁面、分欄和自適應(yīng)三種顯示模式。它不僅適用于模塊內(nèi)和跨模塊的路由切換，還能在多端部署場景下自動適配窗口顯示大小，實現(xiàn)自然流暢的轉(zhuǎn)場體驗。

核心組件與概念

Title: 標(biāo)題欄，通過title屬性設(shè)置。
NavContent: 內(nèi)容區(qū)域，首頁顯示導(dǎo)航內(nèi)容或非首頁顯示子組件。
ToolBar: 工具欄，通過toolbarConfiguration配置。
NavDestination: 子頁面根容器，分為STANDARD和DIALOG兩種類型。
NavPathStack: 路由棧，管理NavDestination組件的路由跳轉(zhuǎn)。

生命周期管理

Navigation的頁面路由由NavDestination組件構(gòu)成，支持豐富的生命周期函數(shù)，如aboutToAppear、onAppear、onDisappear等，為頁面的顯示和隱藏提供了精細的控制。

Navigation與Router的比較

HarmonyOS支持兩套路由機制：Navigation和Router。相較于Router，Navigation在易用性、功能性和性能層面展現(xiàn)出顯著優(yōu)勢：

易用性：Navigation提供標(biāo)題、內(nèi)容、回退按鈕的聯(lián)動功能，頁面由組件構(gòu)成，便于實現(xiàn)共享元素的轉(zhuǎn)場。
功能性：Navigation支持一多、無路由數(shù)量限制，可操作路由棧，支持模態(tài)對話框中的路由嵌套。
性能：Navigation在傳遞參數(shù)時性能更優(yōu)，支持組件動態(tài)加載。

路由跳轉(zhuǎn)場景實踐

頁面間跳轉(zhuǎn)

// 創(chuàng)建NavPathStack對象pageStack
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();

// 構(gòu)建路由表pageMap
@Builder
PageMap(pageName: string) {
  if (pageName === 'loginPage') {
    loginPageView();
  } else if (pageName === 'mainPage') {
    mainPageView();
  }
}

// 在build中使用Navigation組件
Navigation(this.pageStack) {
  // ...
  Button('login').onClick(ent => {
    let pathInfo: NavPathInfo = new NavPathInfo('loginPage', null);
    this.pageStack.pushDestination(pathInfo, true);
  });
}.navDestination(this.pageMap);

頁面間參數(shù)傳遞

// 發(fā)起頁傳遞參數(shù)
let loginParam: LoginParam = new LoginParam();
let pathInfo: NavPathInfo = new NavPathInfo('loginPage', loginParam, (popInfo: PopInfo) => {
  let loginParam: LoginParam = popInfo.info.param as LoginParam;
  // ...
});

this.pageStack.pushDestination(pathInfo, true);

// 目標(biāo)頁面接收參數(shù)
build() {
  NavDestination() {
    // ...
  }.onReady(cxt => {
    this.loginParam = cxt.pathInfo.param as LoginParam;
    // ...
  });
}

跨模塊頁面跳轉(zhuǎn)

// 導(dǎo)入模塊目標(biāo)頁自定義組件
import { loginPageInHSP } from 'library/src/main/ets/pages/loginPageInHSP';

// 在pageMap中配置路由
@Builder pageMap(name: string) {
  if (name === 'loginPageInHSP') {
    loginPageInHSP();
  }
}

// 使用pushDestination進行跳轉(zhuǎn)
let pathInfo: NavPathInfo = new NavPathInfo('loginPageInHSP', loginParam, (popInfo: PopInfo) => {});
this.pageStack.pushDestination(pathInfo, true);

頁面轉(zhuǎn)場

// 默認(rèn)轉(zhuǎn)場動畫
this.pageStack.pushDestination(pathInfo, true);

// 自定義轉(zhuǎn)場動畫
Navigation(this.pageStack) {
  // ...
}.customNavContentTransition((from, to, operation) => {
  // 實現(xiàn)自定義動畫邏輯
});

共享元素轉(zhuǎn)場

// 起始頁為需要實現(xiàn)共享元素轉(zhuǎn)場的元素添加geometryTransition屬性
Column() {
  Image($r('app.media.startIcon'))
    .geometryTransition('1')
    .width(100)
    .height(100);
}

// 目的頁使用相同的id進行共享元素轉(zhuǎn)場
Column() {
  Image($r('app.media.startIcon'))
    .geometryTransition('1')
    .width(200)
    .height(200);
}

其他常見業(yè)務(wù)功能場景

彈窗頁面跳轉(zhuǎn)

@Component
struct PrivacyDialog {
  // ...
  build() {
    NavDestination() {
      // ...
    }.mode(NavDestinationMode.DIALOG);
  }
}

頁面埋點

uiObserver.on("navDestinationUpdate", (info) => {
  if (info.state == 0) {
    console.info('page ON_SHOWN:' + info.name.toString());
  } else if (info.state == 1) {
    console.info('page ON_HIDE' + info.name.toString());
  }
});

頁面返回彈窗確認(rèn)

RouterManager.setInterception({
  willShow: (from, to, operation, animated) => {
    // 根據(jù)頁面跳轉(zhuǎn)邏輯實現(xiàn)彈窗確認(rèn)邏輯
  },
  // ...
});

路由框架設(shè)計

系統(tǒng)跨模塊路由框架

{
  "module": {
    // ...
    "routerMap": "$profile:router_map"
  }
}

自定義跨模塊路由框架

定義路由管理模塊，注冊和解析路由

使用@build構(gòu)建函數(shù)和WrappedBuilder封裝構(gòu)建路由頁面

動態(tài)導(dǎo)入路由模塊并完成路由跳轉(zhuǎn)

從Router到Navigation的遷移

基礎(chǔ)容器構(gòu)建

@Entry
@Component
struct IndexRouterMap {
  private pageStack: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    RouterManager.createNavPathStack(this.pageStack);
    // ...
  }

  build() {
    Navigation(this.pageStack) {
      // ...
    }.hideNavBar(true);
  }
}

頁面組件改造

@Component
struct MainPage {
  // ...
}

@Builder
export function getMainPageRouterMap() {
  MainPage();
}

轉(zhuǎn)場動畫和生命周期切換

適配Navigation的轉(zhuǎn)場動畫和生命周期

使用customNavContentTransition事件和生命周期函數(shù)

路由框架適配

若之前使用Router構(gòu)建了路由框架，需對路由框架進行Navigation化處理，適配Navigation的API和生命周期

總結(jié)

Navigation作為HarmonyOS NEXT中推薦的路由管理方案，以其強大的功能和靈活性，為開發(fā)者提供了高效的頁面路由管理能力。通過本文的實踐指導(dǎo)，希望能幫助開發(fā)者深入理解并掌握Navigation的使用，構(gòu)建出更加流暢和高效的應(yīng)用體驗。

到此這篇關(guān)于鴻蒙HarmonyOS開發(fā):Navigation路由導(dǎo)航功能和實踐的文章就介紹到這了,更多相關(guān)HarmonyOS開發(fā):Navigation內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: