抖音小程序 - 校友会
校友会演示小程序，面向高校毕业生与在校生，提供校友名录、按行业筛选、校友名片、关注互动、校友活动报名、消息列表与个人资料编辑等功能，纯前端实现，数据本地模拟，便于高校校友会组织二次开发与教学演示。
￥0.99
原价 ￥0.00
商品详情介绍
抖音小程序 - 校友会
一、商品详情介绍
「校友会」是一款面向高校校友会组织、毕业生及在校生的校友联络与服务演示小程序，以「找校友 — 关注互动 — 参加活动 — 维护资料」为核心链路，完整呈现校友会的日常运营场景。界面采用沉稳专业的蓝色主题，搭配渐变名片卡、行业筛选、活动进度条与校友动态时间线，兼顾商务感与亲和力。
本程序为纯前端原生抖音小程序，所有数据均通过本地 mock-api.js 模拟接口读写，无需后端服务即可独立运行，适合作为校友联络类小程序的二次开发模板或教学演示项目。
二、核心功能
1. 首页（校友之家）
- 顶部搜索栏：支持按姓名、公司、专业、城市搜索校友
- 轮播 Banner：返校日、行业沙龙、企业参访等主题
- 四宫格快捷入口：找校友 / 看活动 / 消息 / 校友圈
- 数据统计：校友总数、我关注、报名活动、未读消息
- 推荐校友（双列头像卡片）
- 热门活动列表（带报名进度条）
- 校友动态时间线（点赞、评论）
2. 校友录
- 按行业分类筛选：互联网、金融、教育、医疗、制造业、文化传媒
- 关键词实时搜索
- 校友列表卡：头像、姓名、职位、公司、年级、专业、城市、粉丝数、关注状态
3. 校友名片
- Hero 渐变名片头：头像、姓名、职位、公司、年级、城市
- 数据统计：粉丝数、关注状态
- 个人简介、就读信息、公司职位、行业等完整资料
- 底部操作栏：私信 / 关注 TA
4. 校友活动
- 四 Tab 筛选：全部 / 报名中 / 已满员 / 我报名
- 活动卡片：封面、免费标签、时间、地点、报名进度条、状态
5. 活动详情
- 渐变 Hero 头部展示活动主题
- 报名进度可视化（百分比 + 进度条）
- 活动信息卡：时间、地点、名额、费用
- 活动介绍
- 底部操作栏：立即报名 / 取消报名（带二次确认）
6. 资料编辑
- 编辑姓名、专业、年级、公司、职位、城市、行业、个人简介
- 输入校验与保存反馈
7. 消息列表
- 校友私信列表：头像、姓名、内容、时间、未读红点
8. 个人中心
- 渐变 Hero 用户卡片（含编辑入口）
- 数据统计：关注、活动、未读消息
- 我的活动、我的关注（双列校友卡片）
- 更多功能菜单：编辑资料、消息、动态、帮助、关于、重置演示数据
三、使用场景
| 场景 | 适用对象 |
|---|---|
| 高校校友会日常联络与活动组织 | 校友会办公室、校友志愿者协会 |
| 校友资源对接与行业交流 | 校友企业、校友导师计划 |
| 校友返校日、迎新晚宴等大型活动报名 | 校友活动组织方 |
| 校友录 / 通讯录类小程序二次开发模板 | 独立开发者、外包团队 |
| 社交关系类小程序教学实训项目 | 编程培训机构、高校实训课程 |
四、交付内容
1. 源码包
- 文件名：
源码_校友会.zip - 内容：完整可运行的抖音小程序源代码
- 目录结构：
源码_校友会/ ├── app.js # 小程序入口（含版本号缓存清理机制） ├── app.json # 全局配置（8 个页面 + 自定义 tabbar） ├── app.ttss # 全局样式（CSS 变量主题） ├── project.config.json # 抖音开发者工具配置 ├── assets/ │ └── icons/ # 图标库（9 色 × 67 图标） ├── components/ │ ├── tabbar/ # 底部导航组件 │ └── empty/ # 空状态组件 ├── utils/ │ └── mock-api.js # 模拟接口（增删改查） └── pages/ # 8 个业务页面 ├── index/ # 首页 ├── alumni/ # 校友录 ├── alumni-detail/ # 校友名片 ├── event/ # 校友活动 ├── event-detail/ # 活动详情 ├── profile-edit/ # 资料编辑 ├── message/ # 消息列表 └── my/ # 个人中心
2. 文档
项目标题.txt：项目正式名称源码摘要.txt：100 字以内源码用途简介商品详情介绍.md：本文档（功能介绍 / 使用场景 / 交付内容）
五、技术特点
- 原生开发：使用抖音小程序原生框架，无第三方 UI 库依赖
- 数据模拟：完整的 mock-api 接口层，模拟校友 / 活动 / 消息 / 动态的增删改查与关注、点赞
- 缓存管理：
APP_VER版本号机制，版本升级时自动清空旧数据，保证真机调试始终使用最新数据 - 响应式布局：采用
rpx+ 百分比 +calc()布局，双列卡片在不同机型保持一致 - 自定义导航：
navigationStyle: custom，完美适配状态栏与原生胶囊按钮 - 组件化：封装 tabbar、empty 公共组件，便于复用
六、运行方式
- 下载并安装「抖音开发者工具」
- 解压
源码_校友会.zip - 开发者工具中选择「导入项目」，目录指向解压后的
源码_校友会文件夹 - AppID 填写自己申请的小程序 AppID（或使用测试号）
- 点击「预览」或「真机调试」即可运行
提示：本项目为纯演示用途，不涉及真实接口调用，所有校友信息均为虚拟数据，请勿当作真实校友资料使用。