鸿蒙应用入门级开发者认证实验八（点餐）

一些项目的目录结构基于MVVM（Model-View-ViewModel）模式设计。

📂 1. entryability（Ability层）处理应用生命周期和系统交互，继承UIAbility的类（如EntryAbility），实现onCreate/onWindowStageCreate等生命周期方法，通过windowStage.loadContent()加载UI页面

// DetailsAbility.ets
export default class DetailsAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent("pages/DetailsPage"); // 加载页面
  }
}

📂 2. pages（页面层）定义具体页面的UI结构和布局。使用@Entry和@Component装饰的页面组件，通过ArkUI声明式语法构建界面（如Column/List等组件），调用view中的可复用组件

// DetailsPage.ets
@Entry @Component
struct DetailsPage {
  build() {
    Column() {
      PreviewerComponent()  // 来自view目录的组件
      BottomBarComponent()   // 来自view目录的组件
    }
  }
}

📂 3. view（视图组件层）封装可复用的UI组件，无状态的自定义组件（如ClassifyItem/CourseItem），纯UI渲染逻辑，不处理业务数据，通过参数接收数据（如classifyName/isSelected），组件可在多个页面复用

**📂 4. **viewmodel（业务逻辑层）管理数据和业务逻辑。数据获取（如网络请求loadDetails()）、状态管理（如购物车数据/用户信息）、数据处理（过滤/排序等）。viewmodel可独立单元测试

entryability → 初始化应用
    ↓
pages → 组合view组件
    ↓ 双向绑定
viewmodel → 处理数据

💡 这种结构在华为官方示例（如MultiShopping项目）中被广泛采用，尤其适合中大型项目。小型项目可简化合并view和pages，但保持viewmodel分离仍是最佳实践。

点餐结算支付项目源码

ets

├─common
│      CommonConstants.ets
│
├─entryability
│      EntryAbility.ets
│
├─entrybackupability
│      EntryBackupAbility.ets
│
├─entryformability
│      EntryFormAbility.ets
│
├─order
│  └─pages
│          OrderCard.ets
│
├─orderability
│      OrderAbility.ets
│
├─pages
│      Index.ets
│      Login.ets
│      Pay.ets
│
├─payability
│      PayAbility.ets
│
├─view
│      ClassifyItem.ets
│      FoodItem.ets
│      LoginInfoView.ets
│      MineView.ets
│      OrderView.ets
│      PayView.ets
│
└─viewmodel
        ClassifyModel.ets
        FoodData.ets
        FoodModel.ets
        MainViewModel.ets

主脉络

1. 用户流程模块（核心路径）

   • Login.ets → Index.ets → OrderView.ets/Pay.ets
   • 对应能力：EntryAbility.ets（主入口）→ OrderAbility.ets（订单）→ PayAbility.ets（支付）

2. 业务能力层

   • orderability/OrderAbility.ets：订单处理能力
   • payability/PayAbility.ets：支付能力
   • entryformability/EntryFormAbility.ets：服务卡片能力（扩展功能）

3. 数据管理层

   • viewmodel/ 目录：
     • FoodModel.ets（菜品数据）
     • ClassifyModel.ets（分类数据）
     • MainViewModel.ets（全局状态）

**✅ **第一优先级（核心流程）

**⚠️ **第二优先级（支撑模块）

后续扩展

• EntryBackupAbility.ets：跨设备迁移能力
• entryformability/：服务卡片相关
• common/CommonConstants.ets：常量定义

代码建议

1. 纵向穿透式阅读（核心路径） 按用户操作流：Login.ets → 登录后跳转Index.ets → 下单触发OrderView.ets → 支付调用Pay.ets

2. 横向关联分析

   • 在Index.ets中查看如何调用：

     // 典型调用示例
     FoodItem({ foodData: foodModel.currentFood })
     ClassifyItem({ categories: classifyModel.categories })
     

   • 在OrderView.ets中观察数据绑定：

     // 订单数据来源
     OrderCard({ order: mainViewModel.currentOrder })
     

3. 关键切入点

   • 全局状态：优先阅读MainViewModel.ets中的@State和@Link变量
   • 跨模块通信：检查OrderAbility.ets和PayAbility.ets的startAbilityForResult()调用

从Index.ets开始逐层调试，使用console.log()输出MainViewModel状态变化，再逐步深入支付等复杂模块。遇到跨能力调用时，优先阅读EntryAbility.ets中的路由逻辑。

以上每个Ability独立占用目录，可能因为Ability作为鸿蒙应用的基本执行单元（如入口、订单、支付），每个都代表独立功能模块。独立目录强制物理隔离，避免代码耦合，符合“高内聚、低耦合”原则。例如支付能力 (PayAbility) 的修改不会意外影响订单模块 (OrderAbility)，提升系统稳定性。

若需复用公共逻辑（如网络请求工具）：创建共享目录如 common/utils 存放公共代码，通过导入机制引用：

// 在PayAbility.ets中复用工具
import { httpRequest } from '../../common/utils/NetUtil'