HarmonyOS ArkTS 实战：实现一个校园迎新与报到注册应用

HarmonyOS ArkTS 实战实现一个校园迎新与报到注册应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园迎新与报到注册应用。应用可以帮助新生完成线上报到填写个人信息缴纳学费查看报到流程分配宿舍并提供迎新志愿者对接、报到统计和流程进度跟踪等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍本项目实现了以下功能新生信息填写报到流程指引学费缴纳宿舍分配查询班级和辅导员信息迎新志愿者对接报到进度跟踪绿色通道申请报到统计校园地图导航常见问题解答定义数据结构首先定义报到流程和新生信息的数据结构interfaceReportStep{id:number;name:string;description:string;location:string;status:string;completeTime:string;}interfaceNewStudent{id:number;studentId:string;name:string;gender:string;idCard:string;college:string;major:string;className:string;counselor:string;counselorPhone:string;dormBuilding:string;dormRoom:string;volunteer:string;volunteerPhone:string;totalFee:number;paidFee:number;reportStatus:string;reportTime:string;steps:ReportStep[];}字段说明如下ReportStep报到步骤id步骤编号name步骤名称description步骤说明location办理地点status状态未开始/进行中/已完成completeTime完成时间NewStudent新生信息id编号studentId学号name姓名gender性别idCard身份证号college学院major专业className班级counselor辅导员counselorPhone辅导员电话dormBuilding宿舍楼dormRoom宿舍号volunteer对接志愿者volunteerPhone志愿者电话totalFee应缴费用paidFee已缴费用reportStatus报到状态未报到/报到中/已报到reportTime报到时间steps报到步骤列表初始化页面状态使用State保存新生信息、当前步骤StateprivatenameText:string;StateprivatestudentIdText:string;StateprivateidCardText:string;StateprivatephoneText:string;StateprivatecurrentStep:number0;StateprivategreenChannel:booleanfalse;StateprivatenextStudentId:number2;准备一些初始新生数据Stateprivatestudents:NewStudent[][{id:1,studentId:20260001,name:张新生,gender:男,idCard:310***********1234,college:计算机学院,major:计算机科学与技术,className:计科2601班,counselor:李老师,counselorPhone:138****1001,dormBuilding:12号楼,dormRoom:302室,volunteer:王学长,volunteerPhone:139****2002,totalFee:7800,paidFee:7800,reportStatus:已报到,reportTime:2026-09-01 09:30,steps:[{id:1,name:身份验证,description:核验录取通知书和身份证,location:正门迎新点,status:已完成,completeTime:2026-09-01 08:30},{id:2,name:学院报到,description:到学院迎新点登记,location:计算机学院楼,status:已完成,completeTime:2026-09-01 08:50},{id:3,name:费用缴纳,description:缴纳学费住宿费,location:财务处,status:已完成,completeTime:2026-09-01 09:00},{id:4,name:宿舍入住,description:领取钥匙入住宿舍,location:12号楼,status:已完成,completeTime:2026-09-01 09:20},{id:5,name:领取物资,description:领取军训服和校园卡,location:大学生活动中心,status:已完成,completeTime:2026-09-01 09:30}]}];新生报到注册新生填写信息完成报到privatesubmitReport():void{constnamethis.nameText.trim();conststudentIdthis.studentIdText.trim();constidCardthis.idCardText.trim();if(name.length0||studentId.length0||idCard.length0){return;}conststeps:ReportStep[][{id:1,name:身份验证,description:核验录取通知书和身份证,location:正门迎新点,status:进行中,completeTime:},{id:2,name:学院报到,description:到学院迎新点登记,location:各学院楼,status:未开始,completeTime:},{id:3,name:费用缴纳,description:缴纳学费住宿费,location:财务处/线上,status:未开始,completeTime:},{id:4,name:宿舍入住,description:领取钥匙入住宿舍,location:各宿舍楼,status:未开始,completeTime:},{id:5,name:领取物资,description:领取军训服和校园卡,location:大学生活动中心,status:未开始,completeTime:}];conststudent:NewStudent{id:this.nextStudentId,studentId,name,gender:男,idCard,college:计算机学院,major:计算机科学与技术,className:计科2601班,counselor:李老师,counselorPhone:138****1001,dormBuilding:12号楼,dormRoom:305室,volunteer:王学长,volunteerPhone:139****2002,totalFee:this.greenChannel?0:7800,paidFee:0,reportStatus:报到中,reportTime:,steps};this.students[student,...this.students];this.nextStudentId1;this.nameText;this.studentIdText;this.idCardText;this.phoneText;}完成报到步骤逐步完成报到流程privatecompleteStep(studentId:number,stepId:number):void{constnownewDate();consttimeStr${now.getFullYear()}-${String(now.getMonth()1).padStart(2,0)}-${String(now.getDate()).padStart(2,0)}${String(now.getHours()).padStart(2,0)}:${String(now.getMinutes()).padStart(2,0)};this.studentsthis.students.map((student:NewStudent){if(student.studentIdstudentId){constupdatedStepsstudent.steps.map((step:ReportStep,index:number){if(step.idstepId){return{...step,status:已完成,completeTime:timeStr};}if(step.status未开始student.steps[index-1]?.idstepId){return{...step,status:进行中};}returnstep;});constallCompletedupdatedSteps.every(ss.status已完成);constallPaidstudent.paidFeestudent.totalFee;return{...student,steps:updatedSteps,reportStatus:allCompletedallPaid?已报到:报到中,reportTime:allCompletedallPaid?timeStr:};}returnstudent;});}缴纳学费privatepayFee(studentId:number,amount:number):void{this.studentsthis.students.map((student:NewStudent){if(student.studentIdstudentId){constnewPaidMath.min(student.paidFeeamount,student.totalFee);return{...student,paidFee:newPaid};}returnstudent;});}绿色通道申请家庭经济困难学生可以申请绿色通道privateapplyGreenChannel(studentId:number):void{this.studentsthis.students.map((student:NewStudent){if(student.studentIdstudentId){return{...student,totalFee:0,greenChannel:true};}returnstudent;});}报到进度计算privategetProgress(student:NewStudent):number{constcompletedstudent.steps.filter(ss.status已完成).length;returnMath.round((completed/student.steps.length)*100);}统计数据privategetTotalStudents():number{returnthis.students.length;}privategetReportedCount():number{returnthis.students.filter(ss.reportStatus已报到).length;}privategetReportingCount():number{returnthis.students.filter(ss.reportStatus报到中).length;}privategetTotalFeePaid():number{returnthis.students.reduce((sum,s)sums.paidFee,0);}顶部统计区域展示总人数、已报到、报到中、已缴费用this.StatCard(新生总数,${this.getTotalStudents()},#0EA5E9,#F0F9FF);this.StatCard(已报到,${this.getReportedCount()},#059669,#ECFDF5);this.StatCard(报到中,${this.getReportingCount()},#F59E0B,#FFFBEB);this.StatCard(已缴费用,¥${this.getTotalFeePaid()},#2563EB,#EFF6FF);设置状态颜色privategetStepStatusColor(status:string):ResourceColor{if(status已完成)return#059669;if(status进行中)return#0EA5E9;return#9CA3AF;}privategetReportStatusColor(status:string):ResourceColor{if(status已报到)return#059669;if(status报到中)return#F59E0B;return#DC2626;}privategetReportStatusBgColor(status:string):ResourceColor{if(status已报到)return#DCFCE7;if(status报到中)return#FEF3C7;return#FEE2E2;}绿色已完成/已报到天蓝色进行中橙色报到中红色未报到灰色未开始天蓝色系页面主题色报到流程时间线使用垂直时间线展示报到步骤Column(){ForEach(student.steps,(step:ReportStep,index:number){Row(){Column(){Circle().width(24).height(24).fill(this.getStepStatusColor(step.status))if(indexstudent.steps.length-1){Divider().vertical(true).height(40).color(#E5E7EB)}}.width(30).alignItems(HorizontalAlign.Center)Column(){Text(step.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#111827)Text(step.description).fontSize(12).fontColor(#6B7280).margin({top:4})Text(地点${step.location}).fontSize(12).fontColor(#0EA5E9).margin({top:2})}.alignItems(HorizontalAlign.Start).layoutWeight(1).margin({left:12})}.width(100%).alignItems(VerticalAlign.Top)},(step:ReportStep)step.id.toString())}.width(100%)页面设计说明应用使用天蓝色作为主题色体现青春、欢迎、希望的迎新氛围。页面主要分为以下区域顶部欢迎横幅报到数据统计新生报到表单我的报到信息卡片报到流程时间线缴费和绿色通道入口志愿者和辅导员联系信息页面采用浅灰色背景和白色卡片。报到进度使用进度条展示流程步骤使用时间线样式已完成步骤使用绿色对勾标记进行中步骤使用天蓝色高亮联系电话使用可点击样式。SDK 配置本项目使用 HarmonyOS API 24满足 API 23 及以上要求{ name: default, compatibleSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS, targetSdkVersion: 6.1.1(24), compileSdkVersion: 6.1.1(24) }entry 模块中的运行系统也要保持一致{ apiType: stageMode, targets: [ { name: default, runtimeOS: HarmonyOS } ] }运行项目使用 DevEco Studio 打开项目然后找到entry/src/main/ets/pages/Index.ets等待项目同步完成点击右侧的Preview按钮即可查看应用效果。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园迎新与报到注册应用。项目实现了新生信息填写、报到流程指引、学费缴纳、宿舍分配查询、志愿者对接、进度跟踪、绿色通道、报到统计等功能。通过这个项目可以掌握ArkTS 接口定义和步骤数据结构State状态管理流程进度跟踪时间线组件布局List和ForEach列表渲染进度条计算自定义Builder组件HarmonyOS 迎新类应用布局后续还可以加入人脸识别报到、扫码签到、校园导航、新生群聊、迎新直播、家长端、行李托运、军训服装尺码选择和报到预约时段等功能。