HarmonyOS ArkTS 实战：实现一个校园门禁与访客预约应用

项目效果

本文使用 HarmonyOS 和 ArkTS 实现一个校园门禁与访客预约应用。

应用可以生成校园通行码，预约访客入校，查看门禁通行记录，申请晚归权限，并提供访客审批、出入统计和二维码通行等功能。

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

运行效果

功能介绍

本项目实现了以下功能：

校园通行码生成
访客预约登记
访客审批
二维码通行
门禁记录查询
晚归申请
出入统计
通行权限管理
访客二维码
异常记录提醒

定义数据结构

typescript 复制代码

interface AccessRecord {
  id: number;
  personName: string;
  gateName: string;
  direction: string;
  time: string;
  type: string;
  status: string;
}

interface Visitor {
  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/姓名/电话/身份证/事由/访问时间/被访人/被访部门/状态/二维码/申请时间）

初始化页面状态

typescript 复制代码

@State private visitorNameText: string = '';
@State private visitorPhoneText: string = '';
@State private visitReasonText: string = '';
@State private visitTimeText: string = '';
@State private nextVisitorId: number = 5;
@State private currentUserName: string = '王同学';

初始数据：

typescript 复制代码

@State private visitors: 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' }
];

@State private accessRecords: 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: '正常' }
];

预约访客

typescript 复制代码

private applyVisitor(): void {
  const name = this.visitorNameText.trim();
  const phone = this.visitorPhoneText.trim();
  const reason = this.visitReasonText.trim();
  const time = this.visitTimeText.trim();
  if (name.length === 0 || phone.length === 0) return;

  const qrCode = 'V' + new Date().toISOString().slice(0,10).replace(/-/g,'') + String(this.nextVisitorId).padStart(3,'0');
  const visitor: Visitor = {
    id: this.nextVisitorId, name, phone, idCard: '', visitReason: reason,
    visitTime: time, hostName: this.currentUserName, hostDept: '计算机学院',
    status: '待审批', qrCode, applyTime: new Date().toISOString().split('T')[0]
  };
  this.visitors = [visitor, ...this.visitors];
  this.nextVisitorId++;
  this.visitorNameText = ''; this.visitorPhoneText = ''; this.visitReasonText = ''; this.visitTimeText = '';
}

审批访客

typescript 复制代码

private approveVisitor(visitorId: number, approved: boolean): void {
  this.visitors = this.visitors.map((v: Visitor) => {
    if (v.id === visitorId && v.status === '待审批') {
      return { ...v, status: approved ? '已通过' : '已拒绝' };
    }
    return v;
  });
}

统计数据

typescript 复制代码

private getTodayInCount(): number {
  return this.accessRecords.filter(r => r.direction === '进入' && r.time.includes('2026-07-18')).length;
}
private getPendingVisitorCount(): number {
  return this.visitors.filter(v => v.status === '待审批').length;
}
private getApprovedVisitorCount(): number {
  return this.visitors.filter(v => v.status === '已通过').length;
}

设置状态颜色

typescript 复制代码

private getVisitorStatusColor(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

项目总结

实现了门禁通行码、访客预约审批、出入记录、统计等功能。掌握了二维码展示、审批流程、状态管理、列表渲染等。后续可加入人脸识别、蓝牙开门、车辆通行、外卖人员登记等功能。