HarmonyOS鸿蒙NEXT开发案例:母婴儿童类行业官方模板介绍 (Part1:母婴月子中心应用模板)

HarmonyOS鸿蒙NEXT开发案例:母婴儿童类行业官方模板介绍 (Part1:母婴月子中心应用模板) 鸿蒙生态市场

💡摘要: 本模板来自华为生态市场(Huawei Partner Market),本文选取了母婴儿童类行业的一个官方模板——母婴月子中心应用模板,并进行了简要的介绍与分析。各位开发者伙伴们,更多行业模板与组件请进入生态市场查看!

一、概述

  1. 行业洞察(待补充) 1)行业痛点

  2. 优秀案例概览 基于以上行业分析,本期将介绍鸿蒙生态市场母婴儿童类行业模板——母婴月子中心应用模板,为行业提供常用功能的开发案例,模板主要分为首页、门店、活动和我的四大模块

    • Stage开发模型 + 声明式UI开发范式
    • 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件
    • 本模板已集成华为账号、地图等服务,只需做少量配置和定制即可快速实现华为账号的登录、定位导航和预约门店、活动等功能
首页 门店 活动 我的
首页 门店 活动 我的

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

母婴模板
 |-- 华为账号静默登录
 |-- 首页
 |    |-- Banner
 |    |-- 服务列表
 |    |    └-- 服务详情介绍
 |    └-- 预约参观
 |         └-- 附近门店列表
 |              |-- 门店详情
 |              |-- 门店距离
 |              |-- 预约参观
 |              |-- 地址导航
 |              |-- 电话咨询
 |              |-- 添加日程
 |              └-- 手机号关联
 |-- 门店
 |    |-- 城市位置筛选
 |    └-- 门店列表
 |         |-- 门店详情    
 |         |-- 门店距离    
 |         |-- 预约参观    
 |         |-- 地址导航    
 |         |-- 电话咨询    
 |         |-- 添加日程    
 |         └-- 手机号关联    
 |-- 活动
 |    |-- 城市位置选择
 |    |-- 活动类型选择
 |    └-- 活动列表
 |         |-- 活动详情
 |         |-- 活动报名   
 |         └-- 手机号关联 
 |         |-- 添加日程
 |         |-- 电话咨询  
 └-- 我的
      |-- 用户信息
      |    |-- 头像、昵称设置
      |    |-- 华为账号一键登录
      |-- 门店预约记录
      |    |-- 预约列表
      |    |-- 预约详情
      |    |-- 地址导航 
      |    |-- 电话咨询 
      |    |-- 添加日程 
      |    └-- 取消预约
      |-- 活动预约记录
      |    |-- 预约列表
      |    |-- 预约详情
      |    |-- 地址导航 
      |    |-- 电话咨询  
      |    └-- 取消预约
      |-- 意见反馈
      └-- 关于我们
           |-- 隐私政策
           |-- 第三方信息共享清单
           └-- 个人信息收集清单

二、应用架构设计

1. 分层模块化设计

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

    • 本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
  • **基础特性层:**用于存放相对独立的功能UI和业务逻辑实现。

    • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
    • 每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。
  • **公共能力层:**存放公共能力,包括公共UI组件、数据管理、外部交互和工具库等共享功能。

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

分层模块化设计

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

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

业务组件设计

三、行业场景技术方案(待补充)

  1. 账号管理 1)场景说明 2)技术方案

  2. 活动列表 1)场景说明 2)技术方案

  3. 预约参观 1)场景说明 2)技术方案

  4. 意见反馈 1)场景说明 2)技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示:

postpartum_care_center
  ├─components/uicomponents/src/main
  │  ├─ets
  │  │  ├─components
  │  │  │      AssociatePhone.ets            // 手机号关联组件
  │  │  │      BindPhoneDialog.ets           // 手机号绑定弹窗
  │  │  │      Booking.ets                   // 门店预约参观组件
  │  │  │      BookingSuccess.ets            // 门店预约参观成功组件
  │  │  │      CalenderAddition.ets          // 日程添加组件
  │  │  │      StoreCard.ets                 // 门店卡片组件 
  │  │  │      StoreDetail.ets               // 门店详情组件
  │  │  │      TitleTop.ets                  // 顶部标题组件
  │  │  │  
  │  │  ├─constants
  │  │  │      Constants.ets                 // 公共常量
  │  │  │
  │  │  ├─model
  │  │  │      ActivityTypeItem.ets          // 活动数据模型
  │  │  │      CityItem.ets                  // 城市数据模型
  │  │  │      StoreBookingRecordItem.ets    // 门店预约记录模型
  │  │  │      StoreListClass.ets            // 门店列表类
  │  │  │      StoreModel.ets                // 门店数据模型
  │  │  │  
  │  │  └─viewmodel
  │  │          MainEntryVM.ets              // 公共VM层                                   
  │  └─resources  
  │
  ├─components/utils/src/main
  │  ├─ets
  │  │  ├─constants
  │  │  │      CommonContants.ets            // 公共常量
  │  │  │      CommonEnums.ets               // 日志打印
  │  │  │
  │  │  ├─model
  │  │  │  └─activity
  │  │  │            ActivityBookingRecordModel.ets // 数据请求模型
  │  │  │            ActivityModel.ets              // 数据响应模型
  │  │  │      BookingRec.ets                // 预约记录模型
  │  │  │      ServiceItem.ets               // 服务介绍模型
  │  │  │
  │  │  └─utils
  │  │          AccountUtil.ets              // 账号工具类
  │  │          BookingUtil.ets              // 预约工具类
  │  │          CalendarUtil.ets             // 日程工具类
  │  │          CommonUtil.ets               // 公共类
  │  │          FormatUtil.ets               // 格式化工具类
  │  │          LocateUtil.ets               // 定位工具类
  │  │          LocationPermissionUtil.ets   // 定位权限类
  │  │          Logger.ets                   // 日志工具类
  │  │          PermissionUtil.ets           // 权限工具类
  │  │          RouterModule.ets             // 路由模块
  │  │                                       
  │  └─resources                             
  │                                                                                
  │─products/src/main                           
  │  ├─ets   
  │  │  ├─contants
  │  │  │      Constants.ets                 // 常量          
  │  │  │                                            
  │  │  ├─entryability                        
  │  │  │      EntryAbility.ets              
  │  │  │                                    
  │  │  ├─model                   
  │  │  │      TabListItem.ets               // Tab页签数据模型             
  │  │  │                                    
  │  │  └─pages                              
  │  │         MainEntry.ets                 // 主入口页面
  │  │                                       
  │  └─resources 
  │                            
  │─scenes/activities/src/main                     
  │  ├─ets                                    
  │  │  ├─pages                              
  │  │  │      activities.ets                // 活动页面 
  │  │  │                                    
  │  │  ├─view                          
  │  │  │      ActivityBooking.ets           // 活动预约报名 
  │  │  │      ActivityBookingSuccess.ets    // 活动预约报名成功
  │  │  │      ActivityCard.ets              // 活动卡片组件
  │  │  │      ActivityDetail.ets            // 活动详情组件
  │  │  │      ActivityList.ets              // 活动列表组件                             
  │  │  │
  │  │  └─viewmodel                           
  │  │          ActivityEntryVM.ets          // 活动页面VM
  │  │                                        
  │  └─resources    
  │                                          
  │─scenes/home/src/main                     
  │  ├─ets                                    
  │  │  ├─constants                              
  │  │  │      Constants.ets                  // 常量 
  │  │  │                                    
  │  │  ├─model                          
  │  │  │      ServiceGridItem.ets           // 服务介绍栅格数据模型 
  │  │  │                                     
  │  │  ├─pages                               
  │  │  │      Home.ets                      // 主页
  │  │  │      ServiceDetail.ets             // 服务详情页
  │  │  │                                     
  │  │  └─view                           
  │  │          Banner.ets                   // 首页Banner
  │  │          NearbyStores.ets             // 附近门店组件
  │  │          SeviceGrids.ets              // 服务介绍栅格组件
  │  │
  │  └─resources                              
  │
  │─scenes/mine/src/main                     
  │  ├─ets                                                                     
  │  │  └─pages                               
  │  │     └─privacy
  │  │               InfoSharingListPage.ets               // 第三方信息共享列表页面
  │  │               PersonalInfoCollectListPage.ets       // 个人信息收集列表页面
  │  │               PrivacyListPage.ets                   // 隐私条例页
  │  │               PrivacyPolicyPage.ets                 // 隐私政策页面
  │  │          ActivityBookingDetailPage.ets       // 活动预约报名记录详情页
  │  │          ActivityBookingListPage.ets         // 活动预约报名记录列表页
  │  │          FeedbackPage.ets                    // 意见反馈页
  │  │          Mine.ets                            // 我的页面
  │  │          StoreBookingDetail.ets              // 门店预约记录详情页
  │  │          StoreBookingRecordsPage.ets         // 门店预约记录列表页
  │  │          SubmitSuccessPage.ets               // (反馈意见)提交成功页 
  │  │   
  │  └─resources     
  │                                             
  └─scenes/stores/src/main                        
     ├─ets                                    
     │  ├─constants                              
     │  │      Constants.ets                 // 常量 
     │  │                                    
     │  ├─model                          
     │  │      CityItem.ets                  // 城市数据模型 
     │  │                                     
     │  ├─pages                               
     │  │      Stores.ets                    // 门店页面
     │  │                                     
     │  └─view                           
     │         StoreList.ets                 // 门店列表组件
     │
     └─resources

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

  • 待补充

3. 模板集成

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

1)整体集成 开发者可以选择直接基于模板工程开发自己的应用工程。


更多关于HarmonyOS鸿蒙NEXT开发案例:母婴儿童类行业官方模板介绍 (Part1:母婴月子中心应用模板)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HarmonyOS NEXT母婴月子中心应用模板基于ArkTS开发,提供母婴行业标准化功能模块。包含月子套餐展示、房间预约、健康档案管理、产后护理课程等核心功能。模板采用Stage模型,支持分布式能力实现多设备协同,如手机与智慧屏联动查看护理视频。UI采用自适应布局,适配不同设备尺寸。数据管理使用Preferences和关系型数据库,集成华为帐号与支付服务。模板已预置典型业务逻辑代码,开发者可快速二次开发。

更多关于HarmonyOS鸿蒙NEXT开发案例:母婴儿童类行业官方模板介绍 (Part1:母婴月子中心应用模板)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个母婴月子中心应用模板展示了HarmonyOS Next在垂直行业的典型应用场景,主要特点包括:

  1. 模块化架构设计
  • 采用分层架构(产品定制层/基础特性层/公共能力层)
  • 业务组件可独立集成,如预约、门店导航等功能模块
  • 公共能力封装为HAR包,便于复用
  1. 核心功能实现
  • 集成华为账号静默登录
  • 门店预约系统(含导航、电话、日程添加)
  • 活动报名管理
  • 用户信息中心
  1. 技术亮点
  • 使用Stage模型+声明式UI开发
  • 完整的分层架构示例
  • 预置华为地图、账号等核心服务
  • 提供Mock接口便于对接真实数据

该模板既可作为完整项目参考,也可抽取特定业务组件(如预约系统)集成到现有应用中。工程结构清晰,包含详细的组件划分和模型定义,适合快速开发同类母婴服务类应用。

回到顶部