HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 （Part3：停车缴费模板）
HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 （Part3：停车缴费模板）
鸿蒙生态市场
💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了生活服务类行业的一个官方模板——停车缴费元服务模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！
一、概述
- 优秀案例概览
- Stage开发模型 + 声明式UI开发范式
- 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
- 本模板已集成华为账号、地图、通话、支付等服务，只需做少量配置和定制即可快速实现华为账号登录、地图定位搜索、一键拨号、停车缴费等功能
| 首页 | 找车位 | 我的 |
|---|---|---|
 |
 |
 |
本模板主要页面及核心功能如下所示：
停车缴费模板
├──首页
│ ├──车牌轮播
│ │ ├──信息展示
│ │ ├──刷新删除
│ │ ├──查询缴费入口
│ │ └──新增车牌入口
│ ├──停车缴费
│ │ ├──订单查询页面
│ │ │ ├──车牌输入
│ │ │ ├──绑定车牌
│ │ │ └──最近车牌
│ │ └──订单结果页面
│ │ └──华为支付
│ ├──常去地址
│ │ ├──设置地址入口
│ │ │ ├──基础地址
│ │ │ └──其他地址
│ │ └──目标地址跳转
│ └──车场展示
│ ├──附近停车场
│ └──收藏停车场
│
├──找车位
│ ├──地址搜索
│ │ ├──自动联想
│ │ └──历史搜索
│ ├──地图展示
│ │ ├──绘制标注
│ │ ├──点击凸显
│ │ ├──个人定位
│ │ └──滑动更新
│ └──列表展示
│ ├──排序切换
│ └──详情入口
│ ├──基本信息
│ ├──车位信息
│ ├──收费信息
│ └──收藏/导航/拨号
│
└──我的
├──信息展示
│ ├──账号关联
│ └──取消关联
├──车牌管理
│ ├──查看
│ ├──新增
│ ├──删除
│ └──设为默认
├──订单管理
│ ├──删除订单
│ └──列表展示
│ └──查看订单详情
├──收藏管理
│ ├──取消收藏
│ └──列表展示
│ └──跳转车场详情
├──联系客服
│ └──快捷拨号
├──个人设置
│ └──信息修改
└──隐私协议
二、应用架构设计
1. 分层模块化设计
-
产品定制层： 专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
- 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
-
基础特性层： 用于存放相对独立的功能UI和业务逻辑实现。
- 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
- 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
-
公共能力层： 存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
- 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
- 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
- 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
三、行业场景技术方案（待补充）
-
个人信息 1）场景说明 2）技术方案
-
车辆管理 1）场景说明 2）技术方案
-
找车位 1）场景说明 2）技术方案
-
停车缴费 1）场景说明 2）技术方案
四、模板代码
1. 工程结构
详细代码结构如下所示：
Parking
├──commons // 公共层
│ ├──common/src/main/ets // 公共工具模块(har)
│ │ ├──components
│ │ │ CommonButtom.ets // 公共按钮组件
│ │ │ CommonHeader.ets // 公共标题组件
│ │ ├──constatns
│ │ │ CommonConstants.ets // 公共常量
│ │ │ CommonEnum.ets // 公共枚举
│ │ │ CommonStyles.ets // 公共样式
│ │ ├──types
│ │ │ Address.ets // 地址类型
│ │ │ License.ets // 车牌类型
│ │ │ Order.ets // 订单类型
│ │ │ ParkSpot.ets // 停车场类型
│ │ │ UserInfo.ets // 用户类型
│ │ └──utils
│ │ AccountUtil.ets // 账号管理工具
│ │ AddressUtil.ets // 常用地址管理工具
│ │ CollectUtil.ets // 收藏停车场管理工具
│ │ FormatUtil.ets // 格式化工具
│ │ FullLoading.ets // 全局弹窗工具
│ │ LicenseUtil.ets // 车牌管理工具
│ │ Logger.ets // 日志打印工具
│ │ RouterModule.ets // 路由管理工具
│ │ WidgetUtil.ets // 卡片管理工具
│ │ WindowUtil.ets // 窗口管理工具
│ │
│ └──network/src/main/ets // 公共网络模块(har)
│ ├──apis
│ │ HttpRequestApi // 请求api
│ ├──mocks
│ │ mockData // 模拟数据
│ │ Constants.ets // 相关常量
│ │ HttpRequestApiMock.ets // 模拟api
│ │ MockRequestMap.ets // api映射表
│ ├──models // 请求模型
│ │ AxiosHttp.ets
│ │ AxiosRequest.ets
│ ├──pages
│ │ BindPhonePage.ets // 账号关联页面
│ ├──types
│ │ responseTypes // 响应类型
│ │ AxiosRequestParam.ets // 请求类型
│ │ BaseResponse.ets // 响应基本类型
│ │ HttpRequestConfig.ets // 请求相关类型
│ └──utils
│ AssociateUtil.ets // 账号关联工具
├──components // 组件层
│ ├──module_address_search/src/main/ets // 地址搜索补全组件(har）
│ │ ├──types
│ │ │ Address.ets // 地址类型
│ │ ├──utils
│ │ │ CommonUtil.ets // 公共方法
│ │ │ HistoryUtil.ets // 搜索历史管理工具
│ │ │ Logger.ets // 日志打印工具
│ │ ├──viewmodels
│ │ │ SearchVM.ets // 搜索视图模型
│ │ └──views
│ │ AddressSearch.ets // 地址搜索补全组件封装
│ │
│ ├──module_license_keyboard/src/main/ets // 车牌快速查询组件(har）
│ │ ├──components
│ │ │ CommonKeyboard.ets // 车牌输入组件
│ │ ├──utils
│ │ │ LicenseUtil.ets // 最近输入车牌管理工具
│ │ └──views
│ │ QueryKeyboard.ets // 车牌快速查询组件封装
│ │
│ ├──module_parking_base/src/main/ets // 停车场基础组件(har)
│ │ ├──components
│ │ │ CommonSpotItem.ets // 停车场卡片组件
│ │ ├──types
│ │ │ ParkSpot.ets // 停车场类型
│ │ └──utils
│ │ CommonUtil.ets // 公共方法
│ │ FormatUtil.ets // 格式化工具
│ │ LocationUtil.ets // 定位管理工具
│ │ Logger.ets // 日志打印工具
│ │ ServiceUtil.ets // 搜索停车场方法
│ │
│ ├──module_parking_map/src/main/ets // 停车场地图列表组件(har)
│ │ ├──components
│ │ │ BottomPart.ets // 停车场列表组件
│ │ ├──constatns
│ │ │ Constants.ets // 相关常量
│ │ ├──viewmodels
│ │ │ MapListVM.ets // 停车场地图组件视图模型
│ │ └──views
│ │ ParkingMapList.ets // 停车场地址列表组件封装
│ │
│ ├──module_parking_spots/src/main/ets // 停车场tab组件(har)
│ │ ├──components
│ │ │ TabComp.ets // 自定义tab组件
│ │ ├──viewmodels
│ │ │ SpotsTabVM.ets // 停车场tab组件视图模型
│ │ └──views
│ │ SpotsTab.ets // 停车场tab组件封装
│ │
│ ├──module_phone_call/src/main/ets // 电话拨号半模态组件(har)
│ │ └──utils
│ │ Logger.ets
│ │ TelUtil.ets // 电话拨号方法
│ │
│ └──module_swiper_preview/src/main/ets // 图片轮播预览组件(har)
│ └──view
│ SwiperPicsPreview.ets // 图片轮播预览组件封装
│
├──features/service
│ ├──address/src/main/ets // 地址管理模块(hsp)
│ │ ├──components
│ │ │ CommonAddressListItem.ets // 常用地址列表项
│ │ ├──pages
│ │ │ CommonAddressPage.ets // 常用地址设置页
│ │ └──viewmodels
│ │ AddressPageVM.ets // 常用地址视图模型
│ │
│ ├──detail/src/main/ets // 停车场详情模块(hsp)
│ │ ├──pages
│ │ │ SiteDetailPage.ets // 停车场详情页
│ │ └──viewmodels
│ │ SiteDetailPageVM.ets // 详情页视图模型
│ │
│ ├──license/src/main/ets // 车牌管理模块(hsp)
│ │ ├──components
│ │ │ MyLicenseCard.ets // 车牌卡片组件
│ │ ├──pages
│ │ │ AddLicensePage.ets // 新增车牌页
│ │ │ MyLicensepage.ets // 我的车牌页
│ │ └──viewmodels
│ │ LicensePageVM.ets // 车牌页视图模型
│ │
│ ├──others/src/main/ets // 其他相关模块(hsp)
│ │ ├──collect
│ │ │ CollectPage.ets // 收藏停车场页面
│ │ ├──order
│ │ │ ├──components
│ │ │ │ OrderCardItem.ets // 订单卡片组件
│ │ │ ├──pages
│ │ │ │ OrderDetailPage.ets // 订单详情页
│ │ │ │ OrderListPage.ets // 订单列表页
│ │ │ └──viewmodels
│ │ │ OrderPageVM.ets // 订单视图模型
│ │ └──privacypolicy
│ │ PrivacyPolicyPage.ets // 隐私政策页面
│ │
│ └──pay/src/main/ets // 查询支付模块(hsp)
│ ├──pages
│ │ PayPage.ets // 订单结果页
│ │ QueryPage.ets // 订单查询页
│ └──viewmodels
│ QueryPayPageVM.ets // 搜索页视图模型
│
├──features/tab
│ ├──find/src/main/ets // 找车位tab模块(hsp)
│ │ ├──components
│ │ │ TopPart.ets // 找车位顶部区
│ │ ├──pages
│ │ │ FindPage.ets // 找车位Tab页
│ │ │ SearchPage.ets // 搜索地址页
│ │ └──viewmodels
│ │ SearchPageVM.ets // 找车位视图模型
│ │
│ ├──home/src/main/ets // 首页tab模块(hsp)
│ │ ├──components
│ │ │ CommonAddress.ets // 常用地址项
│ │ │ LicenseCardItem.ets // 车牌卡片项
│ │ │ LicenseSwiper.ets // 车牌轮播
│ │ ├──constants
│ │ │ Constatns.ets // 相关常量
│ │ ├──pages
│ │ │ HomePage.ets // 首页Tab页
│ │ ├──types
│ │ │ Types.ets // 相关类型
│ │ └──viewmodels
│ │ HomePageVM.ets // 首页视图模型
│ │
│ └──mine/src/main/ets // 我的tab模块(hsp)
│ ├──components
│ │ AvatarButton.ets // 头像选择按钮
│ │ HeaderPart.ets // 我的信息展示
│ │ Settings.ets // 我的更多设置
│ ├──constants
│ │ Constants.ets // 相关常量
│ ├──pages
│ │ MinePage.ets // 我的Tab页
│ │ ProfileEditPage.ets // 信息编辑页
│ ├──utils
│ │ Utils.ets // 电话相关方法
│ └──viewmodels
│ MinePageVM.ets // 我的视图模型
│
└──products // 产品层
└──phone/src/main/ets // 应用入口模块(hap)
├──constants
│ Constants.ets // 相关常量
├──entryability
│ EntryAbility.ets // 主进程生命周期
├──pages
│ MainEntry.ets // 主页面
├──phoneformability
│ PhoneFormAbility.ets // 卡片生命周期
├──types
│ Types.ets // 相关类型
├──viewmodels
│ MainEntryVM.ets // 主页面视图模型
├──widget1x2
│ └──pages
│ Widget1x2Card.ets // 1x2卡片布局
└──widget2x2
└──pages
Widget2x2Card.ets // 2x2卡片布局
2. 关键代码解读（待补充）
- 待补充
3. 模板集成
本模板提供了两种代码集成方式，供开发者自由使用。
1）整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
-
模板代码获取：
-
打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
-
对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
- 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
- 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
- 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
-
根据自己的业务内容修改模板，进行定制化开发。
2）按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
-
组件代码获取：
-
下载组件源码，根据README中的说明，将组件包配置在自己的工程中。
-
根据API参考和示例代码，将组件集成在自己的对应场景中。
更多关于HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 （Part3：停车缴费模板）的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
HarmonyOS NEXT停车缴费模板提供标准化开发框架，支持车牌识别、计费规则配置、支付对接等功能。该模板采用ArkTS语言开发，集成分布式能力实现多设备协同，如手机/车机联动缴费。内置安全模块保障支付数据加密传输，支持华为钱包、支付宝等主流支付渠道。UI组件符合鸿蒙设计规范，适配不同屏幕尺寸。数据管理使用鸿蒙分布式数据服务，支持离线模式下的数据同步。模板已预置异常处理机制，包括网络中断重试、支付超时提醒等场景。
更多关于HarmonyOS鸿蒙NEXT开发案例：生活服务类行业官方模板介绍 （Part3：停车缴费模板）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
