抖音小程序 - 大学社团

一、商品详情介绍

「大学社团」是一款面向高校学生群体的校园社团管理与服务演示小程序，以「发现社团 — 加入社团 — 参与活动 — 累计学分」为主线，完整还原校园社团运营的核心场景。界面采用青春活力的紫色梦幻主题，搭配渐变卡片、浮动标签、进度条与丰富动效，呈现现代化、年轻化的视觉体验。

本程序为纯前端原生抖音小程序，所有数据均通过本地 mock-api.js 模拟接口读写，无需后端服务即可独立运行，适合作为校园社交类小程序的二次开发模板或教学演示项目。

二、核心功能

1. 首页（发现）

• 顶部搜索栏：支持按社团名称、标签关键词搜索
• 轮播 Banner：展示招新季、活动月、志愿服务等主题海报
• 数据统计卡片：社团总数、我的社团、已报活动、累计学分
• 社团分类九宫格：学术研讨、文艺演出、体育竞技、科技创新、公益志愿等
• 热门社团推荐（双列瀑布卡片）
• 最新活动列表（带报名进度条）

2. 社团广场

• 多分类筛选标签（支持横向选择切换）
• 关键词实时搜索（带清除按钮）
• 社团卡片展示：图标、级别、招新状态、标签、成员数、加入状态
• 创建社团入口

3. 社团详情

• Hero 渐变头部：社团图标、名称、口号、级别、招新状态、成员数、活动数
• 三 Tab 切换：社团介绍 / 社团活动 / 核心成员
• 社团信息卡：分类、社长、活动地点、成立时间
• 活动列表与成员展示
• 底部固定操作栏：加入 / 退出社团

4. 创建社团

• 表单填写：名称、口号、分类、级别、活动地点、标签、简介
• 图标可视化选择（6 种预设图标）
• 输入校验与提交反馈

5. 活动中心

• 四 Tab 筛选：全部 / 报名中 / 已满员 / 我报名
• 活动卡片：封面、学分奖励、社团、时间、地点、报名进度条、状态
• 发起活动入口

6. 活动详情

• 渐变 Hero 头部展示活动主题
• 报名进度可视化（百分比 + 进度条）
• 活动信息卡：开始 / 结束时间、地点、名额、奖励学分
• 活动介绍、所属社团跳转
• 底部操作栏：立即报名 / 取消报名（带二次确认）

7. 发起活动

• 选择所属社团、填写标题、时间、地点、名额、学分、介绍
• 封面图标可视化选择

8. 个人中心

• 渐变 Hero 用户卡片（含学号、学院、年级）
• 三项数据统计：我的社团、报名活动、累计学分
• 我的社团列表、我的活动列表
• 更多功能菜单：学分、消息、收藏、帮助、关于、重置演示数据

三、使用场景

四、交付内容

1. 源码包

• 文件名：源码_大学社团.zip
• 内容：完整可运行的抖音小程序源代码
• 目录结构：

  源码_大学社团/
  ├── app.js                    # 小程序入口（含版本号缓存清理机制）
  ├── app.json                  # 全局配置（9 个页面 + 自定义 tabbar）
  ├── app.ttss                  # 全局样式（CSS 变量主题）
  ├── project.config.json       # 抖音开发者工具配置
  ├── assets/
  │   └── icons/                # 图标库（9 色 × 67 图标）
  ├── components/
  │   ├── tabbar/               # 底部导航组件
  │   └── empty/                # 空状态组件
  ├── utils/
  │   └── mock-api.js           # 模拟接口（增删改查）
  └── pages/                    # 9 个业务页面
      ├── index/                # 首页
      ├── club/                 # 社团广场
      ├── club-detail/          # 社团详情
      ├── club-form/            # 创建社团
      ├── activity/             # 活动中心
      ├── activity-detail/      # 活动详情
      ├── activity-form/        # 发起活动
      ├── member/               # 成员列表
      └── my/                   # 个人中心
  

2. 文档

• 项目标题.txt：项目正式名称
• 源码摘要.txt：100 字以内源码用途简介
• 商品详情介绍.md：本文档（功能介绍 / 使用场景 / 交付内容）

五、技术特点

• 原生开发：使用抖音小程序原生框架，无第三方 UI 库依赖
• 数据模拟：完整的 mock-api 接口层，模拟社团 / 活动 / 成员 / 通知的增删改查
• 缓存管理：APP_VER 版本号机制，版本升级时自动清空旧数据，保证真机调试始终使用最新数据
• 响应式布局：采用 rpx + 百分比 + calc() 布局，双列卡片在不同机型保持一致
• 自定义导航：navigationStyle: custom，完美适配状态栏与原生胶囊按钮
• 组件化：封装 tabbar、empty 公共组件，便于复用

六、运行方式

1. 下载并安装「抖音开发者工具」
2. 解压 源码_大学社团.zip
3. 开发者工具中选择「导入项目」，目录指向解压后的 源码_大学社团 文件夹
4. AppID 填写自己申请的小程序 AppID（或使用测试号）
5. 点击「预览」或「真机调试」即可运行

提示：本项目为纯演示用途，不涉及真实接口调用，所有数据保存在本地存储中。