从0到1：文体社团活动小程序设计与实现（I）

项目背景

随着大众健康和文化意识的增强，文体社团活动日益频繁。本项目旨在开发一款基于微信小程序的“文体社团活动小程序”，为社团管理者提供活动发布、报名管理、进程管理及数据统计功能，同时为用户提供活动浏览、报名、打卡评比及反馈建议的服务。

核心功能模块

• 活动管理：活动发布（名称、时间、地点、费用等）、报名管理（收集信息、审核）、- 进程管理（签到、记录、照片）。
• 用户中心：浏览活动、报名参加、查看进程、意见反馈、我的报名记录。
• 打卡模块：每日文艺/体育/健身打卡（上传心得图片）、打卡排行、每日动态、目标管理。
• 后台管理：公告通知、社团风采管理、活动分类与列表、报名审核与数据导出、打卡- 项目管理与记录导出。
• 自定义表单：支持组织者自定义报名字段（姓名、性别、身份证、手机号等）。

技术架构

本项目采用 Serverless（无服务器） 架构，基于 微信小程序云开发（WeChat Cloud Development） 解决方案。

• 前端：微信小程序原生框架（WXML, WXSS, JavaScript/TypeScript）。
• 后端：微信云函数（Node.js环境），无需自建服务器。
• 数据库：微信云数据库（JSON文档型数据库，类似MongoDB）。
• 存储：微信云存储（用于存放活动照片、打卡图片等）。
• 优势：免域名、免服务器运维、高安全性（腾讯内部链路）、弹性扩展、成本低。

系统逻辑架构图

• 用户层：C端用户（社团成员）、B端用户（社团管理者/超级管理员admin）。
• 应用层：微信小程序界面（活动列表、详情页、报名表单、打卡页、个人中心、后台管理入口）。
• 服务层（云函数）：
• mcloud：核心业务逻辑云函数，处理增删改查、权限验证、数据统计。
• 定时器：处理活动状态更新、打卡结算等定时任务。
• 数据层：云数据库（集合包括：活动表、报名表、用户表、打卡记录表、社团表等）。

数据库设计

字段名	类型	说明
_id	String	主键，自动生成
title	String	活动名称
category	String	活动分类
location	String	活动地点
start_time	Date	开始时间
end_time	Date	结束时间
fee	Number	活动费用
deadline	Date	报名截止时间
max_participants	Number	最大人数限制
custom_fields	Array	自定义报名字段配置 (如: [{key:'id_card', label:'身份证'}])
status	String	状态 (报名中/进行中/已结束)
creator_id	String	创建者OpenID
create_time	Date	创建时间

字段名	类型	说明
_id	String	主键
activity_id	String	关联活动ID
user_openid	String	用户OpenID
user_info	Object	用户提交的具体信息 (动态字段，含姓名、手机等)
status	String	审核状态 (待审核/已通过/已拒绝)
check_in_status	Boolean	是否签到
signup_time	Date	报名时间

字段名	类型	说明
_id	String	主键
user_openid	String	用户OpenID
check_date	String	打卡日期 (YYYY-MM-DD)
type	String	打卡类型 (文艺/体育/健身)
content	String	心得体会文本
images	Array	图片URL列表 (云存储FileID)
score	Number	评分/积分
create_time	Date	提交时间

字段名	类型	说明
_id	String	主键 (OpenID)
nickname	String	昵称
avatar	String	头像URL
role	String	角色 (user/admin/super_admin)
phone	String	手机号 (可选)

关键代码实现示例

// cloudfunctions/mcloud/index.js (伪代码示意)
const cloud = require('wx-server-sdk');
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
const db = cloud.database();

exports.main = async (event, context) => {
  const { action, data } = event;
  
  if (action === 'create_activity') {
    // 验证管理员权限 (略)
    try {
      const result = await db.collection('activities').add({
        data: {
          title: data.title,
          location: data.location,
          start_time: new Date(data.start_time),
          // ... 其他字段
          creator_id: context.OPENID,
          create_time: db.serverDate()
        }
      });
      return { code: 0, msg: '发布成功', data: result };
    } catch (err) {
      return { code: -1, msg: '发布失败', error: err };
    }
  }
  // 处理其他动作...
};

// pages/activity/publish.js
wx.cloud.callFunction({
  name: 'mcloud',
  data: {
    action: 'create_activity',
    data: {
      title: '周末篮球赛',
      location: '学校体育馆',
      start_time: '2023-10-01 14:00:00',
      // ...
    }
  },
  success: res => {
    if (res.result.code === 0) {
      wx.showToast({ title: '发布成功' });
    } else {
      wx.showToast({ title: '发布失败', icon: 'none' });
    }
  },
  fail: err => {
    console.error(err);
  }
})

UI设计

后台管理系统设计

git 代码下载

点击下载