HarmonyOS 鸿蒙Next开发案例：医疗类行业官方模板介绍 （Part1：医院模板）

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

一、概述

1. 优秀案例概览

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
   • 本模板已集成华为账号、地图、支付、推送等服务，只需做少量配置和定制即可快速实现华为账号的登录并一键获取账号的手机号和头像、医院位置定位导航和缴费等功能

首页	按科室挂号	按医生挂号

挂号支付	报告查询

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

医院 |-- 首页 | |-- 医院大图 | |-- 滚动公告 | |-- 默认就诊人 | |-- 就医服务 | | |-- 挂号预约 | | | |-- 医院列表 | | | |-- 科室选择 | | | |-- 医生选择 | | | |-- 排班信息 | | | └-- 医生主页 | | | └-- 挂号订单创建 | | | └-- 支付 | | |-- 报告查询 | | | |-- 就诊人切换 | | | |-- 报告查看 | | └-- 自助缴费 | | └-- 线上诊疗 |-- 消息 | └-- 医院动态 | └-- 我的消息 | | └-- 消息详情查看 | | └-- 消息推送 └-- 我的 |-- 账号管理 |-- 就诊人管理 |-- 挂号记录 |-- 报告查询

二、应用架构设计

1. 分层模块化设计

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

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

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

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

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

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

2. 业务组件设计

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

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

1. 账号管理

   1）场景说明

   2）技术方案

2. 挂号预约

   1）场景说明

   2）技术方案

3. 线上诊疗

   1）场景说明

   2）技术方案

4. 医院动态

   1）场景说明

   2）技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示：

MedicalCare |- common // 公共能力层：存放公共基础能力集合 | └- common/src/main/ets | |- api
| | BaseApi.ets // 所有api层基类，负责发起网络请求并处理加载对话框、回调、日志等。 | |
| |- components
| | CollapsibleText.ets // 可点击展开和折叠的文本框 | | CommonWebPage.ets // 用于展示网页的页面 | | MapPage.ets // 用于展示地图的页面 | | CommonNavDestination.ets // 自定义NavDestination | | RadioSheetBuilder.ets // Radio列表选项组件 | | CommonEmptyView.ets // 列表空页面 | | | |- model
| | BaseResponse.ets // 所有网络请求的公共响应类 | | | |- exceptions
| | BaseError.ets // 抛出异常使用的异常类 | | | |- utils
| | AuthenticationUtil.ets // 元服务静默登录 | | DataUtil.ets // 数据处理类 | | HttpUtil.ets // 封装axios的网络请求工具 | | LoadingDialogUtil.ets // 用于任意界面展示加载中对话框 | | LogUtil.ets // 日志打印 | | PreferenceUtil.ets // Preference存储和获取 | | ResourceUtil.ets // 资源文件获取 | | RouterUtil.ets // 用于页面间路由 | | ToastUtil.ets // 用于弹出Toast | | | └- viewmodel
| BaseViewModel.ets // 所有ViewModel的基类，定义了一些通用操作 | |- features // 基础特性层：用于存放基础特性集合 | |- appointment/src/main/ets // 预约挂号模块 | | |- api
| | | AppointmentApi.ets // 预约挂号相关API | | | | | |- components
| | | AppointmentEntryPage.ets // 预约挂号入口页面 | | | AppointmentInfoConfirmPage.ets // 预约信息确认页面 | | | AppointmentMainPage.ets // 预约挂号选择科室和医生界面 | | | AppointmentOrderlistPage.ets // 预约订单列表页面 | | | AppointmentOrderPage.ets // 预约订单详情页面 | | | DepartmentAppointmentPage.ets // 科室医生选择页面 | | | DepartmentSelectPage.ets // 科室选择子页面 | | | DoctorInfoPage.ets // 医生主页页面 | | | DoctorSelectPage.ets // 医生选择子页面 | | | HospitalSelectPage.ets // 医院选择子页面 | | | | | |- constant
| | | Constant.ets // 预约挂号模块常量 | | | | | |- model // 实体类定义 | | | | | |- view
| | | CollapseListView.ets // 可折叠列表 | | | DateSelectView.ets // 日期选择View | | | DoctorInfoView.ets // 医生信息View | | | DoctorProfileView.ets // 医生简介View | | | SearchBarView.ets // 搜索栏View | | | TimeSlotView.ets // 时间段选择View | | | | | └- viewmodel
| | AppointmentViewModel.ets // 预约挂号ViewModel | | | |- notification/src/main/ets // 消息通知模块 | | |- api
| | | NotificationApi.ets // 消息通知相关API | | | | | |- components
| | | MyNotificationPage.ets // 我的消息页面 | | | NotificationPage.ets // 通知页面 | | | | | |- constant // 常量 | | |- model // 实体类 | | └- viewmodel // ViewModel类 | | | |- patient/src/main/ets // 就诊人模块 | | |- api
| | | PatientApi.ets // 就诊人相关API | | | | | |- components
| | | PatientDetailPage.ets // 就诊人编辑页面 | | | PatientListPage.ets // 就诊人列表页面 | | | | | |- model // 就诊人相关实体类 | | | | | |- view
| | | PatientCardView.ets // 就诊人卡片View | | | | | └- viewmodel // 就诊人相关ViewModel | | | └- report/src/main/ets
| |- api
| | ReportApi.ets // 报告查询相关API | | | |- components
| | ReportQueryPage.ets // 报告查询页面 | | | |- model
| └- viewmodel
| └- personal/src/main/ets
| |- api
| | UserApi.ets // 个人中心相关API | | | |- components
| | PersonalPage.ets // 个人中心页面 | | | |- model
| └- viewmodel
| └- products // 产品定制层：用于针对不同设备形态进行功能集成
└- phone/src/main/ets // 应用入口 |- api
| UserApi.ets // 用户相关API | |- components
| HomePage.ets // 首页 | MyPage.ets // 我的页面 | |- entryability
| EntryAbility.ets // 主入口Ability | |- model
| Bannerlnfo.ets // 轮播图数据模型 | UserModel.ets // 用户数据模型 | |- pages
| Index.ets // 应用首页（承载Tabs） | |- viewmodel
| AppointmentStatusWidgetViewModel.ets // 预约信息服务卡片ViewModel | HomeViewModel.ets // 首页ViewModel | UserViewModel.ets // 用户页ViewModel | └- widget // 服务卡片 |- ability
| AppointmentStatusWidgetAbility.ets // 预约状态卡片Ability | └- pages
AppointmentStatusWidgetCard.ets // 预约状态卡片