قسمت 6: جدول مسیر سیستم ناوبری (توصیه شده)

ek3nk4r 2025-05-27

0 0 خواندن این مطلب 2 دقیقه زمان میبرد

قسمت 6: جدول مسیر سیستم ناوبری (توصیه شده)

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در توسعه برنامه Harmonyos ، مدیریت مسیریابی صفحه اصلی پروژه های چند صفحه ای است. در حالی که ماژول های مسیریابی سفارشی انعطاف پذیر هستند ، آنها اغلب برای پیکربندی و نگهداری پیچیده هستند. از زمان API 12 ، Harmonyos به طور رسمی یک ویژگی جدول مسیر سیستم را ارائه می دهد ، که ثبت نام و ناوبری صفحه را بسیار ساده می کند. در این مقاله نحوه استفاده از جدول مسیر سیستم برای ناوبری صفحه کارآمد و استاندارد شده است.

فهرست مطالب

1. استفاده اساسی از جدول مسیر سیستم

1. پیکربندی `module.json5` در ماژول هدف

خواه در entry یا یک ماژول تجاری (مانند login) ، پیکربندی زیر را به اضافه کنید module.json5:

{
  "module": {
    "routerMap": "$profile:route_map"
  }
}

2. ایجاد `route_map.json` و صفحات را ثبت کنید

ایجاد کردن route_map.json در resources/base/profile دایرکتوری به عنوان مثال ، در login ماژول:

{
  "routerMap": [
    {
      "name": "LoginPage",
      "pageSourceFile": "src/main/ets/pages/LoginPage.ets",
      "buildFunction": "RegisterBuilder",
      "data": {
        "description": "this is LoginPage"
      }
    }
  ]
}

name: نام صفحه ، برای ناوبری استفاده می شود.
pageSourceFile: مسیر فایل منبع صفحه ، نسبت به src دایرکتوری
buildFunction: عملکرد ورود به صفحه ، باید با آن تزئین شود @Builderبشر
data: زمینه های سفارشی ، از طریق getConfigInRouteMap API

3. عملکرد ورود صفحه را ثبت کنید

در صفحه هدف (به عنوان مثال ، LoginPage.ets) ، یک تابع تزئین شده با @Builder:

// Page entry function for navigation
@Builder
export function RegisterBuilder() {
  LoginPage()
}

@Component
struct LoginPage {
  pathStack: NavPathStack = new NavPathStack()
  build() {
    NavDestination() {}
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
    })
  }
}

4. با استفاده از صفحات حرکت کنید `pushPathByName`

با استفاده از صفحات می توانید حرکت کنید pushPathByName، بدون حفظ دستی navDestination:

pageStack: NavPathStack = new NavPathStack();
build() {
  Navigation(this.pageStack){}
    .onAppear(() => {
      this.pageStack.pushPathByName("LoginPage", null, false);
    })
    .hideNavBar(true)
}

2. کلاس بهینه سازی و مسیریابی ساختار پروژه

1. الزامات نسخه

به API 12 (Beta1) یا بالاتر نیاز دارد. در build-profile.json5:

"compileSdkVersion": "5.0.0(12)",
"compatibleSdkVersion": "5.0.0(12)",

2. ماژول روتر سفارشی را حذف کنید

جدول مسیر سیستم بیشترین نیازها را در بر می گیرد ، بنابراین می توانید ماژول روتر سفارشی و منابع مرتبط با آن را برای ساده کردن ساختار پروژه حذف کنید.

3. توصیه می شود: `RouterUtil` کلاس ابزاری

برای مدیریت ناوبری ، بازگشت و جایگزینی عملیات به روشی یکپارچه ، محاصره a RouterUtil کلاس ابزار:

export class RouterUtil {
  static navPathStack: NavPathStack = new NavPathStack();
  static routerStack: Array<string> = new Array();

  public static push(name: string, parm: object | undefined = undefined,
    callback: Callback<PopInfo> | undefined = undefined) {
    RouterUtil.routerStack.push(name);
    RouterUtil.navPathStack.pushPathByName(name, parm, callback, true)
  }

  public static replace(name: string, parm: object | undefined = undefined) {
    RouterUtil.routerStack.pop();
    RouterUtil.routerStack.push(name);
    RouterUtil.navPathStack.replacePathByName(name, parm, true)
  }

  public static pop(result?: Object) {
    if (result !== undefined) {
      RouterUtil.navPathStack.pop(result, true)
    } else {
      RouterUtil.navPathStack.pop(true)
    }
  }

  public static popHome(){
    RouterUtil.routerStack.length = 0;
    RouterUtil.navPathStack.clear()
  }
}