HarmonyOS ArkTS 实战：实现一个校园校车时刻与预约应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园校车时刻与预约应用。

应用可以查看校车线路和时刻表，预约座位，查看校车实时位置，设置到站提醒，并提供收藏线路、乘坐统计等功能。

项目使用 DevEco Studio 开发，适配 API 23 及以上版本。

运行效果

功能介绍

• 校车线路查询
• 时刻表查看
• 座位预约
• 实时位置
• 到站提醒
• 收藏线路
• 乘坐记录
• 余座显示
• 站点列表
• 乘坐统计

定义数据结构

interfaceBusStop{name:string;arriveTime:string;}interfaceBusRoute{id:number;name:string;direction:string;startTime:string;endTime:string;interval:number;price:number;totalSeats:number;reservedSeats:number;stops:BusStop[];isCollected:boolean;}interfaceReservation{id:number;routeId:number;routeName:string;date:string;time:string;startStop:string;endStop:string;seatNumber:string;status:string;}

初始化页面状态

@StateprivateselectedDate:string='2026-07-19';@StateprivatenextReserveId:number=5;

初始数据包含3条校车线路和预约记录。

预约座位

privatereserveSeat(routeId:number,time:string,start:string,end:string):void{constseat=String(Math.floor(Math.random()*40)+1)+'座';constres:Reservation={id:this.nextReserveId,routeId,routeName:'',date:this.selectedDate,time,startStop:start,endStop:end,seatNumber:seat,status:'已预约'};this.reservations=[res,...this.reservations];this.nextReserveId++;}

取消预约

privatecancelReservation(resId:number):void{this.reservations=this.reservations.map(r=>r.id===resId?{...r,status:'已取消'}:r);}

主题色：水鸭色#14B8A6，体现交通、出行、便捷的感觉。

统计数据

• 已预约次数
• 收藏线路数
• 本月乘坐次数
• 累计节省时间

页面设计说明

顶部统计卡片，线路列表，时刻表，预约弹窗，我的预约。线路使用卡片展示，余座用进度条显示。

SDK 配置

API 24。

运行项目

entry/src/main/ets/pages/Index.ets

项目总结

实现了校车时刻查询、座位预约、收藏、乘坐记录等功能。掌握了列表展示、预约流程、收藏功能、状态管理等。后续可加入实时定位、扫码乘车、校车拥挤度显示、拼车功能等。