创建页面流程

本章给出 Feature 页面从创建到可跳转的最小步骤。示例仅说明结构，业务字段请按项目实际替换。

1. 新建模块（可选）

如果是新业务模块，请先创建模块。模块创建流程见：模块化设计。

2. 新增路由常量

在 core/navigation/src/main/ets/goods/GoodsRoutes.ts 中补充路由 key：

/**
 * @file Goods 模块路由常量定义
 */
export const GoodsRoutes = {
  GoodsList: "goods/goods-list"
};

路由注册的完整流程请参考：路由配置。

3. 创建 ViewModel

ViewModel 只负责状态与业务逻辑，不写布局。初始可以保持最小结构，后续按业务补充。

import { BaseViewModel } from "base";

/**
 * @file 商品列表页 ViewModel
 */
@ObservedV2
export default class GoodsListViewModel extends BaseViewModel {
}

4. 创建 View

View 只负责渲染，所有状态来自 ViewModel。

import { ColumnCenter } from "designsystem";
import { AppNavDestination } from "ui";
import GoodsListViewModel from "../viewmodel/GoodsListViewModel";

/**
 * @file 商品列表页视图
 */
@ComponentV2
export struct GoodsListPage {
  /**
   * 商品列表页 ViewModel
   */
  @Local
  private vm: GoodsListViewModel = new GoodsListViewModel();

  /**
   * 构建商品列表页
   * @returns {void} 无返回值
   */
  build(): void {
    AppNavDestination({
      title: $r("app.string.goods_list_title"),
      viewModel: this.vm
    }) {
      this.GoodsListContent();
    };
  }

  /**
   * 构建页面内容
   * @returns {void} 无返回值
   */
  @Builder
  private GoodsListContent(): void {
    ColumnCenter() {
      Text("商品列表页面");
    };
  }
}

5. 创建 Nav

页面入口只负责调用页面本身。

import { GoodsListPage } from "../view/GoodsListPage";

/**
 * @file 商品列表页导航入口
 * @returns {void} 无返回值
 */
@Builder
export function GoodsListNav(): void {
  GoodsListPage();
}

6. 注册 Graph

在模块 *Graph.ets 中调用 RouteBuild.register 进行注册。

import { RouteBuild, RouteGraph } from "navigation";
import { GoodsRoutes } from "navigation/src/main/ets/goods/GoodsRoutes";
import { GoodsListNav } from "./GoodsListNav";

/**
 * @file Goods 模块导航图
 */
export class GoodsGraph implements RouteGraph {
  /**
   * 注册 Goods 模块路由
   * @returns {void} 无返回值
   */
  register(): void {
    RouteBuild.register(GoodsRoutes.GoodsList, wrapBuilder(GoodsListNav));
  }
}

7. 模块导出与入口注册

模块 Index.ets 导出 *Graph，入口模块统一注册。

/**
 * @file Goods 模块统一导出
 */
export { GoodsGraph } from "./src/main/ets/navigation/GoodsGraph";

import { AuthGraph } from "auth";
import { GoodsGraph } from "goods";
import { MainGraph } from "main";
import { UserGraph } from "user";

/**
 * @file 入口 Ability 路由注册
 */
export default class EntryAbility {
  /**
   * 注册所有模块路由
   * @returns {void} 无返回值
   */
  registerRouter(): void {
    new MainGraph().register();
    new AuthGraph().register();
    new UserGraph().register();
    new GoodsGraph().register();
  }
}

完成以上步骤后，该页面即可被导航跳转。