HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 医保元服务模板

鸿蒙生态市场

💡摘要： 本模板来自华为生态市场（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. 工程结构

详细代码结构如下所示：

├──commons
│   ├──common                                // 公共能力层
│     ├──src/main/ets                        // 基础能力
│     │  ├──axios                            // 网络请求封装
│     │  └──AxiosHttpRequest                 // 业务请求
│     │  └──AxiosMockData                    // 网络请求mock接口
│     │  └──basicDataSource                  // 懒加载数据源
│     │  └──constants                        // 公共常量
│     │  └──h5                               // h5页面封装
│     │  └──imagePreview                     // 图片预览公共组件
│     │  └──permissionRequest                // 获取权限工具类
│     │  └──quickLogin                       // 华为账号一键登录
│     │  └──utils                            // 公共方法
│     └──Index.ets                           // 对外接口类
│   ├──components                            // 细化业务组件
│     ├──src/main/ets                        // 基础能力
│     │  ├──AboutUs                          // 关于我们组件
│     │  └──CertificationProgress            // 暂无数据公共组件
│     │  └──ConvenientService                // 便民服务组件
│     │  └──DrugInquiry                      // 药品查询组件
│     │  └──HotServiceCard                   // 热门服务组件
│     │  └──InstitutionsPage                 // 医疗机构组件
│     │  └──MedicalPersonCardInfo            // 个人医保信息卡片组件
│     │  └──OlderModel                       // 长辈模式组件
│     │  └──OnlineReservation                // 在线预约组件
│     │  └──ReservationSheet                 // 在线预约记录组件
│     └──Index.ets                           // 对外接口类  
├──feature                                   // 基础特性层
│  ├──home/src/main/ets                      // 首页（包含卡证识别，智能填充，花瓣地图）
│  │  ├──commonconstants      
│  │  ├──model    
│  │  ├──pages                               // 首页入口
│  │  ├──views    
│  ├──home/src/main/resources                // 资源文件目录
│  ├──home/Index.ets                         // 对外接口类
│  ├──service/src/main/ets                   // 全部服务
│  │  ├──view                                // 全部服务入口
│  ├──instantDelivery/src/main/resources     // 资源文件目录
│  ├──instantDelivery/Index.ets              // 对外接口类
│  ├──information/src/main/ets               // 资讯
│  │  ├──view                                // 资讯入口
│  ├──information/src/main/resources         // 资源文件目录
│  ├──mine/src/main/ets                      // 我的（包含一键登录）
│  │  ├──components
│  │  └──pages                               // 我的入口页   
│  │  └──utils
│  └──mine/src/main/resources                // 资源文件目录
└──products                                  // 产品定制层
   ├──phone/src/main/ets                      
   │  ├──entryability                        // 主入口生命周期（包含预加载） 
   │  └──pages                               // 首页主入口 
   │  └──components                          // 首页公共组件  
   │  └──entryformability                    // 服务卡片入口生命周期 
   │  └──widget                              // 服务卡片    
   └──phone/src/main/resources               // 资源文件目录

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参考和示例代码，将组件集成在自己的对应场景中。