HarmonyOS 鸿蒙Next开发案例：运动健康类行业官方模板介绍 （Part1：健身房模板）

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了运动健康类行业的一个官方模板——健身房元服务模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 行业洞察

   1）行业痛点：

   • 课程质量参差不齐：线上教学动作不规范，训练计划缺乏科学性，容易导致运动损伤
   • 个性化不足：缺乏根据用户体质数据（BMI/体脂率）、健身目标（减脂/增肌/康复）的智能训练方案
   • 装备获取不便：健身器械推荐与购买渠道割裂，小众装备难以一站式配齐
   • 数据价值未挖掘：用户训练数据未形成长期趋势分析，无法提供进阶建议
   • 互动体验差：训练成果分享形式单一，缺乏专业教练实时动作矫正指导
   
   

2. 优秀案例概览

   基于以上行业分析，本期将介绍鸿蒙生态市场运动健康类行业模板——健身房元服务模板，为行业提供常用功能的开发案例，提供了健身房信息展示、课程展示、卡项展示、课程预定、卡项购买、会员中心等能力。

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
   • 集成华为账号、支付等服务，只需做少量配置和定制即可快速实现华为账号的登录、一键拨号等功能

首页	预约	我的

本模板主要页面及核心功能如下所示：

健身房
 ├─ 首页
 │    ├─ 运动详情
 │    │    ├─ 运动对应卡项列表
 │    │    └─ 远动对应课程列表
 │    ├─ 本店卡项
 │    │    ├─ 卡项名称搜索
 │    │    └─ 本店卡项列表
 │    │         └─ 卡项详情
 │    │              ├─ 咨询
 │    │              └─ 提交订单
 │    ├─ 课程列表
 │    │    ├─ 课程名称搜索
 │    │    └─ 课程列表
 │    │         └─ 课程详情
 │    │              ├─ 咨询
 │    │              └─ 立即预约
 │    └─ 俱乐部环境
 │    
 ├─ 预约
 │    └─ 课程预约
 │         ├─ 课程搜索
 │         └─ 新增预约
 └─ 我的
      ├─ 会员卡
      │    ├─ 个人信息编辑-头像、昵称、手机号
      │    └─ 会员卡展示-卡号、会员码、余额
      ├─ 卡项
      │    └─ 会员已购卡项列表
      ├─ 预约记录
      │    ├─ 状态分类
      │    │    ├─ 全部
      │    │    ├─ 待使用
      │    │    ├─ 已完成
      │    │    ├─ 已过期
      │    │    └─ 已取消
      │    ├─ 预约记录列表
      │    └─ 预约记录详情
      ├─ 我的订单
      │    ├─ 状态分类
      │    │    ├─ 全部
      │    │    ├─ 已完成
      │    │    └─ 待支付
      │    ├─ 订单列表
      │    └─ 订单详情
      │    
      └─ 会员充值

二、应用架构设计

1. 分层模块化设计

• **产品定制层：**专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
• **基础特性层：**用于存放相对独立的功能UI和业务逻辑实现。
  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
• **公共能力层：**存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案（待补充）

1. 账号管理 1）场景说明 2）技术方案
2. 运动详情 1）场景说明 2）技术方案
3. 课程预约 1）场景说明 2）技术方案
4. 会员卡 1）场景说明 2）技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示：

FitnessCenter  
├─common
│  ├─external_interactions
│  │  └─src
│  │      └─main
│  │         └─ets
│  │            ├─model
│  │            │      MockModel.ets                               // 公共数据模型，包含模板用到的所有数据类
│  │            │      
│  │            └─Service
│  │                    DateUtil.ets                               // 日期时间工具
│  │                    MockService.ets                            // 模拟数据服务类
│  │              
│  └─uiComponents
│      └─src
│          └─main
│             └─ets
│                └─components
│                    │  TitleBar.ets                               // 公共标题栏组件
│                    │  
│                    └─consulting
│                           Consulting.ets                         // 公共咨询组件
│                                 
├─features
│  ├─card
│  │  └─src
│  │      └─main
│  │         └─ets
│  │            ├─components
│  │            │      Card.ets                                    // 单卡项卡片组件
│  │            │      
│  │            ├─generated
│  │            │      RouterBuilder.ets                           // 路由构建类
│  │            │      
│  │            └─pages
│  │                    BuyCard.ets                                // 卡项购买页
│  │                    CardDetail.ets                             // 卡项详情页
│  │                    Order.ets                                  // 订单列表页
│  │                    OrderDetail.ets                            // 订单详情页
│  │                    ShowAllCards.ets                           // 本店卡项页
│  │                    UserCards.ets                              // 已购卡项列表页
│  ├─course      
│  │  └─src
│  │      └─main
│  │         └─ets
│  │            ├─components
│  │            │  ├─book
│  │            │  │      AddBooking.ets                            // 新增预约页
│  │            │  │      BookingDetail.ets                         // 预约详情页
│  │            │  │      BookingRecord.ets                         // 预约记录列表页
│  │            │  │      BookMain.ets                              // 课程预约入口页
│  │            │  │      ConfirmBooking.ets                        // 确认预约页
│  │            │  │      
│  │            │  └─course
│  │            │          Course.ets                               // 单课程卡片组件
│  │            │          CourseDetail.ets                         // 课程详情页
│  │            │          ShowAllCourse.ets                        // 本店所有课程列表页
│  │            │          
│  │            └─generated
│  │                    RouterBuilder.ets                           // 路由构建类         
│  └─vip
│      └─src
│          └─main
│             └─ets
│                ├─bean
│                │      VipRechargeItem.ets                         // 充值金额类
│                │      
│                ├─components
│                │      QrCodeDialog.ets                            // 会员码弹窗
│                │      UserInfoCard.ets                            // 用户会员卡片
│                │      
│                ├─data
│                │      BasicDataSource.ets                         // lazyForeach数据源基础类
│                │      VipRechargeDataSource.ets                   // 充值金额列表类
│                │      
│                ├─generated
│                │      RouterBuilder.ets                           // 路由构建类
│                │      
│                └─pages
│                       MineInfoPage.ets                            // 个人信息页
│                       RechargePage.ets                            // 会员充值页
│                      
└─products
   └─phone
       └─src
           └─main
              └─ets
                    ├─entryability
                   │      EntryAbility.ets                            // 应用主窗口
                    │      
                    ├─generated
                    │      RouterBuilder.ets                           // 路由构建类
                    │      
                    ├─pages
                   │      ClubEnvironmentDetail.ets                   // 俱乐部环境页
                   │      FormCard.ets                                // 健身房服务卡片页
                    │      Home.ets                                    // 首页
                    │      Index.ets                                   // 主页面
                    │      Mine.ets                                    // 我的
                    │      SportDetail.ets                             // 运动详情页
                    │
                    └─phoneformability
                           PhoneFormAbility.ets                        // 服务卡片窗口

2. 关键代码解读（待补充）

• 待补充

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由使用。

1）整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

• 模板代码获取：
  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。
  • 通过开源仓访问源码，仓库地址。
• 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
• 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
  • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
  • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
• 根据自己的业务内容修改模板，进行定制化开发。

2）按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

• 组件代码获取：
  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。
• 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。
• **根据API参考和示例代码