HarmonyOS 鸿蒙Next官方模板优秀案例（第13期：运动健康 · 运动健身） 💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡

★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★

★ 一键直达 HarmonyOS 行业解决方案 ，运动健康行业解决方案 ★

👉 覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！

【第13期】运动健康 · 运动健身

一、概述

1、行业洞察

• 行业诉求：

运动健康类 APP 的核心及关键在于精准的数据采集与分析、个性化的运动/健康管理方案制定、良好的用户体验设计以及社交激励机制等方面。

• 行业常用三方SDK

说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”

2、案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场运动健康类行业模板——运动健身应用模板，为行业提供常用功能的开发案例，模板主要分首页、课程、计划和我的四大模块。

• Stage开发模型 + 声明式UI开发范式。
• 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
• 本模板为运动健身类应用提供了常用功能的开发样例，已集成华为账号等服务，只需做少量配置和定制即可快速实现华为账号的登录、媒体播放等功能。

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

运动健身模板
 ├──引导页                           
 │   ├──目标  
 │   │   ├── 性别                          
 │   │   ├── 目标                             
 │   │   └── 想锻炼的部位                   
 │   │         
 │   ├──身体数据        
 │   │   ├── 年龄                          
 │   │   ├── 身高                             
 │   │   └── 体重和目标体重  
 │   │                    
 │   └──关于你  
 │       ├── 是否存在伤病困扰                     
 │       └── 喜欢哪类运动、运动频次、期望练习难度 
 │
 ├──首页                           
 │   ├──轮播页  
 │   │   ├── 课程封面  
 │   │   └── 课程详情页     
 │   │                    
 │   ├──常识普及  
 │   │   ├── 运动健身常识普及  
 │   │   └── 常识普及详情页 
 │   │
 │   ├──热门课程    
 │   │   ├── 课程封面、练习难度、练习时长  
 │   │   └── 热门课程详情页 
 │   │
 │   └──进阶课程    
 │       ├── 课程封面、练习难度、练习时长  
 │       └── 进阶课程详情页 
 │
 ├──课程                           
 │   ├──顶部栏  
 │   │   ├── 搜索 
 │   │   └── 课程筛选                   
 │   │         
 │   ├──热门课程    
 │   │   ├── 课程封面、练习难度、练习时长  
 │   │   └── 热门课程详情页 
 │   │
 │   ├──进阶课程    
 │   │   ├── 课程封面、练习难度、练习时长  
 │   │   └── 进阶课程详情页 
 │   │
 │   └──课程详情页         
 │       ├── 课程内容
 │       ├── 添加日历
 │       ├── 课程视频
 │       └── 会员课程                        
 │                        
 ├──计划                           
 │   └──周计划日期                      
 │   │         
 │   ├──计划课程         
 │   │   ├── 课程封面、练习难度、练习时长                              
 │   │   └── 计划课程详情页                            
 │   │                  
 │   ├──本周目标         
 │   │   ├── 预计减重
 │   │   ├── 目标体重
 │   │   ├── 训练天数
 │   │   └── 消耗热量                         
 │   │                   
 │   └──推荐课程    
 │       ├── 课程封面、练习难度、练习时长
 │       ├── 推荐课程详情页                                             
 │       ├── 课程内容                                  
 │       └── 添加计划                       
 │
 └──我的                           
     ├──登录  
     │   ├── 华为账号一键登录                          
     │   ├── 微信登录                                                   
     │   ├── 账密登录
     │   └── 用户隐私协议同意                       
     │         
     ├──会员中心         
     │   ├── 会员套餐
     │   ├── 会员权益
     │   └── 会员服务协议
     │                    
     ├──个人信息         
     │   ├── 头像、昵称、简介
     │   ├── 性别、年龄、身高、体重
     │   └── 目标、想锻炼的部位
     │
     ├──运动记录         
     │   ├── 日运动时长、总消耗
     │   ├── 周运动时长、总消耗、累计训练天数
     │   ├── 月运动时长、总消耗、累计训练天数
     │   └── 年运动时长、总消耗、累计训练天数
     │
     └──常用服务    
         ├── 我的足迹    
         ├── 我的收藏                                    
         ├── 意见反馈                   
         └── 设置
              ├── 编辑个人信息             
              ├── 隐私设置           
              ├── 通知开关  
              ├── 视频后台播放             
              ├── 视频默认清晰度           
              ├── 清理缓存 
              ├── 检测版本 
              ├── 关于我们 
              └── 退出登录 

二、应用架构设计

1、分层模块化设计

• 产品定制层： 专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践支持直板机、折叠机，为单HAP包形式，包含路由根节点、底部导航栏等。

• 基础特性层： 用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• 公共能力层： 存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2、业务组件设计

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

三、行业场景技术方案

1、运动记录功能

• 场景说明

通过柱状图的形式呈现周、月、年的运动记录数据。

• 技术方案

使用开源三方库 [@ohos/mpchart](@ohos/mpchart) 呈现多类型图表

使用开源三方库 dayjs 实现日期数据格式化。

2、横屏视频播放功能

• 场景说明

用户可播放网络视频，视频播放支持加解锁、倍速等功能。

• 技术方案

基于 AVPlayer 实现视频播放能力。

使用 XComponent 渲染视频画面。

ArkUI搭建控制层操作能力。

四、模板代码

1、工程结构（下载模板）

详细代码结构如下所示：

ExerciseAndFitness  
├──commons
│  ├──lib_account/src/main/ets                         // 账号登录模块                 
│  │   ├──components
│  │   │   └──AgreePrivacyBox.ets                      // 隐私同意勾选                
│  │   ├──constants                                    // 常量                         
│  │   ├──pages 
│  │   │   ├──HuaweiLoginPage.ets                      // 华为账号登录页面
│  │   │   ├──OtherLoginPage.ets                       // 其他方式登录页面
│  │   │   └──ProtocolWebView.ets                      // 协议H5      
│  │   ├──services                                     // 服务api                 
│  │   ├──utils 
│  │   │   ├──ErrorCodeHelper.ets                      // 错误码处理工具类
│  │   │   ├──HuaweiAuthUtils.ets                      // 华为认证工具类
│  │   │   ├──LoginSheetUtils.ets                      // 统一登录半模态弹窗
│  │   │   └──WXApiUtils.ets                           // 微信登录事件处理类              
│  │   └──viewmodels                                   // 视图模型
│  │
│  ├──lib_api/src/main/ets                             // 服务端api模块 
│  │   ├──database                                     // 数据库 
│  │   ├──params                                       // 请求响应参数 
│  │   └──services                                     // 服务api 
│  │
│  ├──lib_common/src/main/ets                          // 基础模块                 
│  │   ├──components                                   // 通用组件                 
│  │   ├──constants                                    // 通用常量
│  │   ├──dialogs                                      // 通用弹窗 
│  │   ├──mocks                                        // 模拟数据
│  │   ├──models                                       // 状态观测模型 
│  │   ├──types                                        // 类型
│  │   └──utils                                        // 通用方法                          
│  │ 
│  └──lib_widget/src/main/ets                          // 通用UI模块                 
│      └──components
│          └──NavHeaderBar.ets                         // 自定义标题栏
│
├──components
│  ├──aggregated_payment                               // 通用支付组件
│  ├──module_chart                                     // 图表组件 
│  ├──module_feedback                                  // 意见反馈组件 
│  ├──module_imagepreview                              // 图片预览组件 
│  ├──module_player                                    // 播放组件 
│  ├──module_search                                    // 搜索组件
│  └──module_transition                                // 动画组件                 
│    
├──features
│  ├──home/src/main/ets                                // 首页模块                     
│  │   ├──pages
│  │   │   ├──CommonKnowledgeActivatePage.ets          // 激活页
│  │   │   ├──CommonKnowledgeDrawPage.ets              // 拉伸页
│  │   │   ├──CommonKnowledgeEquipPage.ets             // 装备页
│  │   │   ├──CommonKnowledgePage.ets                  // 常识页面
│  │   │   ├──CommonKnowledgeStrainPage.ets            // 避免受伤页
│  │   │   ├──CommonKnowledgeWarmPage.ets              // 热身页
│  │   │