Skip to content
This repository was archived by the owner on Sep 22, 2026. It is now read-only.

Repository files navigation

cocanvas校园拼图

让校园组队变得简单、安全、有趣!

🎯 项目目的

cocanvas校园拼图是一个专为大学生打造的校园组队小程序,旨在解决大学生在校园生活中组队难、信息不对称、沟通效率低等问题。通过智能匹配、实时沟通、安全认证等功能,帮助学生快速找到志同道合的伙伴,组建学习小组、科研团队、竞赛队伍等,提升校园社交效率和学习协作质量。

核心价值

  • 降低组队门槛 - 简化组队流程,让组队变得更容易
  • 提高匹配效率 - 智能推荐算法,精准匹配志同道合的伙伴
  • 保障信息安全 - 实名认证,安全可靠的校园环境
  • 促进学习协作 - 营造良好的学习氛围,提升协作效率

🏗️ 系统架构

整体架构图

┌─────────────────────────────────────────────────────────────┐
│                    微信小程序前端                              │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   用户模块   │  │   组队模块   │  │   搜索模块   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   聊天模块   │  │   个人中心   │  │   分享模块   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                   微信云开发后端                              │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │   云函数层   │  │   云数据库   │  │   云存储层   │         │
│  │             │  │             │  │             │         │
│  │ • login     │  │ • users     │  │ • 图片存储   │         │
│  │ • createTeam│  │ • teams     │  │ • 文件存储   │         │
│  │ • getTeamList│ │ • applications│ │ • 头像存储   │         │
│  │ • search    │  │ • chat_sessions│ │             │         │
│  │ • chat      │  │ • messages  │  │             │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

技术架构

  • 前端框架: 微信小程序原生框架
  • 后端服务: 微信云开发(云函数 + 云数据库 + 云存储)
  • 数据存储: MongoDB(云数据库)
  • 实时通信: 云数据库监听 + 云函数触发器
  • 文件存储: 云存储
  • 安全认证: 微信授权 + 手机验证码

✨ 核心功能

1. 用户模块 👤

功能描述: 用户注册、登录、资料管理、个人主页展示

主要功能:

  • 📝 手机验证码登录 - 安全便捷的登录方式
  • 👤 个人资料管理 - 完善个人信息、技能标签、兴趣爱好
  • 🎯 个人主页 - 展示个人动态、参与组队、技能展示
  • 📤 分享功能 - 分享个人主页到微信、朋友圈
  • 🔒 隐私设置 - 控制信息可见性,保护个人隐私

技术实现:

  • 云函数: login - 处理用户登录逻辑
  • 数据库: users 集合存储用户信息
  • 前端: 表单验证、数据绑定、状态管理

2. 组队模块 👥

功能描述: 组队创建、浏览、申请、管理

主要功能:

  • 🔍 组队列表 - 浏览所有组队,支持类型筛选、状态筛选
  • ➕ 创建组队 - 发布新组队,自定义类型、要求、截止时间
  • 📋 组队详情 - 查看组队详细信息、成员列表、申请状态
  • 👥 我的组队 - 管理创建和参与的组队
  • 📝 申请加入 - 申请加入感兴趣的组队,支持申请理由
  • 🔄 状态管理 - 组队状态流转(招募中、已满员、已结束)

技术实现:

  • 云函数: createTeam, getTeamList, getTeamDetail, applyTeam
  • 数据库: teams, applications 集合
  • 前端: 列表渲染、表单处理、状态同步

3. 搜索模块 🔍

功能描述: 智能搜索、推荐算法、搜索历史

主要功能:

  • 🔎 智能搜索 - 支持用户和组队搜索,模糊匹配
  • 📊 搜索历史 - 记录用户搜索历史,快速重复搜索
  • 🔥 热门搜索 - 展示热门搜索关键词,发现热门内容
  • 💡 搜索建议 - 智能搜索推荐,提升搜索体验
  • 🏷️ 标签搜索 - 支持技能标签、兴趣标签搜索

技术实现:

  • 云函数: search - 处理搜索逻辑,支持多字段模糊匹配
  • 数据库: 索引优化,提升搜索性能
  • 前端: 搜索输入、结果展示、历史管理

4. 聊天模块 💬

功能描述: 实时沟通、消息管理、文件传输

主要功能:

  • 💬 1对1聊天 - 实时沟通交流,支持文字、表情
  • 📱 联系方式 - 请求查看联系方式,保护隐私
  • 📄 查看资料 - 查看对方详细资料,了解背景
  • 📊 竞争分析 - PK情况展示,了解竞争关系
  • 📎 文件发送 - 支持图片、文件发送,丰富沟通方式
  • 🔔 消息通知 - 新消息提醒,不错过重要信息

技术实现:

  • 云函数: getChatSessions, getMessages, sendMessage
  • 数据库: chat_sessions, messages 集合
  • 前端: 消息列表、聊天界面、文件上传

🎨 UI设计

设计理念

  • 简约现代 - 采用扁平化设计,界面简洁清晰
  • 用户友好 - 注重用户体验,操作流程简单直观
  • 专业可信 - 借鉴LinkedIn等专业平台的设计理念
  • 校园风格 - 符合大学生审美,充满青春活力

配色方案

/* 主色调 */
--primary-color: #2196F3;      /* 蓝色 - 专业可信 */
--secondary-color: #4CAF50;     /* 绿色 - 成功状态 */
--accent-color: #FF9800;       /* 橙色 - 警告提醒 */

/* 辅助色 */
--background-color: #f5f5f5;   /* 浅灰 - 页面背景 */
--text-primary: #333333;      /* 深灰 - 主要文字 */
--text-secondary: #666666;     /* 中灰 - 次要文字 */
--border-color: #e0e0e0;      /* 浅灰 - 边框分割 */

页面设计

1. 登录页面

  • 设计特点: 简洁大方,突出品牌形象
  • 主要元素: Logo、手机号输入、验证码、登录按钮
  • 交互设计: 一键获取验证码,自动填充手机号

2. 个人中心

  • 设计特点: 信息层次清晰,操作便捷
  • 主要元素: 头像、基本信息、技能标签、操作按钮
  • 交互设计: 点击编辑,滑动查看更多

3. 组队列表

  • 设计特点: 卡片式布局,信息丰富
  • 主要元素: 组队标题、类型标签、成员数量、截止时间
  • 交互设计: 下拉刷新,上拉加载,筛选功能

4. 组队详情

  • 设计特点: 信息完整,操作明确
  • 主要元素: 详细描述、成员列表、申请按钮、分享功能
  • 交互设计: 滚动查看,一键申请,状态反馈

5. 搜索页面

  • 设计特点: 搜索体验流畅,结果展示清晰
  • 主要元素: 搜索框、类型切换、历史记录、热门搜索
  • 交互设计: 实时搜索,结果高亮,快速筛选

6. 聊天界面

  • 设计特点: 对话式布局,消息清晰
  • 主要元素: 消息气泡、时间戳、状态指示、输入框
  • 交互设计: 长按操作,滑动删除,语音输入

🚀 快速开始

环境要求

  • 微信开发者工具(最新版本)
  • 微信小程序账号(已认证)
  • 云开发环境(免费版即可)

安装步骤

1. 克隆项目

git clone https://github.com/your-username/cocanvas.git
cd cocanvas

2. 导入项目

  1. 打开微信开发者工具
  2. 选择"导入项目"
  3. 选择项目文件夹
  4. 填写AppID(必须使用真实AppID)

3. 配置云开发

详细步骤请查看:CLOUD_SETUP.md

简要步骤:

  1. 在微信开发者工具中点击"云开发"
  2. 开通云开发环境
  3. 创建数据库集合:
    • users - 用户信息
    • teams - 组队信息
    • applications - 申请记录
    • chat_sessions - 聊天会话
    • messages - 消息记录
  4. 上传云函数(右键云函数目录 → 上传并部署)
  5. 修改 miniprogram/app.js 中的环境ID

4. 编译运行

  1. 点击"编译"按钮
  2. 在模拟器中查看效果
  3. 真机调试测试完整功能

📦 技术栈

前端技术

  • 框架: 微信小程序原生框架
  • 语言: JavaScript ES6+、WXML、WXSS
  • 状态管理: 小程序原生状态管理
  • 组件化: 自定义组件开发
  • 样式: WXSS + CSS3

后端技术

  • 云函数: Node.js + 微信云开发SDK
  • 数据库: MongoDB(云数据库)
  • 存储: 云存储
  • 安全: 微信授权 + 云函数权限控制

开发工具

  • IDE: 微信开发者工具
  • 版本控制: Git
  • 调试: 微信开发者工具调试器
  • 部署: 微信云开发控制台

🔧 开发说明

项目结构

cocanvas/
├── miniprogram/                 # 小程序前端
│   ├── pages/                   # 页面文件
│   │   ├── login/              # 登录页面
│   │   ├── profile/            # 个人中心
│   │   ├── user-profile/       # 用户主页
│   │   ├── team/               # 组队相关页面
│   │   ├── search/             # 搜索页面
│   │   ├── search-recommend/   # 智能推荐
│   │   └── chat/               # 聊天页面
│   ├── config/                 # 配置文件
│   ├── utils/                  # 工具函数
│   ├── services/               # API服务
│   ├── constants/              # 常量定义
│   ├── app.js                  # 应用入口
│   ├── app.json                # 应用配置
│   └── sitemap.json            # 站点地图
├── cloudfunctions/             # 云函数
│   ├── login/                  # 用户登录
│   ├── createTeam/             # 创建组队
│   ├── getTeamList/            # 获取组队列表
│   ├── getTeamDetail/          # 获取组队详情
│   ├── applyTeam/              # 申请加入组队
│   ├── search/                 # 搜索功能
│   ├── getChatSessions/        # 获取聊天会话
│   ├── getMessages/            # 获取消息
│   └── sendMessage/            # 发送消息
├── project.config.json         # 项目配置
└── README.md                   # 项目文档

配置文件说明

  • user_config.js - 用户字段配置、验证规则
  • team_config.js - 组队类型配置、状态管理
  • chat_config.js - 聊天配置、消息类型
  • search_recommend_config.js - 搜索推荐算法配置

API接口设计

// 用户相关
login(phone, code)              // 用户登录
getUserInfo(userId)             // 获取用户信息
updateUserInfo(userId, data)    // 更新用户信息

// 组队相关
createTeam(teamData)            // 创建组队
getTeamList(filters)            // 获取组队列表
getTeamDetail(teamId)           // 获取组队详情
applyTeam(teamId, reason)       // 申请加入组队

// 搜索相关
search(keyword, type)           // 搜索功能
getSearchHistory()              // 获取搜索历史
getHotSearches()                 // 获取热门搜索

// 聊天相关
getChatSessions()               // 获取聊天会话
getMessages(sessionId)          // 获取消息列表
sendMessage(sessionId, content)  // 发送消息

📝 开发规范

代码规范

  • 命名规范: 驼峰命名法,语义化命名
  • 注释规范: 关键函数必须添加注释
  • 代码风格: 统一使用ES6+语法,单引号
  • 文件组织: 按功能模块组织文件结构

提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具相关

版本管理

  • 使用Git进行版本控制
  • 主分支为main
  • 功能开发使用特性分支
  • 提交前必须通过代码审查

🗺️ 开发路线图

✅ 已完成功能

  • 用户登录/注册系统
  • 组队创建/浏览功能
  • 智能搜索功能
  • 基础聊天功能
  • 个人主页展示
  • 资料编辑功能
  • 分享功能
  • 云开发集成
  • 数据库设计
  • API接口开发

🚧 开发中功能

  • 真实短信验证码集成
  • 实时消息推送
  • 图片上传功能
  • 消息已读状态
  • 组队审核流程

📅 计划功能

  • 用户评价系统
  • 成就徽章系统
  • 数据统计分析
  • AI推荐算法优化
  • 消息推送通知
  • 多语言支持
  • 离线缓存功能

📁 重要文档

🤝 贡献指南

欢迎提交Issue和Pull Request!

贡献流程

  1. Fork项目
  2. 创建特性分支
  3. 提交代码
  4. 发起Pull Request

代码贡献

  • 遵循项目代码规范
  • 添加必要的测试
  • 更新相关文档
  • 确保代码质量

📄 开源协议

MIT License

👥 团队

cocanvas开发团队

📮 联系方式

如有问题或建议,欢迎联系我们!


让校园组队变得更简单! 🎓✨

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages