HarmonyOS ArkTS 实战实现一个校园门禁与访客预约应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园门禁与访客预约应用。应用可以生成校园通行码预约访客入校查看门禁通行记录申请晚归权限并提供访客审批、出入统计和二维码通行等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍本项目实现了以下功能校园通行码生成访客预约登记访客审批二维码通行门禁记录查询晚归申请出入统计通行权限管理访客二维码异常记录提醒定义数据结构interfaceAccessRecord{id:number;personName:string;gateName:string;direction:string;time:string;type:string;status:string;}interfaceVisitor{id:number;name:string;phone:string;idCard:string;visitReason:string;visitTime:string;hostName:string;hostDept:string;status:string;qrCode:string;applyTime:string;}字段说明AccessRecord门禁记录id/姓名/门禁点/方向/时间/类型/状态Visitor访客id/姓名/电话/身份证/事由/访问时间/被访人/被访部门/状态/二维码/申请时间初始化页面状态StateprivatevisitorNameText:string;StateprivatevisitorPhoneText:string;StateprivatevisitReasonText:string;StateprivatevisitTimeText:string;StateprivatenextVisitorId:number5;StateprivatecurrentUserName:string王同学;初始数据Stateprivatevisitors:Visitor[][{id:1,name:张家长,phone:138****1234,idCard:310***********1234,visitReason:探望学生,visitTime:2026-07-20 14:00,hostName:王同学,hostDept:计算机学院,status:已通过,qrCode:V20260720001,applyTime:2026-07-18}];StateprivateaccessRecords:AccessRecord[][{id:1,personName:王同学,gateName:正门,direction:进入,time:2026-07-18 08:30,type:学生,status:正常},{id:2,personName:王同学,gateName:图书馆闸机,direction:进入,time:2026-07-18 09:15,type:学生,status:正常}];预约访客privateapplyVisitor():void{constnamethis.visitorNameText.trim();constphonethis.visitorPhoneText.trim();constreasonthis.visitReasonText.trim();consttimethis.visitTimeText.trim();if(name.length0||phone.length0)return;constqrCodeVnewDate().toISOString().slice(0,10).replace(/-/g,)String(this.nextVisitorId).padStart(3,0);constvisitor:Visitor{id:this.nextVisitorId,name,phone,idCard:,visitReason:reason,visitTime:time,hostName:this.currentUserName,hostDept:计算机学院,status:待审批,qrCode,applyTime:newDate().toISOString().split(T)[0]};this.visitors[visitor,...this.visitors];this.nextVisitorId;this.visitorNameText;this.visitorPhoneText;this.visitReasonText;this.visitTimeText;}审批访客privateapproveVisitor(visitorId:number,approved:boolean):void{this.visitorsthis.visitors.map((v:Visitor){if(v.idvisitorIdv.status待审批){return{...v,status:approved?已通过:已拒绝};}returnv;});}统计数据privategetTodayInCount():number{returnthis.accessRecords.filter(rr.direction进入r.time.includes(2026-07-18)).length;}privategetPendingVisitorCount():number{returnthis.visitors.filter(vv.status待审批).length;}privategetApprovedVisitorCount():number{returnthis.visitors.filter(vv.status已通过).length;}设置状态颜色privategetVisitorStatusColor(status:string):ResourceColor{if(status已通过)return#059669;if(status待审批)return#F59E0B;if(status已拒绝)return#DC2626;return#6B7280;}主题色深橙色#C2410C体现安全、门禁、警示的感觉。页面设计说明页面分为顶部通行码区域、统计卡片、访客预约表单、访客列表、门禁记录列表。通行码使用居中大二维码样式访客状态使用彩色标签门禁记录使用时间轴展示。SDK 配置统一使用 API 24 配置。运行项目entry/src/main/ets/pages/Index.ets项目总结实现了门禁通行码、访客预约审批、出入记录、统计等功能。掌握了二维码展示、审批流程、状态管理、列表渲染等。后续可加入人脸识别、蓝牙开门、车辆通行、外卖人员登记等功能。