HarmonyOS鸿蒙NEXT开发案例：购物类行业官方模板介绍 （Part1：快递物流应用模板）

HarmonyOS鸿蒙NEXT开发案例：购物类行业官方模板介绍 （Part1：快递物流应用模板）

鸿蒙生态市场

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

一、概述

  1. 优秀案例概览
    • Stage开发模型 + 声明式UI开发范式
    • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
    • 本模板已集成华为账号、支付等服务，只需做少量配置和定制即可快速实现华为账号的登录和寄快递等功能
寄快递 查快递 会员福利 我的

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

快递物流模板
 |-- 寄快递
 |    └-- 顶部寄件详情
 |    └-- 用户服务
 |    |    └-- 开通会员
 |    |    └-- 实名认证
 |    └-- 基础服务
 |    |    └-- 寄快递
 |    |    |    |-- 添加模板
 |    |    |    |-- 模板列表
 |    |    |    |-- 地址列表
 |    |    |    └-- 物品列表
 |    |    |    └-- 寄快递
 |    |    └-- 发物流
 |    |    |    |-- 添加模板
 |    |    |    |-- 模板列表
 |    |    |    |-- 地址列表
 |    |    |    └-- 物品列表
 |    |    |    └-- 寄快递
 |    └-- 咨询客服
 |    └-- 充值会员
 |-- 查快递
 |    └-- 顶部搜索
 |    └-- 快递列表
 |    |    └-- 快递详情
 |    |    |    |-- 地图
 |    |    |    |-- 支付
 |    |    |    |-- 客服
 |    |    |    └-- 修改信息
 |-- 会员福利
 |    └-- 签到详情
 |    └-- 开通会员
 |         └-- 会员支付
 |    └-- 优惠券列表
 └-- 我的
      └-- 账号
      |    |-- 账号登录
 |    |    |-- 账号详情
 |    |    └-- 账号信息修改
 |    └-- 我的快递
 |    └-- 地址簿
 |    |    └-- 地址列表
 |    └-- 实名认证
 |    └-- 联系客服
 |    └-- 滚动公告
 |    └-- 设置
           └-- 推送通知
           └-- 清除缓存

二、应用架构设计

1. 分层模块化设计

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

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

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

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

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

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

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

2. 业务组件设计

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

四、模板代码

1. 工程结构

详细代码结构如下所示：

ExpressTemplate
  |- commons                                       // 公共层
  |   |- lib_foundation/src/main/ets               // 公共工具模块(har)
  |   |    |- common 
  |   |    |     Contant.ets                       // 公共常量
  |   |    |- http 
  |   |    |     ApiManage.ets                     // API管理
  |   |    |     AxiosBase.ets                     // 网络请求基类
  |   |    |     HttpMockMap.ets                   // 接口映射
  |   |    |     MockApi.ets                       // Mock的API
  |   |    |     MockData.ets                      // MOCK数据
  |   |    |- model 
  |   |    |     IRequest.ets                      // 请求类型
  |   |    |     IResponse.ets                     // 响应数据类型
  |   |    |     ObserveModel.ets                  // 响应式数据结构
  |   |    |- router 
  |   |    |     RouterModule.ets                  // 路由
  |   |    └- uicomponent 
  |   |          CommonAddress.ets                 // 地址簿组件
  |   |          CommonCounter.ets                 // 计数器组件
  |   |          CommonDivider.ets                 // 分割线组件
  |   |          CommonSaveButton.ets              // 按钮组件
  |   |  
  |   |- components                                 // 公共组件模块(har)
  |   |     └- module_address/src/main/ets          // 地址 
  |   |     |    |- common                          // 常量、工具函数            
  |   |     |    |- http                            // 网络请求数据         
  |   |     |    |- pages                           
  |   |     |    |    AddressPage.est               // 地址列表页
  |   |     |    |    EditAddressPage.est           // 地址编辑页
  |   |     |    └- viewmodel                       // 与页面一一对应的vm层 
  |   |     └- module_auth/src/main/ets             // 实名认证                      
  |   |     |    |- pages                           
  |   |     |    |    RealNameAuthPage.est          // 实名认证页
  |   |     |    |- types                           // 类型
  |   |     |    └- viewmodel                       // 与页面一一对应的vm层 
  |   |     └- module_base/src/main/ets             // 基础 
  |   |     |    |- common                          // 常量、工具函数     
  |   |     |    |- component                       // 基础组件
  |   |     |    └- types                           // 数据类型                
  |   |     └- module_city/src/main/ets             // 城市选择组件 
  |   |     |    |- components                      
  |   |     |    |    CommonCascade.est             // 组件页面            
  |   |     |    |- types                           // 类型         
  |   |     |    └- Utils                           // 工具类
  |   |     └- module_template/src/main/ets         // 模板 
  |   |     |    |- common                          // 常量、工具函数            
  |   |     |    |- http                            // 网络请求数据         
  |   |     |    |- pages                           
  |   |     |    |    TemplateListPage.est          // 模板列表页
  |   |     |    |    TemplatePage.est              // 模板编辑页
  |   |     |    └- viewmodel                       // 与页面一一对应的vm层    
  |- products/entry                                 // 应用层主包(hap)  
  |   └-  src/main/ets                                               
  |        |- entryability                                                               
  |        |- entryformability                                                        
  |        |- pages                              
  |        |    MainEntry.ets                       // 主页面
  |        |- types                                 // interface接口定义
  |        |- viewmodels                            // 与页面一一对应的vm层          
  |        └- widget                                // 卡片页面 
  |                                            
  |- features                                         
     |- business_home/src/main/ets                  // 快递tab页功能组合(har)
     |   |- components                              // 抽离组件 
     |   |- constants                               // 常量
     |   |- pages                               
     |   |   ExpressPage.ets                        // 快递首页
     |   |   GoodsPage.ets                          // 物品页
     |   |   HomePage.ets                           // 首页
     |   |   ServicePointPage.ets                   // 服务点页
     |   |- types                                   // interface类型定义
     |   └- viewModels                              // 与页面一一对应的vm层 
     | 
     └- business_mine/src/main/ets                  // 我的tab页功能组合(har)
     |   |- components                              // 抽离组件 
     |   |- constants                               // 常量
     |   |- pages                               
     |   |   EditNamePage.ets                       // 姓名编辑页
     |   |   EditPhonePage.ets                      // 手机号编辑页
     |   |   MinePage.ets                           // 我的页
     |   |   PersonalInformationPage.ets            // 个人信息页
     |   |   PrivacyPage.ets                        // 隐私页
     |   |   QuickLoginPage.ets                     // 登录页
     |   |   SettingPage.ets                        // 设置页
     |   |- types                                   // interface类型定义
     |   └- viewModels                              // 与页面一一对应的vm层 
     └- business_order/src/main/ets                 // 订单tab页功能组合(har)
     |   |- components                              // 抽离组件 
     |   |- constants                               // 常量
     |   |- pages                               
     |   |   EditOrderPage.ets                      // 订单编辑页
     |   |   OrderInfoPage.ets                      // 订单详情页
     |   |   OrderPage.ets                          // 订单列表页
     |   |- types                                   // interface类型定义
     |   └- viewModels                              // 与页面一一对应的vm层 
     └- business_vip/src/main/ets                   // 会员tab页功能组合(har)
     |   |- components                              // 抽离组件 
     |   |- constants                               // 常量
     |   |- pages                               
     |   |   PurchasePage.ets                       // 购买页
     |   |   VipPage.ets                            // VIP页
     |   |- types                                   // interface类型定义
     |   └- viewModels                              // 与页面一一对应的vm层

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

更多关于HarmonyOS鸿蒙NEXT开发案例：购物类行业官方模板介绍 （Part1：快递物流应用模板）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙NEXT的快递物流应用模板基于ArkTS开发，提供物流信息展示、快递追踪、订单管理等功能。模板采用声明式UI框架，支持动态更新物流状态。内置地图组件可展示配送路径，集成扫码功能用于快递单号识别。数据管理使用HarmonyOS分布式能力，实现多设备间物流状态同步。模板已适配不同设备尺寸，支持手机、平板等终端。性能优化方面采用懒加载机制处理长列表物流数据。

更多关于HarmonyOS鸿蒙NEXT开发案例：购物类行业官方模板介绍 （Part1：快递物流应用模板）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个快递物流应用模板展示了HarmonyOS Next在购物类应用中的典型实现方案，采用分层模块化设计思路，值得开发者重点关注几个技术亮点：

  1. 架构设计采用清晰的三层结构：
  • 产品定制层处理设备适配
  • 基础特性层实现核心业务模块
  • 公共能力层封装通用组件 这种架构便于功能扩展和维护。
  1. 业务组件化设计允许开发者灵活选择集成方式：
  • 整体集成适合快速搭建完整应用
  • 按需集成可单独使用地址管理、实名认证等组件 组件间低耦合设计提高了复用性。
  1. 模板已集成华为核心服务：
  • 账号体系实现快速登录
  • 支付服务支持会员开通
  • 地图组件用于物流追踪 这些现成集成可以大幅缩短开发周期。
  1. 工程结构组织规范：
  • 明确区分公共模块和业务模块
  • 采用HAR包实现组件复用
  • 视图与逻辑分离的MVVM模式 这种结构便于团队协作开发。

对于需要快速开发物流类应用的团队，这个模板提供了很好的参考实现，特别是在组件解耦和华为服务集成方面具有示范价值。开发者可以根据实际需求选择适合的集成方式，重点关注业务组件与自身系统的对接方案。

回到顶部