鸿蒙生态市场

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

一、概述

  1. 行业洞察(待补充)

    1)行业痛点

  2. 优秀案例概览

    基于以上行业分析,本期将介绍鸿蒙生态市场医疗类行业模板——医院元服务模板,为行业提供常用功能的开发案例,模板主要分首页、消息和我的三大模块

    • 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    // 预约状态卡片

2. 关键代码解读(待补充)

  • 待补充

3. 模板集成

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

1)整体集成

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

  • 模板代码获取:

  • 打开模板工程,根据README说明中的快速入门章节,将自己的应用信息配置在模板工程内,即可运行并查看模板效果。 

  • 对接开发者自己的服务器接口,转换数据结构,展示真实的云侧数据。

    • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。 

    • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。 

  • 根据自己的业务内容修改模板,进行定制化开发。

2)按需集成

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

  • 组件代码获取:

  • 下载组件源码,根据README中的说明,将组件包配置在自己的工程中。 

  • 根据API参考和示例代码,将组件集成在自己的对应场景中。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐