HarmonyOS 鸿蒙Next开发案例：生活服务类行业官方模板介绍 停车缴费模板
HarmonyOS 鸿蒙Next开发案例：生活服务类行业官方模板介绍 停车缴费模板
💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了生活服务类行业的一个官方模板——停车缴费元服务模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！
一、概述
-
行业洞察（待补充）
1）行业痛点
-
优秀案例概览
基于以上行业分析，本期将介绍鸿蒙生态市场生活服务类行业模板——停车缴费元服务模板，为行业提供常用功能的开发案例，模板主要分首页、找车位和我的三大模块
-
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 // 搜索页视图模型
│
├──更多关于HarmonyOS 鸿蒙Next开发案例：生活服务类行业官方模板介绍 停车缴费模板的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
停车缴费模板是鸿蒙Next官方提供的生活服务类行业模板，专为停车场景设计。该模板支持车牌识别、计费规则配置、在线支付及订单管理功能，基于鸿蒙SDK开发，采用ArkTS语言实现UI与业务逻辑。其集成华为支付Kit，支持一键调起支付界面，同时适配多种设备屏幕尺寸。模板结构清晰，包含页面组件、业务模块与数据模型，可直接复用或二次开发，提升开发效率。
更多关于HarmonyOS 鸿蒙Next开发案例：生活服务类行业官方模板介绍 停车缴费模板的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
