页面模板

为方便快速创建标准化的 Feature 页面，可使用以下模板。将代码复制到 DevEco Studio 的 File and Code Templates 中，即可通过模板快速生成 View / ViewModel / Nav 文件。

使用方式：DevEco Studio > Settings > Editor > File and Code Templates > Files，点击 + 新增模板，粘贴对应代码，并在 Edit Variables 中配置占位符（如 PAGE_NAME、CN_NAME）。

View 模板

import { AppNavDestination } from "ui";
import ${PAGE_NAME}ViewModel from "../viewmodel/${PAGE_NAME}ViewModel";

/**
 * @file ${CN_NAME}页面视图
 */
@ComponentV2
export struct ${PAGE_NAME}Page {
  /**
   * ${CN_NAME}页面 ViewModel
   */
  @Local
  private vm: ${PAGE_NAME}ViewModel = new ${PAGE_NAME}ViewModel();

  /**
   * 构建${CN_NAME}页面
   * @returns {void} 无返回值
   */
  build(): void {
    AppNavDestination({
      title: "${CN_NAME}",
      viewModel: this.vm
    }) {
      this.${PAGE_NAME}Content();
    };
  }

  /**
   * ${CN_NAME}内容视图
   * @returns {void} 无返回值
   */
  @Builder
  private ${PAGE_NAME}Content(): void {
    Text("${CN_NAME}");
  }
}

ViewModel 模板

import { BaseViewModel } from "base";

/**
 * @file ${CN_NAME}页面 ViewModel
 */
@ObservedV2
export default class ${PAGE_NAME}ViewModel extends BaseViewModel {
}

Nav 模板

import { ${PAGE_NAME}Page } from "../view/${PAGE_NAME}Page";

/**
 * @file ${CN_NAME}页面导航入口
 * @returns {void} 无返回值
 */
@Builder
export function ${PAGE_NAME}Nav(): void {
  ${PAGE_NAME}Page();
}

建议变量

• PAGE_NAME（如 GoodsList）
• CN_NAME（如 商品列表）

使用建议

• 模板生成后按需补充实际业务字段与交互逻辑。
• 创建页面流程可参考：创建页面流程。