简介：一份基于微信小程序·云开发的在线问卷调查系统源码，属于高分课程设计项目，适合计算机相关专业正在完成课程设计、期末大作业的学生，以及需要项目实战练习的开发者。系统依托微信云开发能力，包含完整的前端小程序页面与云函数逻辑，可帮助学习者快速理解小程序项目结构和云端数据交互方式。资源包为zip格式，共61个文件，以JSON配置文件、WXSS样式、JS逻辑和WXML页面文件为主，另有图片、README说明文档等，包体约296KB，结构清晰便于按模块研读。目前已有194人学习下载。内容涵盖pages页面、style样式、colorui组件库、images静态资源及cloudfunctions云函数模块，目录划分明确，适合用于课程设计参考、二次开发或作为云开发实战练习的入门范例。
1. 从课程设计到可演示的在线问卷调查小程序
做微信小程序课程设计时，最容易被卡住的往往不是前端页面，而是后端联调。买服务器、配域名、写接口、部署数据库，这套流程没几周下不来，而且成本不低。云开发的思路完全不同：小程序前端直接调用云端能力，数据库、云函数、存储都在微信侧闭环，省掉服务器和备案。本系统要解决的就是「问卷创建 → 用户填写 → 数据统计 → 结果展示」这条完整链路，标题里「高分课程设计」这几个字，意味着不仅要跑通，还得在答辩现场讲得出设计理由、演示得流畅。这套方案适合正在选课设题目的在校生，也适合想快速搭一个轻量问卷工具的开发者。接下来按数据模型、前端实现、云函数统计、部署安全四个层面拆开讲，每步都能直接操作。
2. 云开发环境准备与问卷数据集合的设计
2.1 开通云开发环境并理解三个核心能力
微信开发者工具中，工具栏上有一个云开发按钮，点击后会弹出开通窗口。首次使用需要选择环境名称和环境 ID，计费方式选「按量付费」即可，免费额度对课程设计完全够用。开通后，工具左侧会出现「云开发」控制台入口，里面包含数据库、云函数、存储三大模块。
云开发的核心运行逻辑是：小程序端通过wx.cloud.database()直接操作数据库，或通过wx.cloud.callFunction()调用云函数。数据库是文档型存储，每个集合（类似关系型数据库的数据表）里存 JSON 文档。云函数跑在 Node.js 环境中，适合做聚合统计、权限校验等操作。存储用来放图片等静态资源，问卷系统的题图或附件可以放这里。
2.2 问卷系统需要哪几个集合
本系统的数据模型分为四个集合，每个集合承担独立职责：
| 集合名 | 存储内容 | 权限设置 |
|---|---|---|
questionnaires | 问卷标题、描述、题目列表、状态、创建时间 | 仅创建者可读写 |
answers | 每份答卷的提交内容、提交时间、关联问卷 ID、提交人 OpenID | 仅创建者可读写 |
users | 用户昵称、头像、 OpenID 映射 | 所有用户可读，仅创建者可写 |
stats_cache | 问卷统计结果的缓存文档 | 仅创建者可读写 |
权限设置在云开发控制台的「数据库 → 集合 → 权限设置」中完成。常见做法是「仅创建者可读写」，但 answers 集合需要允许填写者写入。更稳妥的方式是使用自定义安全规则：
{ "read": "doc._openid == auth.openid || get('database.questionnaires.' + doc.questionnaire_id + '._openid') == auth.openid", "write": "doc._openid == auth.openid || get('database.questionnaires.' + doc.questionnaire_id + '._openid') == auth.openid" }这段规则的含义是：只有问卷创建者本人，或提交答卷的用户，才能读写对应文档。自定义规则能防止用户越权读取他人问卷数据，答辩时被问到安全设计可直接拿这条说。
2.3 用初始化代码一键创建集合和索引
云开发控制台可以手动建集合，但如果换环境或换账号就要重来。项目根目录放一个init.js，在云函数中执行建集合并设置索引：
// cloudfunctions/init/index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() exports.main = async () => { const collections = ['questionnaires', 'answers', 'users', 'stats_cache'] const tasks = collections.map(name => db.createCollection(name)) await Promise.all(tasks) // 为 answers 集合创建复合索引:按 questionnaire_id 查询并按 create_time 倒序 await db.collection('answers').createIndex({ name: 'qid_time_idx', keys: [{ name: 'questionnaire_id', direction: 'ASC' }, { name: 'create_time', direction: 'DESC' }], unique: false }) return { success: true } }注意createIndex在部分基础库版本中可能被限制，替代方案是去控制台手动添加索引。问卷列表页如果要做分页加载，questionnaires集合同样建议加create_time的单字段索引。数据库集合在首次创建时为空，后续问卷的写入操作会动态创建文档，不需要预设字段结构，这也是文档型数据库相比关系型数据库灵活的地方。
3. 小程序端问卷列表、填写页与结果展示的实现
3.1 问卷列表页的加载与下拉刷新
列表页需要展示「进行中」「已结束」两类问卷。使用onShow生命周期触发数据加载，这样用户从详情页返回时列表自动刷新。
// pages/index/index.js const db = wx.cloud.database() Page({ data: { list: [], loading: false }, async onShow() { this.fetchList() }, async fetchList() { this.setData({ loading: true }) const res = await db.collection('questionnaires') .where({ status: 'published' }) .orderBy('create_time', 'desc') .limit(20) .get() this.setData({ list: res.data, loading: false }) }, onPullDownRefresh() { this.fetchList().finally(() => wx.stopPullDownRefresh()) } })limit(20)是云开发数据库单次查询的上限，超过 20 条要做分页。orderBy之前必须在控制台为create_time建索引，否则会报错「index not found」。列表页的enablePullDownRefresh要在app.json或页面 json 中开启，下拉刷新对答辩演示时的数据更新很关键。
3.2 动态表单渲染：让问卷题目驱动页面
问卷的核心是「题目数据结构决定页面渲染」。后台配置好题目 JSON，前端解析后动态渲染不同的输入组件。题目类型至少覆盖单选、多选、文本、评分四类。
// 题目结构示例 const question = { id: 'q1', type: 'radio', // radio / checkbox / text / score title: '你使用微信支付的频率是？', options: ['每天', '每周', '每月'], required: true }渲染层使用wx:for循环题目列表，按类型切换组件：
<!-- pages/fill/fill.wxml --> <view wx:for="{{questions}}" wx:key="id" class="question-card"> <view class="q-title">{{item.title}} <text wx:if="{{item.required}}" class="required">*</text></view> <radio-group wx:if="{{item.type === 'radio'}}" bindchange="handleChange">// pages/fill/fill.js handleChange(e) { const qid = e.currentTarget.dataset.qid this.setData({ [`formData.${qid}`]: e.detail.value }) }, validateForm() { const { questions, formData } = this.data for (const q of questions) { if (q.required && !formData[q.id]) { wx.showToast({ title: `请完成必填题`, icon: 'none' }) return false } } return true }用「计算属性名」[formData.${qid}]直接更新表单对象，比先取出整个对象再赋值再 setData 更高效。对于多选和评分类题目，e.detail.value是一个数组或数值，提交前需要做类型规范化，统一转成字符串存储，方便后续统计。
3.3 管理端：新建问卷与题目编辑器
管理端页面包含两个 Tab：已创建的问卷列表和新建问卷。新建流程拆成三步：填写基本信息 → 添加题目 → 发布。题目编辑器用数组维护题目列表，每个题目一个对象，支持上下移动、复制、删除。
// pages/manage/edit.js addQuestion() { const newQ = { id: 'q_' + Date.now(), type: 'radio', title: '', options: [''], required: false } this.setData({ questions: [...this.data.questions, newQ] }) }, updateQuestionType(e) { const index = e.currentTarget.dataset.index const type = e.detail.value this.setData({ [`questions[${index}].type`]: type, [`questions[${index}].options`]: type === 'text' ? [] : this.data.questions[index].options }) }选项的动态增删也是高频操作，维护一个局部数组，每个选项行的删除按钮绑定索引。随时保存到本地缓存，避免编写过程中意外退出丢失数据。发布时调用db.collection('questionnaires').add()写入云数据库，同时把status字段设为published，未发布的问卷存为draft。
3.4 答卷提交与结果可视化
提交答卷时，需要把答题数据合并成一条文档写入 answers 集合。除了表单内容，还要额外记录questionnaire_id和create_time。
// pages/fill/fill.js async submitForm() { if (!this.validateForm()) return wx.showLoading({ title: '提交中' }) try { await db.collection('answers').add({ data: { questionnaire_id: this.data.qid, content: this.data.formData, create_time: db.serverDate() } }) wx.hideLoading() wx.redirectTo({ url: '/pages/done/done' }) } catch (err) { wx.hideLoading() wx.showToast({ title: '提交失败', icon: 'none' }) } }db.serverDate()是云端时间，避免用户修改本机时间导致统计数据错乱。结果展示页通过云函数获取统计值，前端用 Canvas 绘制柱状图。柱状图的原理不复杂：先计算画布宽度，再按最大占比折算每根柱子的高度，逐项绘制矩形。代码量约 60 行，比引入 ECharts 省很多包体积，答辩时被问到原理也能讲清楚。
4. 云函数聚合统计：从 COUNT 到自动建表与定时触发器
4.1 用 aggregate 查询计算选项占比
问卷的结果页需要展示每个题目的选项分布。如果在前端逐条拉取所有答卷再统计，数据量稍大就会卡。云函数里使用aggregate管道，把统计压力留在服务端。
// cloudfunctions/stats/index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() const _ = db.command exports.main = async (event) => { const { questionnaireId } = event const qRes = await db.collection('questionnaires').doc(questionnaireId).get() const questions = qRes.data.questions const stats = [] for (const q of questions) { if (q.type === 'text') continue const pipeline = [ { $match: { questionnaire_id: questionnaireId } }, { $project: { answer: `$content.${q.id}` } }, { $unwind: { path: '$answer' } }, // 多选答案原样展开 { $group: { _id: '$answer', count: _.sum(1) } }, { $sort: { count: -1 } } ] const res = await db.collection('answers').aggregate(pipeline).end() stats.push({ questionId: q.id, type: q.type, title: q.title, results: res.list }) } return stats }$project用模板字符串从内容字段中取出对应题目的答案，多选答案如果是逗号分隔的字符串，可以先$split再$unwind，否则聚合结果会把整个字符串当作一个选项统计。$match一定要放在管道最前面，这样能利用索引减少扫描量。云函数返回给小程序的数据有大小限制，如果问卷题目多，一次性返回所有统计结果可能超限，建议分批，每次处理 10 个题目。
4.2 用触发器定时计算并写入缓存
统计逻辑如果在结果页每次访问都全量重算，问卷答卷达到几百份时会有明显延迟。常见做法是加上 stats_cache 集合，存储每个问卷的统计结果，设置一个失效时间。更进一步，用云函数定时触发器在每天凌晨计算一次热门问卷的统计数据。
// cloudfunction 配置中的 config.json { "triggers": [ { "name": "dailyStatsTimer", "type": "timer", "config": "0 0 3 * * * *" } ] }上述 cron 表达式表示每天凌晨 3 点触发。触发器函数遍历所有 published 状态的问卷，对每个问卷调用统计逻辑并写回stats_cache。这里要注意：免费版的云函数并发实例有限，问卷数量多时一定要逐个处理，避免并发超出配额。写入缓存时带上updated_at字段，小程序端读取时对比时间，超过 6 小时则触发重新统计。
4.3 获取用户 OpenID 与登录态校验
云开发小程序端wx.cloud.callFunction调用云函数时，云函数侧通过cloud.getWXContext()能拿到调用者的 OpenID，无需手动登录。但问卷系统通常要区分「创建者」和「填写者」，创建者的 OpenID 要在创建问卷时存进问卷文档。
// 云函数:createQuestionnaire const wxContext = cloud.getWXContext() exports.main = async (event) => { const { title, description, questions } = event const res = await db.collection('questionnaires').add({ data: { title, description, questions, _openid: wxContext.OPENID, status: 'draft', create_time: db.serverDate() } }) return { id: res._id } }_openid字段由云开发自动写入，无需手动赋值。但若通过云函数添加文档，系统不会自动补充_openid，必须像上面这样手动从getWXContext()取出并写入。查询「我创建的问卷」时用where({ _openid: '{openid}' })过滤，这里建议直接使用db.collection('questionnaires').where({ _openid: '{openid}' })，云开发会自动替换为当前用户的 OpenID。
5. 部署上线、权限控制与性能优化
5.1 创建云函数并设置超时与内存
在开发者工具中右键cloudfunctions目录下的函数文件夹，选择「创建并部署：云端安装依赖」。如果本地装了依赖包，也可以选「上传所有文件」。部署后去云开发控制台找到对应函数，在「配置」标签页调整超时时间。统计类函数建议设置超时 20 秒，内存 512MB，初始化类函数 5 秒即可。
部署完成后用以下命令本地调试：
# 在云开发控制台打开云函数测试 # 选择 "stats" 函数, 配置测试参数 {"questionnaireId": "your_questionnaire_id"}观察返回结果中的耗时和错误日志。如果出现errCode: -501000之类的数据库权限错误，多半是安全规则没放行，回到集合权限设置里检查。
5.2 数据库权限与越权防护
问卷数据有隐私属性，不能默认所有用户可读。数据库权限中，「仅创建者可读写」不能满足答卷收集场景，因为填写者不是问卷文档的创建者。自定义安全规则是在「自定义规则」模式下写 JSON，示例已在第二章节给出。除了规则，还要在业务层面增加校验：填写者在提交答卷时，云函数要确认目标问卷的status是published且在截止时间内，防止薅羊毛式刷问卷。
5.3 分页加载与长列表优化
问卷列表和答卷明细都可能超过 20 条。分页的标准写法是记录上一次查询的最后一条记录，用startAfter继续取：
// pages/manage/list.js async loadMore() { const last = this.data.list[this.data.list.length - 1] if (!last) return const res = await db.collection('questionnaires') .where({ _openid: '{openid}' }) .orderBy('create_time', 'desc') .startAfter(last.create_time) .limit(20) .get() this.setData({ list: [...this.data.list, ...res.data] }) }使用startAfter要注意排序字段的唯一性，如果两条记录的 create_time 相同可能漏数据。稳妥做法是额外按_id排序，因为文档 ID 天然唯一。另外，列表页不要在onLoad里一次性查所有数据，用户在演示现场滑动列表加载更多，反而能体现设计细节。
5.4 防止重复提交与网络异常兜底
问卷最容易出现的问题是用户在弱网环境下反复点提交，生成多条重复答卷。提交时在前端加一个submitting状态锁：
if (this.data.submitting) return this.setData({ submitting: true }) // 提交逻辑 // 完成后重置同时在云函数侧做去重：检查同一_openid在同一问卷下是否有 5 分钟内的提交记录，有则直接返回已提交。两端同时防御才能保证数据干净。提交失败时不要直接提示「请重试」，把失败原因写进 storage，用户重新进入时读取待提交记录，给出「发现未完成答卷，是否恢复？」的引导，这种设计在课程设计答辩中容易拿高分。
6. 课程设计答辩前必做的代码优化与演示检查
6.1 代码模块划分与注释规范
云开发项目的代码组织要一眼能看出架构。小程序端按 pages 分包，云函数按业务划分，公共工具函数放utils/。问卷系统的推荐目录结构：
├── cloudfunctions │ ├── createQuestionnaire │ ├── stats │ ├── init │ └── answerSubmit ├── miniprogram │ ├── pages │ │ ├── index # 问卷广场 │ │ ├── fill # 填写页 │ │ ├── manage # 管理端列表 │ │ └── edit # 编辑问卷 │ └── utils │ └── format.js每个云函数入口文件控制在 100 行以内，超过就拆分到lib/子目录。答辩时老师会翻代码，注释不需要多，但关键设计点必须写：聚合管道每段的用途、自定义权限规则的意图、触发器的执行周期。注释放在代码上方的独立行，不要写在行尾。
6.2 边界情况的处理要提前演示
演示之前，把这几类边界情况准备好：空问卷（没有题目直接发布）、单选必答题不答就提交、问卷被删除后用户从分享卡片进入、同一微信账号重复提交答卷。每类情况都写好对应提示语，演示时如果老师故意乱点，页面不会白屏或报错。
6.3 提前准备一份模拟数据
统计图表要有数据才好看。开发阶段写一小段 Node 脚本往 answers 集合批量插入 50 条模拟答卷，注意把 create_time 分散到最近一周，这样按时间维度的趋势图才有意义。脚本插入后要在控制台验证一下聚合结果是否合理。演示时从空数据开始跑一遍全流程，再用模拟数据展示统计页，两者对比更能体现数据处理能力。
最后还要检查真机预览的兼容性。基础库版本设在 2.30 以上，某些老版本对wx.cloud.callFunction的返回体积有限制，数据过大会静默失败。把小程序的「本地设置」中的「将 JS 编译成 ES5」打开，避免低版本安卓机的语法兼容问题。确认无误后上传体验版，扫码走一遍完整流程再交。
本文还有配套的精品资源，点击获取
