【HarmonyOS开发案例】购物类行业官方模板介绍 （Part1：快递物流应用模板）
本模板来自华为生态市场（Huawei Partner Market），本文选取了购物类行业的一个官方模板——快递物流应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！
鸿蒙生态市场
💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了购物类行业的一个官方模板——快递物流应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！
一、概述
-
行业洞察（待补充）
1）行业痛点
-
优秀案例概览
基于以上行业分析，本期将介绍鸿蒙生态市场购物类行业模板——快递物流应用模板，为行业提供常用功能的开发案例，主要分寄快递、查快递、会员福利和我的四大模块
-
Stage开发模型 + 声明式UI开发范式
-
分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
-
本模板已集成华为账号、支付等服务，只需做少量配置和定制即可快速实现华为账号的登录和寄快递等功能
-
| 寄快递 | 查快递 | 会员福利 | 我的 |
|---|---|---|---|
|
|
|
|
|
本模板主要页面及核心功能如下所示：
快递物流模板
|-- 寄快递
| └-- 顶部寄件详情
| └-- 用户服务
| | └-- 开通会员
| | └-- 实名认证
| └-- 基础服务
| | └-- 寄快递
| | | |-- 添加模板
| | | |-- 模板列表
| | | |-- 地址列表
| | | └-- 物品列表
| | | └-- 寄快递
| | └-- 发物流
| | | |-- 添加模板
| | | |-- 模板列表
| | | |-- 地址列表
| | | └-- 物品列表
| | | └-- 寄快递
| └-- 咨询客服
| └-- 充值会员
|-- 查快递
| └-- 顶部搜索
| └-- 快递列表
| | └-- 快递详情
| | | |-- 地图
| | | |-- 支付
| | | |-- 客服
| | | └-- 修改信息
|-- 会员福利
| └-- 签到详情
| └-- 开通会员
| └-- 会员支付
| └-- 优惠券列表
└-- 我的
└-- 账号
| |-- 账号登录
| | |-- 账号详情
| | └-- 账号信息修改
| └-- 我的快递
| └-- 地址簿
| | └-- 地址列表
| └-- 实名认证
| └-- 联系客服
| └-- 滚动公告
| └-- 设置
└-- 推送通知
└-- 清楚缓存
二、应用架构设计
1. 分层模块化设计
-
产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
- 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
-
基础特性层：用于存放相对独立的功能UI和业务逻辑实现。
-
本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
-
每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
-
-
公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
- 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
- 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
- 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
三、行业场景技术方案（待补充）
-
账号管理
1）场景说明
2）技术方案
-
寄收快递
1）场景说明
2）技术方案
-
物流展示
1）场景说明
2）技术方案
-
会员福利
1）场景说明
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层
2. 关键代码解读（待补充）
- 待补充
3. 模板集成
本模板提供了两种代码集成方式，供开发者自由使用。
1）整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
-
模板代码获取：
-
打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
-
对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
-
将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
-
在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
-
-
根据自己的业务内容修改模板，进行定制化开发。
2）按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
14
0- 0
已为社区贡献1条内容
所有评论(0)