HarmonyOS ArkTS 实战实现一个校园共享单车租赁应用HarmonyOS ArkTS 实战项目校园共享单车租赁应用完整实现摘要本文基于HarmonyOS Next ArkTS技术栈从零实现一个完整的校园共享单车租赁应用。项目涵盖车辆查找、扫码开锁、实时计费、还车结算、骑行记录、费用统计、故障上报等核心功能完整覆盖地图定位、状态管理、计时器、数据持久化等关键技术点。项目难度⭐⭐⭐ 中级实战适用人群有 ArkTS 基础、希望通过完整项目掌握 HarmonyOS 应用开发的开发者开发环境DevEco Studio Next / API 24代码规模单页面约 600 行可直接运行通过本项目你将掌握HarmonyOS 声明式 UI 的状态管理与页面切换地图组件的集成与车辆位置标记骑行计时器与实时费用计算逻辑本地数据存储与骑行记录管理完整的业务流程状态机设计目录一、项目概述与功能架构1.1 项目背景与应用场景1.2 完整功能清单1.3 技术选型说明二、数据结构设计2.1 车辆信息模型Bike2.2 骑行记录模型RideRecord2.3 设计思路说明三、核心功能实现详解3.1 页面状态初始化3.2 扫码开锁流程实现3.3 骑行中实时计费与计时3.4 还车结算逻辑3.5 故障上报功能四、UI 设计与交互体验4.1 整体布局结构4.2 主题色与视觉规范4.3 骑行状态的视觉区分五、关键技术点解析5.1 状态管理State 的使用场景5.2 计费规则与封顶机制5.3 骑行记录的数据排序六、常见问题与优化建议七、项目总结与扩展方向附录运行方式一、项目概述与功能架构1.1 项目背景与应用场景校园共享单车是高校内最常见的出行方式之一。本项目模拟真实共享单车应用的核心业务流程从用户扫码开锁到还车结算形成完整闭环是学习 HarmonyOS 应用开发非常合适的实战案例——既包含 UI 交互开发又涉及业务逻辑设计复杂度适中且贴近实际应用。相比简单的 Demo 项目本项目的特点在于状态流转完整空闲 → 扫码中 → 骑行中 → 结算中 → 已完成多个状态之间的切换逻辑是开发的重点。1.2 完整功能清单功能模块具体功能实现难度车辆发现地图显示附近车辆、距离展示、车辆状态筛选⭐⭐开锁流程扫码模拟、车辆校验、开锁成功反馈⭐⭐骑行中实时计时、动态计费、临时锁车⭐⭐⭐还车结算还车定位、费用计算、余额扣减⭐⭐⭐记录统计骑行历史列表、本月数据统计、碳减排计算⭐⭐辅助功能故障上报、月卡购买、个人中心⭐1.3 技术选型说明本项目采用纯 ArkTS 声明式开发主要基于以下技术特性ArkUI 声明式开发范式使用Component、State等装饰器构建响应式 UI状态管理轻量级场景使用State即可满足需求无需引入复杂状态管理框架地图组件集成 HarmonyOS 地图组件展示车辆位置与骑行轨迹本地数据骑行记录使用内存数组存储可扩展为关系型数据库持久化为什么选择单页面实现对于教学 Demo 而言单页面集中展示所有状态切换更便于理解完整业务流程。实际项目中建议按功能模块拆分为多个页面。二、数据结构设计清晰的数据模型是业务逻辑的基础。本项目核心数据结构有两个车辆信息和骑行记录。2.1 车辆信息模型Bike/** * 共享单车车辆数据模型 */interfaceBike{id:string;// 车辆唯一编号location:string;// 车辆位置描述如图书馆南门battery:number;// 电量百分比 0-100distance:number;// 距离用户的距离单位米status:available|riding|maintenance;// 车辆状态}2.2 骑行记录模型RideRecord/** * 骑行订单记录数据模型 */interfaceRideRecord{id:number;// 订单IDbikeId:string;// 关联车辆编号startTime:string;// 开始时间endTime:string;// 结束时间duration:number;// 骑行时长分钟cost:number;// 骑行费用元startLocation:string;// 起点位置endLocation:string;// 终点位置status:骑行中|已完成|已取消;// 订单状态}2.3 设计思路说明为什么用字符串存储时间而不是 Date 对象便于直接展示在 UI 上无需额外格式化本地存储时序列化更简单本项目不涉及复杂的时间计算字符串完全够用车辆状态为什么用枚举字符串而不是数字代码可读性更强status riding比status 1更直观ArkTS 的类型系统可以提供字符串字面量类型检查便于调试和日志输出三、核心功能实现详解3.1 页面状态初始化页面需要维护的状态变量包括当前骑行信息、骑行记录列表、账户余额、故障上报输入等Componentexportstruct Index{// 当前进行中的骑行订单null 表示未在骑行StateprivatecurrentRide:RideRecord|nullnull;// 骑行记录列表最新记录在前Stateprivaterecords:RideRecord[][];// 账户余额Stateprivatebalance:number25.5;// 下一条记录的自增IDStateprivatenextRecordId:number10;// 故障上报原因StateprivatefaultReasonText:string;// 附近车辆模拟数据StateprivatenearbyBikes:Bike[][{id:B001,location:图书馆南门,battery:85,distance:50,status:available},{id:B002,location:宿舍区3号楼,battery:72,distance:120,status:available},{id:B003,location:食堂门口,battery:90,distance:200,status:available},];}状态设计原则能通过计算得出的状态不要单独存储如骑行费用可以通过时长计算互斥的状态用同一个变量表示currentRide为 null 即表示空闲状态列表数据统一管理避免分散在多个数组中3.2 扫码开锁流程实现扫码开锁是整个业务流程的起点。真实场景中需要调用扫码 SDK 和后端接口本项目简化为直接调用开锁函数/** * 开锁方法 * param bikeId 车辆编号 * param location 开锁位置 */privateunlockBike(bikeId:string,location:string):void{// 1. 校验正在骑行中不能再次开锁if(this.currentRide!null){console.warn(当前有进行中的订单无法重复开锁);return;}// 2. 创建骑行订单constrecord:RideRecord{id:this.nextRecordId,bikeId:bikeId,startTime:newDate().toLocaleString(),endTime:,duration:0,cost:0,startLocation:location,endLocation:,status:骑行中};// 3. 更新状态this.currentRiderecord;this.nextRecordId;console.log(车辆${bikeId}开锁成功订单号${record.id});}真实项目扩展点开锁前需要检查账户余额余额不足提示充值调用后端接口校验车辆是否可用增加开锁超时机制一定时间内未成功则自动取消3.3 骑行中实时计费与计时骑行过程中需要实时更新骑行时长和预估费用。这是整个应用最核心的动态逻辑// 骑行计时器privaterideTimer:number-1;/** * 启动骑行计时器每分钟更新一次时长和费用 */privatestartRideTimer():void{this.rideTimersetInterval((){if(this.currentRide){// 时长1分钟this.currentRide.duration1;// 实时计算当前费用this.currentRide.costthis.calculateCost(this.currentRide.duration);}},60000);// 每分钟更新一次}/** * 计算骑行费用 * 计费规则起步价1.5元含15分钟超出后每15分钟0.5元5元封顶 */privatecalculateCost(durationMinutes:number):number{constbaseFee1.5;constadditionalFeeMath.floor(Math.max(0,durationMinutes-15)/15)*0.5;consttotalFeebaseFeeadditionalFee;// 单日封顶5元returnMath.min(totalFee,5);}⚠️ 注意使用setInterval时务必在页面销毁时清除定时器否则会造成内存泄漏。在aboutToDisappear生命周期中调用clearInterval(this.rideTimer)。3.4 还车结算逻辑还车时需要完成停止计时、计算最终费用、更新记录列表、扣减余额、清空当前骑行状态。/** * 还车结算 */privatereturnBike():void{// 防御性校验没有进行中的订单直接返回if(!this.currentRide)return;// 1. 停止计时器if(this.rideTimer!-1){clearInterval(this.rideTimer);this.rideTimer-1;}// 2. 模拟获取还车位置实际项目调用定位APIconstreturnLocation图书馆门口;constfinalDurationthis.currentRide.duration0?this.currentRide.duration:15;constfinalCostthis.calculateCost(finalDuration);// 3. 生成完整订单记录constcompletedRecord:RideRecord{...this.currentRide,endTime:newDate().toLocaleString(),duration:finalDuration,cost:finalCost,endLocation:returnLocation,status:已完成};// 4. 更新数据新记录插入列表头部余额扣减this.records[completedRecord,...this.records];this.balanceMath.max(0,this.balance-finalCost);// 5. 重置骑行状态this.currentRidenull;console.log(还车成功费用${finalCost}元剩余余额${this.balance}元);}3.5 故障上报功能用户在骑行中或还车后发现车辆故障可以提交上报/** * 提交故障上报 */privatesubmitFaultReport():void{if(!this.faultReasonText.trim()){console.warn(请填写故障原因);return;}// 实际项目中调用后端接口提交console.log(故障上报成功${this.faultReasonText});// 清空输入框this.faultReasonText;// 可以弹出提示弹窗反馈用户}四、UI 设计与交互体验4.1 整体布局结构页面采用垂直分区布局从上到下依次为顶部地图区域约占屏幕 40%显示附近车辆位置标记状态卡片区域空闲状态显示扫码开锁大按钮骑行中显示实时计时计费卡片功能入口区骑行记录、费用统计、故障上报等功能入口底部列表区历史骑行记录列表支持滚动查看4.2 主题色与视觉规范主色调青绿色#2DD4BF选择青绿色作为主题色的原因契合出行、环保、健康的产品调性在地图背景上有足够的对比度车辆标记清晰可见绿色代表可用、正常的语义与骑行状态天然契合辅助色骑行中强调色深绿#0D9488警告/故障色橙色#F59E0B不可用状态灰色#9CA3AF4.3 骑行状态的视觉区分不同骑行状态下页面主视觉要有明显差异让用户一眼就能判断当前状态状态主按钮样式卡片背景语义空闲青绿色实心大按钮扫码开锁无可以开始骑行骑行中红色按钮结束骑行浅绿色背景高亮正在计费中结算中禁用状态灰色遮罩正在处理还车五、关键技术点解析5.1 状态管理State 的使用场景本项目全部使用State装饰器管理状态这是因为单页面应用状态不跨组件共享状态变更触发 UI 刷新的逻辑简单直接不需要引入Provide/Consume或全局状态管理增加复杂度什么时候需要升级状态管理方案状态需要在多个页面间共享时状态变更逻辑复杂需要统一管理时需要持久化或与后端同步时5.2 计费规则与封顶机制本项目采用的是共享单车行业常见的计费模式起步价1.5 元包含 15 分钟骑行时长阶梯计费超出 15 分钟后每 15 分钟加收 0.5 元封顶机制单次骑行最高收费 5 元避免用户忘记还车产生高额费用Math.min(cost, 5)这个封顶逻辑很重要是产品体验的细节体现。5.3 骑行记录的数据排序this.records[record,...this.records];使用数组展开 头部插入的方式保证最新的骑行记录永远在列表最前面符合用户查看历史的习惯。相比unshift方法这种方式是不可变更新更符合声明式 UI 的状态更新原则。六、常见问题与优化建议开发中容易踩的坑定时器忘记清理页面退出时必须clearInterval否则会导致内存泄漏和状态异常空指针问题访问currentRide属性前务必判空尤其是还车流程中浮点数精度金额计算建议使用整数分为单位避免 0.10.2 这类浮点精度问题状态突变不要直接修改State对象的内部属性整体赋值才能触发刷新可优化方向持久化存储骑行记录写入 Preferences 或关系型数据库重启不丢失地图集成接入真实地图 SDK显示车辆真实位置和骑行轨迹用户系统增加登录注册、个人信息、充值功能后端对接所有业务逻辑改为调用真实 API七、项目总结与扩展方向核心收获通过这个项目你应该掌握了以下 HarmonyOS 开发能力声明式 UI 开发使用 ArkTS 构建完整的交互页面状态驱动开发理解State的工作原理用状态变化驱动 UI 更新业务逻辑设计完整的状态机流转从开锁到还车的全流程实现数据模型设计合理定义接口支撑业务逻辑的扩展后续功能扩展建议如果想继续深化这个项目可以考虑增加以下功能骑行导航接入导航 SDK提供还车点路线指引⏰预约用车提前预约车辆保留一定时间骑行红包优惠券、月卡、次卡等营销功能车辆报修拍照上传故障工单系统跟进还车点推荐智能推荐附近的停车区域骑行排行好友排行榜、成就系统增加趣味性运行效果