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

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. 工程结构

详细代码结构如下所示：

HouseholdService
├─commons                           
│  └─lib_foundation/src/main/ets                        // 应用基础lib                                       
│       ├─common                                      
│       │   ├─Constant.ets                              // 常量定义 
│       │   └─GoodDataSource.ets                        // 商品datasource定义
│       │         
│       ├─http         
│       │   ├─ApiManage.ets                             // 服务端接口定义 
│       │   ├─AxiosBase.ets                             // 接口调用基础类    
│       │   ├─HttpMockMap.ets                           // mock接口映射        
│       │   ├─MockApi.ets                               // mock接口       
│       │   └─MockData.ets                              // mock数据             
│       │                    
│       ├─login                                      
│       │   └─LoginUtil.ets                             // 登录工具类  
│       │         
│       ├─model                              
│       │   ├─IRequest.ets                              // 接口请求定义          
│       │   ├─IResponse.ets                             // 接口响应定义                      
│       │   └─ObserveModel.ets                          // 状态管理类                    
│       │         
│       ├─router         
│       │   └─RouterModule.ets                          // 路由管理     
│       │
│       └─uicomponent
│           ├─CommonCard.ets                            // 卡片组件    
│           ├─DialogCall.ets                            // 拨号弹窗
│           ├─UIBackBtn.ets                             // 返回按钮
│           └─UIOrderPart.ets                           // 订购组件           
│
├─components
│  ├─module_address_manage/src/main/ets                 // 地址管理组件  
│  │     ├─common
│  │     │   ├─Constant.ets                             // 常量定义     
│  │     │   ├─Global.ets                               // 全局变量管理             
│  │     │   └─Utils.ets                                // 方法定义            
│  │     │
│  │     ├─http
│  │     │   ├─Api.ets                                  // 接口调用               
│  │     │   └─Type.ets                                 // 类型定义           
│  │     │
│  │     ├─model
│  │     │   ├─AddressListModel.ets                     // 列表model               
│  │     │   └─AddressModel.ets                         // 地址model                
│  │     │
│  │     ├─pages
│  │     │   ├─AddressManage.ets                        // 地址管理                         
│  │     │   └─EditAddress.ets                          // 编辑地址                      
│  │     │   
│  │     └─viewmodel   
│  │         ├─AddressListViewModel.ets                 // 列表viewmodel                    
│  │         └─AddrViewModel.ets                        // 地址viewmodel                     
│  │   
│  ├─module_base/src/main/ets                                          
│  │      ├─common   
│  │      │   ├─Constant.ets                            // 常量定义                
│  │      │   ├─Logger.ets                              // 日志打印            
│  │      │   ├─ObserveModel.ets                        // 状态管理类               
│  │      │   ├─PopViewUtils.ets                        // 公共弹窗                     
│  │      │   ├─Type.ets                                // 模型定义            
│  │      │   └─Utils.ets                               // 公共方法                
│  │      │   
│  │      └─uicomponent
│  │          ├─GoodCard.ets                            // 商品卡片                             
│  │          ├─NoticeDialog.ets                        // 通知弹窗               
│  │          ├─UIEmpty.ets                             // 空白组件          
│  │          └─UILoading.ets                           // 空白组件                         
│  │
│  ├─module_category/src/main/ets                       // 分类组件                     
│  │    ├─common
│  │    │   └─Utils.ets                                 // 方法定义            
│  │    │
│  │    └─components
│  │        └─CategoryLayout.ets                        // 分类容器        
│  │   
│  ├─module_city_select/src/main/ets                    // 城市选择组件
│  │    ├─common
│  │    │   ├─Constant.ets                              // 常量定义      
│  │    │   ├─Model.ets                                 // 模型定义  
│  │    │   └─Utils.ets                                 // 方法定义
│  │    │
│  │    ├─components
│  │    │   └─SingleBtn.ets                             // 按钮组件
│  │    │
│  │    └─pages
│  │        └─Index.ets                                 // 城市选择主体
│  │  
│  ├─module_form/src/main/ets                           // 表单组件            
│  │    ├─common                                        
│  │    │   ├─Constant.ets                              // 常量定义           
│  │    │   └─Utils.ets                                 // 方法定义           
│  │    │                
│  │    ├─components                                    
│  │    │   ├─FormAddress.ets                           // 表单-地址填写           
│  │    │   ├─FormAvatar.ets                            // 表单-头像编辑                 
│  │    │   ├─FormDate.ets                              // 表单-日期选择            
│  │    │   ├─FormGender.ets                            // 表单-性别选择        
│  │    │   ├─FormInput.ets                             // 表单-输入框    
│  │    │   └─FormTextReadOnly.ets                      // 表单-只读文本          
│  │    │
│  │    └─pages                          
│  │        └─FormItem.ets                              // 表单组件            
│  │    
│  ├─module_search/src/main/ets                         // 搜索组件              
│  │    ├─common                    
│  │    │   └─Utils.ets                                 // 方法定义   
│  │    │
│  │    └─components                
│  │        └─UISearch.ets                              // 搜索组件              
│  │
│  └─module_time_select/src/main/ets                    // 时间选择弹窗组件            
│       ├─common                        
│       │   ├─CommonUtils.ets                           // 方法定义              
│       │   ├─Constant.ets                              // 常量定义          
│       │   ├─Model.ets                                 // 模型定义                 
│       │   └─TimeUtils.ets                             // 时间工具类                     
│       │                  
│       ├─components                  
│       │   └─TimeSelect.ets                            // 时间选择view                    
│       │                  
│       └─viewmodel                  
│           └─TimeSelectVM.ets                          // 时间选择viewmodel                  
│
├─features
│  ├─business_home/src/main/ets                         // 首页模块             
│  │    ├─common                     
│  │    │   ├─Constant.ets                              // 常量定义       
│  │    │   └─Model.ets                                 // 模型定义     
│  │    │                     
│  │    ├─components                     
│  │    │   └─ServiceText.ets                           // 价格文本组件             
│  │    │                     
│  │    ├─pages                     
│  │    │   ├─CityList.ets                              // 服务地址页面         
│  │    │   ├─GoodDetail.ets                            // 商品详情页面              
│  │    │   ├─HomePage.ets                              // 首页           
│  │    │   ├─OrderPage.ets                             // 下单页面    
│  │    │   ├─SearchPage.ets                            // 搜索页面   
│  │    │   ├─SuccessPay.ets                            // 支付成功页面      
│  │    │   └─ToPay.ets                                 // 待支付页面   
│  │    │                     
│  │    └─viewmodel                     
│  │        ├─HomeVM.ets                                // 首页viewmodel 
│  │        └─OrderVM.ets                               // 下单viewmodel       
│  │   
│  └─business_mine/src/main/ets                         // 我的模块             
│        ├─components                                      
│        │   └─OrderCard.ets                            // 订单卡片组件       
│        │                    
│        ├─pages                                         
│        │   ├─CommonService.ets                        // 公共服务页面            
│        │   ├─EditPersonal.ets                         // 编辑个人资料页面          
│        │   ├─Mine.ets                                 // 我的页面     
│        │   ├─MyOrderDetail.ets                        // 订单详情       
│        │   ├─MyOrderList.ets                          // 订单列表        
│        │   └─OfficialWeb.ets                          // 官网H5       
│        │                    
│        └─viewmodel                                          
│            ├─MineVM.ets                               // 我的viewmodel        
│            ├─MyOrderDetailVM.ets                      // 订单详情viewmodel              
│            └─MyOrderVM.ets                            // 订单列表viewmodel  
│
└─products
   └─entry/src/main/ets                
        ├─components                         
        │   └─AllCategory.ets                           // 分类页面        
        │            
        ├─entryability                                       
        │   └─EntryAbility.ets                          // UIAbility生命周期
        │            
        ├─entryformability                             
        │   └─EntryFormAbility.ets                      // FormExtensionAbility生命周期
        │            
        ├─pages                                        
        │   ├─Index.ets                                 // 入口页面
        │   └─Main.ets                                  // 主页面
        │            
        └─widget/pages                                 
            └─WidgetCard.ets                            // 主页面

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

  • 待补充

3. 模板集成

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

1）整体集成

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

  • 模板代码获取：
    • 通过IDE插件创建模板工程，[开发指导

更多关于HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 家政元服务模板的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

该模板基于HarmonyOS NEXT设计，专为家政行业元服务开发提供标准化框架。采用ArkTS语言与Stage模型开发，集成服务卡片、任务管理及跨设备流转能力。支持快速对接家政服务API，实现预约、订单跟踪及服务评价功能。模板已预置UI组件与业务逻辑模块，可直接调用鸿蒙分布式能力，提升多端协同体验。

更多关于HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 家政元服务模板的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


家政元服务模板是HarmonyOS NEXT在生活服务领域的典型开发案例，采用Stage模型和声明式UI开发，具备高度模块化和组件化特性。其架构分为产品定制层、基础特性层和公共能力层，支持整体集成或按需使用独立业务组件（如地址管理、城市选择、表单组件等）。模板已集成华为账号、支付等核心服务，开发者只需替换接口和数据结构即可快速对接自有后台。工程结构清晰，包含首页、服务列表及个人中心等核心模块，适合家政类应用的高效开发。

回到顶部