简介微信原生小程序与腾讯云开发结合的在线答题项目面向需快速搭建答题类小程序的开发者、学生或竞赛团队。由云函数、云数据库、云存储实现用户认证、题目管理、成绩计算等后端逻辑省去自建服务器与运维成本可适配校园测验、知识竞赛、日常刷题等场景。压缩包共75个文件含35个PNG界面素材、10个WXSS样式、10个JSON配置、8个JS逻辑、6个WXML页面结构另附JPG图片和README说明整体约6.06MB。已有222人学习适合参考完整前后端协作或进行二次开发源码中可看到首页、答题、详情、排名、历史、结果等页面拆分以及util.js等公共封装对掌握小程序原生组件、云开发调用和业务模块划分具有直接参考价值。1. 微信答题小程序原生小程序 云开发不碰服务器就做完整在线答题A同学上个月接了个校园社团的答题活动需求要在线出题、限时作答、自动判分还要一个能实时看的排行榜。放在以前我得先去买一台服务器配 Nginx、搭 HTTPS、做接口鉴权光环境就能折腾两天。这次我直接用微信原生小程序 云开发把后端全部交给云函数、云数据库和云存储没有买服务器没有配域名从开工到上线只用了三天。这套方案的服务端资源按调用计费活动结束就能把环境冻结成本几乎可以忽略。它适合个人开发者快速验证 idea也适合高校社团、小企业内部做知识竞赛或培训考核只要用户已经在微信生态里就不需要额外引入一整套后台系统。2. 架构与目录结构数据层、逻辑层、云函数层的真实分工2.1 整体架构小程序端、云函数、云数据库如何协作先说总体原生小程序的页面负责 UI 和交互云函数负责业务逻辑云数据库负责持久化。用户在小程序里点“开始答题”页面不会直接去数据库里取题目而是调用一个叫 getQuiz 的云函数云函数在服务端把题目按规则抽好、去掉答案字段再返回给前端。前端收到题目后把答题过程记录在本地内存里等交卷再调用另一个云函数 submitAnswer由它在云端完成判分和写入。排行榜则单独走 getRank 云函数用数据库聚合能力直接算名次。这个链路里最值得说的是“信任边界”接收答案和写入记录的必须是云函数而不是小程序端直接操作数据库。哪怕你给前端开了“所有用户可读”权限也绝不能让前端自己写分数否则有人用调试器改一下返回值就能刷满分。云函数跑在服务端天然带管理员权限能绕开数据库权限校验所以它是这套架构里唯一可以信任的判分执行者。从依赖角度看整个项目跑在微信开发者工具里依赖极简单。小程序端只需要一个 wx.cloud 对象云函数端只需要一个 wx-server-sdk 包。你不需要跨域、不需要 HTTPS 证书、不需要自己实现登录态openid 由微信上下文帮你带过去。云数据库默认就是 JSON 文档结构答题记录这种不规则数据可以直接存不需要设计表关系。小程序端初始化云能力核心只有这几行// miniprogram/app.js App({ onLaunch() { wx.cloud.init({ env: cloud1-abc123, traceUser: true }) } })这段代码在应用启动时执行env 是云环境 ID必须和云开发控制台里的环境保持一致。traceUser 会记录每个来访用户的操作轨迹开发阶段开着有助于排查问题正式活动上线后我一般会把它关掉能减少一部分数据写入量。2.2 目录结构与配置文件每个文件是干什么的一个标准的原生小程序 云开发项目目录通常长这样miniprogram/ pages/ index/ // 首页展示活动介绍、开始答题入口 quiz/ // 答题页出题、计时、选择答案 result/ // 结果页展示得分、正确率、答题用时 rank/ // 排行榜展示前 20 名选手 components/ progress-bar/ // 进度条组件展示当前完成的题数 utils/ format.js // 时间格式化、数字补零等工具函数 app.js // 全局入口初始化 wx.cloud app.json // 页面路由、窗口样式、tabBar 配置 app.wxss // 全局样式 cloudfunctions/ login/ // 获取 openid并更新用户资料 getQuiz/ // 从题库抽题返回不含答案的题目列表 submitAnswer/ // 判分写入答题记录 getRank/ // 聚合计算排行榜 project.config.json // 项目配置声明 miniprogramRoot 和 cloudfunctionRoot这个结构把页面和云函数分在两个根目录下是官方推荐的做法。重点看 project.config.json 里的 cloudfunctionRoot它必须指向 cloudfunctions 这一层否则你右键上传云函数时会找不到函数目录。app.json 里注册了页面pages 数组第一位就是启动页实际开发里为了让用户一进来先看到活动介绍我会把 pages/index/index 放在第一位。app.json 的配置也比较固定{ pages: [ pages/index/index, pages/quiz/quiz, pages/result/result, pages/rank/rank ], window: { navigationBarTitleText: 微信答题小程序, navigationBarBackgroundColor: #4A90D9, navigationBarTextStyle: white } }页面路径必须和目录一致少写一个页面会导致编译报错。窗口配置中 navigationBarTitleText 就是顶部标题答题时如果不想让用户来回退出还可以在 quiz 页的配置里加一句 disableScroll: true防止答题过程中页面被意外滚动。还有两个容易被忽略的文件每个云函数目录下都有一个 package.json声明 wx-server-sdk 依赖根目录下有一个 sitemap.json控制小程序页面是否被微信搜索索引。活动类项目一般不需要被搜索我会把 sitemap 里的默认配置保留不要删掉这个文件否则开发者工具会警告。2.3 数据模型设计题目集合、答题记录、用户集合的结构云开发用的不是关系型表而是文档型集合但设计时我仍然习惯先画一份字段清单免得写到后面越改越乱。这套方案里我设计了四个集合questions、answers、users、quizzes。集合名主要字段作用questionstitle, options, answer, score, analysis, category题目题库answer 是正确答案下标answersopenid, questionIds, selected, score, correct, total, detail, createTime每个用户每次答题的完整记录usersopenid, nickname, avatar, joinTime用户基础资料用于榜单展示头像昵称quizzestitle, questionIds, startTime, endTime一场答题活动的配置可以一次挂多题questions 里我一般会把 answer 字段直接放在文档里但在 getQuiz 云函数中会专门去掉它再下发。这样前端拿到的数据里完全没有正确答案即使有人打开调试面板也看不到。options 字段是数组下标从 0 开始answer 存的就是那个正确的下标如果你以后要做多选题把这个字段改成数组就行。一份典型的题目文档长这样{ _id: q001, category: 前端基础, title: 微信小程序云开发使用哪个对象初始化, options: [wx.request, wx.cloud, wx.connect, wx.server], answer: 1, score: 5, analysis: wx.cloud 是云开发开放给小程序端的入口 }answer 为什么不存字符串“B”因为下标比较更快而且前端渲染选项时只需要一个数字索引如果存字符串云函数判分时还要再做一次选项值到下标的映射容易翻车。answers 里最有价值的是 detail 字段它保存了用户每一题的选项和是否正确。这样结果页除了总分还能展示“第 3 题答错正确答案是 B”这种复盘信息。quizzes 集合不是必须的如果你每次活动只是从题库里随机抽固定数量的题可以在 getQuiz 函数里只传 category 和 limit不需要建活动集合。但是当你想控制某一场活动的规则——比如限时 10 分钟、只考某个分类——就需要一个 quizzes 来承载这些配置。到这里架构和数据就清楚了。这套设计的核心就是前端不碰答案判分只在云端榜单靠聚合。下面可以看代码了。3. 核心模块拆解一道题从点击到入库的完整链路3.1 云函数统一入口题库加载与随机抽题getQuiz 函数是用户点“开始答题”后第一个被调用的云函数。它的职责不止是查数据库还要过滤字段、随机打乱、剥离答案。我一般这样写// cloudfunctions/getQuiz/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { category , limit 10 } event const where {} if (category) where.category category const res await db.collection(questions) .where(where) .field({ title: true, options: true, score: true, analysis: true }) .limit(limit) .get() const shuffled res.data.sort(() Math.random() - 0.5) const safeList shuffled.map(item { const { answer, ...rest } item return rest }) return { code: 0, data: safeList, total: safeList.length } }逻辑说明先按 category 构造筛选条件不传就是全题库。field 方法主动把字段列表收窄这样返回包体积小也避免 answer 被带出来。sort(() Math.random() - 0.5) 是一个常见的洗牌写法虽然不是完全均匀的随机算法但答题场景完全够用。解构 rest 时把 answer 丢在服务端前端永远拿不到。参数说明event.limit 控制抽题数量默认 10event.category 控制分类例如“前端”“Java 常识”。如果你希望固定一次活动的题就不要在这里随机抽而是从 quizzes 集合里读 questionIds再用 command.in 查询。这个函数必须放在云函数目录下右键上传部署以后才能调用。如果前端调用报 Function not found通常就是没有部署成功排查时先去控制台看云函数列表。3.2 答题页计时与记录setInterval 与实时提交答题页是交互最密集的地方。我的实现里计时器用 setInterval每秒钟通过 setData 更新剩余时间用户选择的答案存在一个普通数组 selected 里索引位置对应当前题号。核心代码是这样// miniprogram/pages/quiz/quiz.js Page({ data: { questions: [], currentIndex: 0, selected: [], remainText: 10:00, submitted: false }, onLoad(options) { wx.cloud.callFunction({ name: getQuiz, data: { limit: 10, category: options.category || } }).then(res { const questions res.result.data this.setData({ questions, selected: new Array(questions.length).fill(-1) }) this.startTimer(questions.length * 60) }) }, startTimer(seconds) { let remain seconds this.timer setInterval(() { remain-- const min Math.floor(remain / 60).toString().padStart(2, 0) const sec (remain % 60).toString().padStart(2, 0) this.setData({ remainText: ${min}:${sec} }) if (remain 0) { clearInterval(this.timer) this.submitAnswer() } }, 1000) }, chooseOption(e) { if (this.data.submitted) return const { index, value } e.currentTarget.dataset this.setData({ [selected[${index}]]: value }) }, submitAnswer() { if (this.data.submitted) return this.setData({ submitted: true }) clearInterval(this.timer) wx.cloud.callFunction({ name: submitAnswer, data: { questionIds: this.data.questions.map(q q._id), selected: this.data.selected } }).then(res { const { recordId } res.result wx.redirectTo({ url: /pages/result/result?id${recordId} }) }) } })逻辑说明onLoad 里调用 getQuiz 拿到题目后用 new Array(length).fill(-1) 初始化选中状态-1 表示这一题还没选。chooseOption 通过 dataset 拿到题目索引和选项值用模板字符串动态更新 selected 中对应下标好处是 setData 只更新一处不会触发整个数组的重新渲染。计时器没有把剩余秒数存进 data而是放在闭包变量 remain 里每秒钟只 setData 一个格式化的 remainText 字符串。这样做是血泪经验把整数秒放进 data会导致页面每一秒都重绘一次在低端机上明显卡顿只更新显示用的字符串渲染压力小很多。参数说明startTimer(questions.length * 60) 表示每题 60 秒。你可以改成固定 600 秒或者从 quizzes 集合读时间规则。submitAnswer 里的 recordId 是云函数写入后的 _id结果页靠它查询这一场答题详情。3.3 判分与答题记录写入事务和后端校验判分必须在云函数里做。这块代码既要读取题目原本的 answer又要一次性取回所有题目所以用数据库的 command.in 来批量查询。我一般这样写// cloudfunctions/submitAnswer/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { OPENID } cloud.getWXContext() const { questionIds [], selected [] } event const questionRes await db.collection(questions) .where({ _id: db.command.in(questionIds) }) .get() const questionMap {} questionRes.data.forEach(q { questionMap[q._id] q }) let totalScore 0 let correctCount 0 const detail questionIds.map((id, index) { const q questionMap[id] const isCorrect q q.answer selected[index] if (isCorrect) { totalScore q.score || 1 correctCount } return { questionId: id, selected: selected[index], isCorrect: !!isCorrect } }) const record { openid: OPENID, questionIds, selected, score: totalScore, correct: correctCount, total: questionIds.length, detail, createTime: db.serverDate() } const addRes await db.collection(answers).add({ data: record }) return { code: 0, recordId: addRes._id, score: totalScore, correct: correctCount, total: questionIds.length } }逻辑说明OPENID 从微信上下文直接取不需要前端传这样别人没有办法伪造身份。questionIds 是前端传的题目 _id 列表selected 是用户选项下标列表两者长度必须一致。遍历时用 q.answer selected[index] 判断score 字段支持每题不同分值字段缺失时默认给 1 分。这里有个关键设计detail 里只记录每个题的 selected 和 isCorrect不保存用户没选的选项也不直接保存正确答案。为什么因为结果页如果需要告诉用户“你选错了正确答案是 C”应该由另一个云函数根据 recordId 重新读题库来展示。这样答题记录里不落正确答案即使数据库权限配置失误也不会把整场答案一起暴露。如果要严格防止并发重复提交可以在写入前先按 openid 和 createTime 查一下有没有同一场的记录或者把 recordId 前置生成。答题场景一般没有高并发我觉得加一个 submitted 前端标志已经够用。3.4 排行榜实现云函数聚合排名的两种方式排行榜最常见的做法是用云函数 aggregation。把 answers 集合里所有记录按 openid 分组取最高分再按最高分倒序、最短耗时正序排最后联表查出用户昵称。示例代码// cloudfunctions/getRank/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() const $ db.command.aggregate exports.main async () { const res await db.collection(answers) .aggregate() .sort({ score: -1, createTime: 1 }) .group({ _id: $openid, maxScore: $.max($score), totalCount: $.sum(1) }) .lookup({ from: users, localField: _id, foreignField: openid, as: user }) .sort({ maxScore: -1 }) .limit(20) .end() return { code: 0, data: res.list.map(item ({ openid: item._id, maxScore: item.maxScore, nickname: item.user[0] ? item.user[0].nickname : 匿名, avatar: item.user[0] ? item.user[0].avatar : })) } }逻辑说明聚合管道第一步 sort 是保险先把同一个人同一场的时间尽量排好group 按 openid 折叠maxScore 取最高分。lookup 相当于关系型数据库的 left join从 users 集合里带出用户昵称。最后再 sort 一次因为 group 之后结果顺序会变化limit 20 防止返回太多数据。参数说明如果想做“多次取最高分”就用 $.max($score)如果想做“最近一次成绩”把 group 去掉直接 sort createTime 倒序再按 openid 去重但这样聚合写法会复杂一些。如果用户量不大也可以不用 lookup在前端拿到 openid 列表后批量查 users 集合但多一次请求我建议还是聚合管道一步到位。排行榜还有一个容易翻车的地方数据库权限。如果你尝试在小程序端直接读 answers 集合做排行会遇到权限不足因为云开发默认只有创建者可读自己的记录。最省事的做法是所有榜单逻辑都走云函数云函数有管理员权限能跨用户读全部数据。代码讲完了下面说最实际的运行步骤以及我踩过的几个坑。4. 运行与避坑初始化、部署、真机调试的完整实操4.1 初始化云开发环境与基础库配置拿到源代码包后第一步不是急着看页面而是先确认你的微信开发者工具版本大于 1.02.1904290并保证登录的是有云开发权限的账号。然后打开项目根目录确认 project.config.json 里有两个关键字段{ miniprogramRoot: miniprogram/, cloudfunctionRoot: cloudfunctions/ }第一个字段告诉工具页面代码在 miniprogram 目录下第二个字段告诉工具云函数在 cloudfunctions 目录下。这两个字段如果缺失上传部署云函数时工具根本找不到入口。接下来在云开发控制台创建一个环境拿到环境 ID比如 cloud1-abc123。然后在 app.js 里初始化// miniprogram/app.js App({ onLaunch() { if (!wx.cloud) { console.error(当前基础库版本过低请使用 2.2.3 以上版本) return } wx.cloud.init({ env: cloud1-abc123, traceUser: true }) } })注意env 必须替换成你自己控制台里的环境 ID。很多人直接复制源码里的 env结果云函数调用一直报“环境不存在”。traceUser 为 true 会在控制台看到用户访问记录对排查问题很有用上线后建议关闭以节省性能开销。4.2 部署云函数与数据库权限配置云函数不是改完代码就能用必须逐个上传。在开发者工具的资源管理器中展开 cloudfunctions 目录右键每个函数文件夹选择“上传并部署云端安装依赖”。这个选项会让云端自动读取 package.json 安装 wx-server-sdk所以本地不需要先 npm install。如果选错了“上传所有文件”容易把 node_modules 一起传上去反而触发大小限制。上传完成后建议去微信开发者工具控制台的云开发面板里打开“云函数”列表确认 login、getQuiz、submitAnswer、getRank 都是“已部署”状态。首次调用云函数会有 1 到 2 秒冷启动这是云开发的特性。数据库方面我的习惯是这样的权限配置集合名建议权限questions所有用户可读仅管理端可写answers仅创建者可读写云函数不受限users所有用户可读仅创建者可写quizzes所有用户可读如有这里要特别解释 answers因为判分写入走云函数云函数不受集合权限限制所以你可以放心把前端读写权限设成“仅创建者可读”。当结果页只需要根据 recordId 读取自己记录时用 db.collection(answers).doc(id).get() 也能读如果要展示其他人的排名就走 getRank 云函数。4.3 常见问题与避坑5 个具体踩坑记录第一个坑真机上点击开始后一直白屏控制台报 wx.cloud is undefined。原因是基础库版本太低云开发要求基础库至少 2.2.3。解决在开发者工具右上角“详情”里把调试基础库调到 2.10.0 以上真机预览时在手机上也要升级微信到最新版本。第二个坑调用 getQuiz 报 -501000 或 Function not found。原因一般是云函数没部署成功或者 env 配了别人的环境。解决先在云开发控制台确认函数存在再检查 app.js 里 env 和当前选中环境一致最后重新右键上传一次函数并选择“云端安装依赖”。第三个坑答题倒计时在切后台后暂停回到页面时间不准。原因setInterval 在页面进入后台时会被系统挂起导致计时器不准确。解决在 onShow 里重新校准记录离开页面时的时间戳回来后用 Date.now() 差值同步剩余时间如果只是普通答题也可以接收这个误差但竞赛场景必须处理。第四个坑排行榜偶尔出现两个人显示同一昵称。原因users 集合里没有按 openid 做唯一索引重复调用 login 函数时插入了多条记录。解决在 login 云函数里先按 openid 查询有记录就 update没有才 add或者给 openid 建唯一索引。第五个坑云函数返回的数据在小程序端被截断比如题目超过 100 道时返回不完整。原因云数据库单次 get 默认最多返回 100 条。解决getQuiz 里设置 limit 不超过 100或者用分页查询在我的场景里每场 10 题不需要改但如果你做题库预览要加 page 参数循环取。5. 二次开发改造换题库、加好友对战、接自定义 UI 的落地技巧拿到源码后最常改的三处是题库内容、玩法规则和页面样式。先说换题库。我一般会写一个 importQuestions 云函数在本地把 Excel 转成 JSON再调用这个函数插入数据库。JSON 的结构就按 questions 集合的字段来title 是题干options 是四个选项answer 是正确选项下标score 默认 1。如果你嫌用函数导入麻烦也可以直接在云开发控制台点“导入”按钮选 JSON 文件但字段名必须完全一致。我建议保留一个题目模板文件放在源码包 assets 目录下以后每次活动直接改它。加好友对战是我做过一次的需求。实现思路并不复杂在首页创建一个“对战房间”房间号作为参数传给 getQuiz 和 submitAnswer答题记录里增加 roomId 字段。两个人进入同一个房间后前端没法直接实时同步常见做法是每 3 秒轮询一次双方进度或者用云开发的实时数据推送监听 answers 集合。我选的轮询方案对校园场景足够也不增加额外成本。如果你要改成“两人答完先交卷胜出”就把输赢判断放进 submitAnswer 里交卷时检查对方是否已经交卷。自定义 UI 方面原生小程序没有 Vue 的响应式便利但胜在组件化简单。进度条这种重复展示的东西我把它抽到 components/progress-bar 里页面里通过 custom-style 传入颜色和宽度改样式时不用动页面代码。改主题色更简单app.wxss 里定义几个 CSS 变量所有页面统一引用换肤就是改一行。验证改造是否成功我的习惯是每次只改一个模块然后在微信开发者工具里跑一遍自动预览用手机真机检查云函数调用是否正常。改完题库后我会先清掉本地的 answers 记录避免排行榜被旧数据干扰。有一次我改了题目字段后忘了同步 getQuiz 的 field 配置结果前端一直拿不到选项排查了很久才发现是字段名不匹配。从那以后我每动一次题库都会强制走一遍“控制台数据库导出 → 改 JSON → 导入 → 真机答题一次”的完整流程再回头看代码改动。希望帮到你。本文还有配套的精品资源点击获取
简介微信原生小程序与腾讯云开发结合的在线答题项目面向需快速搭建答题类小程序的开发者、学生或竞赛团队。由云函数、云数据库、云存储实现用户认证、题目管理、成绩计算等后端逻辑省去自建服务器与运维成本可适配校园测验、知识竞赛、日常刷题等场景。压缩包共75个文件含35个PNG界面素材、10个WXSS样式、10个JSON配置、8个JS逻辑、6个WXML页面结构另附JPG图片和README说明整体约6.06MB。已有222人学习适合参考完整前后端协作或进行二次开发源码中可看到首页、答题、详情、排名、历史、结果等页面拆分以及util.js等公共封装对掌握小程序原生组件、云开发调用和业务模块划分具有直接参考价值。1. 微信答题小程序原生小程序 云开发不碰服务器就做完整在线答题A同学上个月接了个校园社团的答题活动需求要在线出题、限时作答、自动判分还要一个能实时看的排行榜。放在以前我得先去买一台服务器配 Nginx、搭 HTTPS、做接口鉴权光环境就能折腾两天。这次我直接用微信原生小程序 云开发把后端全部交给云函数、云数据库和云存储没有买服务器没有配域名从开工到上线只用了三天。这套方案的服务端资源按调用计费活动结束就能把环境冻结成本几乎可以忽略。它适合个人开发者快速验证 idea也适合高校社团、小企业内部做知识竞赛或培训考核只要用户已经在微信生态里就不需要额外引入一整套后台系统。2. 架构与目录结构数据层、逻辑层、云函数层的真实分工2.1 整体架构小程序端、云函数、云数据库如何协作先说总体原生小程序的页面负责 UI 和交互云函数负责业务逻辑云数据库负责持久化。用户在小程序里点“开始答题”页面不会直接去数据库里取题目而是调用一个叫 getQuiz 的云函数云函数在服务端把题目按规则抽好、去掉答案字段再返回给前端。前端收到题目后把答题过程记录在本地内存里等交卷再调用另一个云函数 submitAnswer由它在云端完成判分和写入。排行榜则单独走 getRank 云函数用数据库聚合能力直接算名次。这个链路里最值得说的是“信任边界”接收答案和写入记录的必须是云函数而不是小程序端直接操作数据库。哪怕你给前端开了“所有用户可读”权限也绝不能让前端自己写分数否则有人用调试器改一下返回值就能刷满分。云函数跑在服务端天然带管理员权限能绕开数据库权限校验所以它是这套架构里唯一可以信任的判分执行者。从依赖角度看整个项目跑在微信开发者工具里依赖极简单。小程序端只需要一个 wx.cloud 对象云函数端只需要一个 wx-server-sdk 包。你不需要跨域、不需要 HTTPS 证书、不需要自己实现登录态openid 由微信上下文帮你带过去。云数据库默认就是 JSON 文档结构答题记录这种不规则数据可以直接存不需要设计表关系。小程序端初始化云能力核心只有这几行// miniprogram/app.js App({ onLaunch() { wx.cloud.init({ env: cloud1-abc123, traceUser: true }) } })这段代码在应用启动时执行env 是云环境 ID必须和云开发控制台里的环境保持一致。traceUser 会记录每个来访用户的操作轨迹开发阶段开着有助于排查问题正式活动上线后我一般会把它关掉能减少一部分数据写入量。2.2 目录结构与配置文件每个文件是干什么的一个标准的原生小程序 云开发项目目录通常长这样miniprogram/ pages/ index/ // 首页展示活动介绍、开始答题入口 quiz/ // 答题页出题、计时、选择答案 result/ // 结果页展示得分、正确率、答题用时 rank/ // 排行榜展示前 20 名选手 components/ progress-bar/ // 进度条组件展示当前完成的题数 utils/ format.js // 时间格式化、数字补零等工具函数 app.js // 全局入口初始化 wx.cloud app.json // 页面路由、窗口样式、tabBar 配置 app.wxss // 全局样式 cloudfunctions/ login/ // 获取 openid并更新用户资料 getQuiz/ // 从题库抽题返回不含答案的题目列表 submitAnswer/ // 判分写入答题记录 getRank/ // 聚合计算排行榜 project.config.json // 项目配置声明 miniprogramRoot 和 cloudfunctionRoot这个结构把页面和云函数分在两个根目录下是官方推荐的做法。重点看 project.config.json 里的 cloudfunctionRoot它必须指向 cloudfunctions 这一层否则你右键上传云函数时会找不到函数目录。app.json 里注册了页面pages 数组第一位就是启动页实际开发里为了让用户一进来先看到活动介绍我会把 pages/index/index 放在第一位。app.json 的配置也比较固定{ pages: [ pages/index/index, pages/quiz/quiz, pages/result/result, pages/rank/rank ], window: { navigationBarTitleText: 微信答题小程序, navigationBarBackgroundColor: #4A90D9, navigationBarTextStyle: white } }页面路径必须和目录一致少写一个页面会导致编译报错。窗口配置中 navigationBarTitleText 就是顶部标题答题时如果不想让用户来回退出还可以在 quiz 页的配置里加一句 disableScroll: true防止答题过程中页面被意外滚动。还有两个容易被忽略的文件每个云函数目录下都有一个 package.json声明 wx-server-sdk 依赖根目录下有一个 sitemap.json控制小程序页面是否被微信搜索索引。活动类项目一般不需要被搜索我会把 sitemap 里的默认配置保留不要删掉这个文件否则开发者工具会警告。2.3 数据模型设计题目集合、答题记录、用户集合的结构云开发用的不是关系型表而是文档型集合但设计时我仍然习惯先画一份字段清单免得写到后面越改越乱。这套方案里我设计了四个集合questions、answers、users、quizzes。集合名主要字段作用questionstitle, options, answer, score, analysis, category题目题库answer 是正确答案下标answersopenid, questionIds, selected, score, correct, total, detail, createTime每个用户每次答题的完整记录usersopenid, nickname, avatar, joinTime用户基础资料用于榜单展示头像昵称quizzestitle, questionIds, startTime, endTime一场答题活动的配置可以一次挂多题questions 里我一般会把 answer 字段直接放在文档里但在 getQuiz 云函数中会专门去掉它再下发。这样前端拿到的数据里完全没有正确答案即使有人打开调试面板也看不到。options 字段是数组下标从 0 开始answer 存的就是那个正确的下标如果你以后要做多选题把这个字段改成数组就行。一份典型的题目文档长这样{ _id: q001, category: 前端基础, title: 微信小程序云开发使用哪个对象初始化, options: [wx.request, wx.cloud, wx.connect, wx.server], answer: 1, score: 5, analysis: wx.cloud 是云开发开放给小程序端的入口 }answer 为什么不存字符串“B”因为下标比较更快而且前端渲染选项时只需要一个数字索引如果存字符串云函数判分时还要再做一次选项值到下标的映射容易翻车。answers 里最有价值的是 detail 字段它保存了用户每一题的选项和是否正确。这样结果页除了总分还能展示“第 3 题答错正确答案是 B”这种复盘信息。quizzes 集合不是必须的如果你每次活动只是从题库里随机抽固定数量的题可以在 getQuiz 函数里只传 category 和 limit不需要建活动集合。但是当你想控制某一场活动的规则——比如限时 10 分钟、只考某个分类——就需要一个 quizzes 来承载这些配置。到这里架构和数据就清楚了。这套设计的核心就是前端不碰答案判分只在云端榜单靠聚合。下面可以看代码了。3. 核心模块拆解一道题从点击到入库的完整链路3.1 云函数统一入口题库加载与随机抽题getQuiz 函数是用户点“开始答题”后第一个被调用的云函数。它的职责不止是查数据库还要过滤字段、随机打乱、剥离答案。我一般这样写// cloudfunctions/getQuiz/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { category , limit 10 } event const where {} if (category) where.category category const res await db.collection(questions) .where(where) .field({ title: true, options: true, score: true, analysis: true }) .limit(limit) .get() const shuffled res.data.sort(() Math.random() - 0.5) const safeList shuffled.map(item { const { answer, ...rest } item return rest }) return { code: 0, data: safeList, total: safeList.length } }逻辑说明先按 category 构造筛选条件不传就是全题库。field 方法主动把字段列表收窄这样返回包体积小也避免 answer 被带出来。sort(() Math.random() - 0.5) 是一个常见的洗牌写法虽然不是完全均匀的随机算法但答题场景完全够用。解构 rest 时把 answer 丢在服务端前端永远拿不到。参数说明event.limit 控制抽题数量默认 10event.category 控制分类例如“前端”“Java 常识”。如果你希望固定一次活动的题就不要在这里随机抽而是从 quizzes 集合里读 questionIds再用 command.in 查询。这个函数必须放在云函数目录下右键上传部署以后才能调用。如果前端调用报 Function not found通常就是没有部署成功排查时先去控制台看云函数列表。3.2 答题页计时与记录setInterval 与实时提交答题页是交互最密集的地方。我的实现里计时器用 setInterval每秒钟通过 setData 更新剩余时间用户选择的答案存在一个普通数组 selected 里索引位置对应当前题号。核心代码是这样// miniprogram/pages/quiz/quiz.js Page({ data: { questions: [], currentIndex: 0, selected: [], remainText: 10:00, submitted: false }, onLoad(options) { wx.cloud.callFunction({ name: getQuiz, data: { limit: 10, category: options.category || } }).then(res { const questions res.result.data this.setData({ questions, selected: new Array(questions.length).fill(-1) }) this.startTimer(questions.length * 60) }) }, startTimer(seconds) { let remain seconds this.timer setInterval(() { remain-- const min Math.floor(remain / 60).toString().padStart(2, 0) const sec (remain % 60).toString().padStart(2, 0) this.setData({ remainText: ${min}:${sec} }) if (remain 0) { clearInterval(this.timer) this.submitAnswer() } }, 1000) }, chooseOption(e) { if (this.data.submitted) return const { index, value } e.currentTarget.dataset this.setData({ [selected[${index}]]: value }) }, submitAnswer() { if (this.data.submitted) return this.setData({ submitted: true }) clearInterval(this.timer) wx.cloud.callFunction({ name: submitAnswer, data: { questionIds: this.data.questions.map(q q._id), selected: this.data.selected } }).then(res { const { recordId } res.result wx.redirectTo({ url: /pages/result/result?id${recordId} }) }) } })逻辑说明onLoad 里调用 getQuiz 拿到题目后用 new Array(length).fill(-1) 初始化选中状态-1 表示这一题还没选。chooseOption 通过 dataset 拿到题目索引和选项值用模板字符串动态更新 selected 中对应下标好处是 setData 只更新一处不会触发整个数组的重新渲染。计时器没有把剩余秒数存进 data而是放在闭包变量 remain 里每秒钟只 setData 一个格式化的 remainText 字符串。这样做是血泪经验把整数秒放进 data会导致页面每一秒都重绘一次在低端机上明显卡顿只更新显示用的字符串渲染压力小很多。参数说明startTimer(questions.length * 60) 表示每题 60 秒。你可以改成固定 600 秒或者从 quizzes 集合读时间规则。submitAnswer 里的 recordId 是云函数写入后的 _id结果页靠它查询这一场答题详情。3.3 判分与答题记录写入事务和后端校验判分必须在云函数里做。这块代码既要读取题目原本的 answer又要一次性取回所有题目所以用数据库的 command.in 来批量查询。我一般这样写// cloudfunctions/submitAnswer/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event) { const { OPENID } cloud.getWXContext() const { questionIds [], selected [] } event const questionRes await db.collection(questions) .where({ _id: db.command.in(questionIds) }) .get() const questionMap {} questionRes.data.forEach(q { questionMap[q._id] q }) let totalScore 0 let correctCount 0 const detail questionIds.map((id, index) { const q questionMap[id] const isCorrect q q.answer selected[index] if (isCorrect) { totalScore q.score || 1 correctCount } return { questionId: id, selected: selected[index], isCorrect: !!isCorrect } }) const record { openid: OPENID, questionIds, selected, score: totalScore, correct: correctCount, total: questionIds.length, detail, createTime: db.serverDate() } const addRes await db.collection(answers).add({ data: record }) return { code: 0, recordId: addRes._id, score: totalScore, correct: correctCount, total: questionIds.length } }逻辑说明OPENID 从微信上下文直接取不需要前端传这样别人没有办法伪造身份。questionIds 是前端传的题目 _id 列表selected 是用户选项下标列表两者长度必须一致。遍历时用 q.answer selected[index] 判断score 字段支持每题不同分值字段缺失时默认给 1 分。这里有个关键设计detail 里只记录每个题的 selected 和 isCorrect不保存用户没选的选项也不直接保存正确答案。为什么因为结果页如果需要告诉用户“你选错了正确答案是 C”应该由另一个云函数根据 recordId 重新读题库来展示。这样答题记录里不落正确答案即使数据库权限配置失误也不会把整场答案一起暴露。如果要严格防止并发重复提交可以在写入前先按 openid 和 createTime 查一下有没有同一场的记录或者把 recordId 前置生成。答题场景一般没有高并发我觉得加一个 submitted 前端标志已经够用。3.4 排行榜实现云函数聚合排名的两种方式排行榜最常见的做法是用云函数 aggregation。把 answers 集合里所有记录按 openid 分组取最高分再按最高分倒序、最短耗时正序排最后联表查出用户昵称。示例代码// cloudfunctions/getRank/index.js const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() const $ db.command.aggregate exports.main async () { const res await db.collection(answers) .aggregate() .sort({ score: -1, createTime: 1 }) .group({ _id: $openid, maxScore: $.max($score), totalCount: $.sum(1) }) .lookup({ from: users, localField: _id, foreignField: openid, as: user }) .sort({ maxScore: -1 }) .limit(20) .end() return { code: 0, data: res.list.map(item ({ openid: item._id, maxScore: item.maxScore, nickname: item.user[0] ? item.user[0].nickname : 匿名, avatar: item.user[0] ? item.user[0].avatar : })) } }逻辑说明聚合管道第一步 sort 是保险先把同一个人同一场的时间尽量排好group 按 openid 折叠maxScore 取最高分。lookup 相当于关系型数据库的 left join从 users 集合里带出用户昵称。最后再 sort 一次因为 group 之后结果顺序会变化limit 20 防止返回太多数据。参数说明如果想做“多次取最高分”就用 $.max($score)如果想做“最近一次成绩”把 group 去掉直接 sort createTime 倒序再按 openid 去重但这样聚合写法会复杂一些。如果用户量不大也可以不用 lookup在前端拿到 openid 列表后批量查 users 集合但多一次请求我建议还是聚合管道一步到位。排行榜还有一个容易翻车的地方数据库权限。如果你尝试在小程序端直接读 answers 集合做排行会遇到权限不足因为云开发默认只有创建者可读自己的记录。最省事的做法是所有榜单逻辑都走云函数云函数有管理员权限能跨用户读全部数据。代码讲完了下面说最实际的运行步骤以及我踩过的几个坑。4. 运行与避坑初始化、部署、真机调试的完整实操4.1 初始化云开发环境与基础库配置拿到源代码包后第一步不是急着看页面而是先确认你的微信开发者工具版本大于 1.02.1904290并保证登录的是有云开发权限的账号。然后打开项目根目录确认 project.config.json 里有两个关键字段{ miniprogramRoot: miniprogram/, cloudfunctionRoot: cloudfunctions/ }第一个字段告诉工具页面代码在 miniprogram 目录下第二个字段告诉工具云函数在 cloudfunctions 目录下。这两个字段如果缺失上传部署云函数时工具根本找不到入口。接下来在云开发控制台创建一个环境拿到环境 ID比如 cloud1-abc123。然后在 app.js 里初始化// miniprogram/app.js App({ onLaunch() { if (!wx.cloud) { console.error(当前基础库版本过低请使用 2.2.3 以上版本) return } wx.cloud.init({ env: cloud1-abc123, traceUser: true }) } })注意env 必须替换成你自己控制台里的环境 ID。很多人直接复制源码里的 env结果云函数调用一直报“环境不存在”。traceUser 为 true 会在控制台看到用户访问记录对排查问题很有用上线后建议关闭以节省性能开销。4.2 部署云函数与数据库权限配置云函数不是改完代码就能用必须逐个上传。在开发者工具的资源管理器中展开 cloudfunctions 目录右键每个函数文件夹选择“上传并部署云端安装依赖”。这个选项会让云端自动读取 package.json 安装 wx-server-sdk所以本地不需要先 npm install。如果选错了“上传所有文件”容易把 node_modules 一起传上去反而触发大小限制。上传完成后建议去微信开发者工具控制台的云开发面板里打开“云函数”列表确认 login、getQuiz、submitAnswer、getRank 都是“已部署”状态。首次调用云函数会有 1 到 2 秒冷启动这是云开发的特性。数据库方面我的习惯是这样的权限配置集合名建议权限questions所有用户可读仅管理端可写answers仅创建者可读写云函数不受限users所有用户可读仅创建者可写quizzes所有用户可读如有这里要特别解释 answers因为判分写入走云函数云函数不受集合权限限制所以你可以放心把前端读写权限设成“仅创建者可读”。当结果页只需要根据 recordId 读取自己记录时用 db.collection(answers).doc(id).get() 也能读如果要展示其他人的排名就走 getRank 云函数。4.3 常见问题与避坑5 个具体踩坑记录第一个坑真机上点击开始后一直白屏控制台报 wx.cloud is undefined。原因是基础库版本太低云开发要求基础库至少 2.2.3。解决在开发者工具右上角“详情”里把调试基础库调到 2.10.0 以上真机预览时在手机上也要升级微信到最新版本。第二个坑调用 getQuiz 报 -501000 或 Function not found。原因一般是云函数没部署成功或者 env 配了别人的环境。解决先在云开发控制台确认函数存在再检查 app.js 里 env 和当前选中环境一致最后重新右键上传一次函数并选择“云端安装依赖”。第三个坑答题倒计时在切后台后暂停回到页面时间不准。原因setInterval 在页面进入后台时会被系统挂起导致计时器不准确。解决在 onShow 里重新校准记录离开页面时的时间戳回来后用 Date.now() 差值同步剩余时间如果只是普通答题也可以接收这个误差但竞赛场景必须处理。第四个坑排行榜偶尔出现两个人显示同一昵称。原因users 集合里没有按 openid 做唯一索引重复调用 login 函数时插入了多条记录。解决在 login 云函数里先按 openid 查询有记录就 update没有才 add或者给 openid 建唯一索引。第五个坑云函数返回的数据在小程序端被截断比如题目超过 100 道时返回不完整。原因云数据库单次 get 默认最多返回 100 条。解决getQuiz 里设置 limit 不超过 100或者用分页查询在我的场景里每场 10 题不需要改但如果你做题库预览要加 page 参数循环取。5. 二次开发改造换题库、加好友对战、接自定义 UI 的落地技巧拿到源码后最常改的三处是题库内容、玩法规则和页面样式。先说换题库。我一般会写一个 importQuestions 云函数在本地把 Excel 转成 JSON再调用这个函数插入数据库。JSON 的结构就按 questions 集合的字段来title 是题干options 是四个选项answer 是正确选项下标score 默认 1。如果你嫌用函数导入麻烦也可以直接在云开发控制台点“导入”按钮选 JSON 文件但字段名必须完全一致。我建议保留一个题目模板文件放在源码包 assets 目录下以后每次活动直接改它。加好友对战是我做过一次的需求。实现思路并不复杂在首页创建一个“对战房间”房间号作为参数传给 getQuiz 和 submitAnswer答题记录里增加 roomId 字段。两个人进入同一个房间后前端没法直接实时同步常见做法是每 3 秒轮询一次双方进度或者用云开发的实时数据推送监听 answers 集合。我选的轮询方案对校园场景足够也不增加额外成本。如果你要改成“两人答完先交卷胜出”就把输赢判断放进 submitAnswer 里交卷时检查对方是否已经交卷。自定义 UI 方面原生小程序没有 Vue 的响应式便利但胜在组件化简单。进度条这种重复展示的东西我把它抽到 components/progress-bar 里页面里通过 custom-style 传入颜色和宽度改样式时不用动页面代码。改主题色更简单app.wxss 里定义几个 CSS 变量所有页面统一引用换肤就是改一行。验证改造是否成功我的习惯是每次只改一个模块然后在微信开发者工具里跑一遍自动预览用手机真机检查云函数调用是否正常。改完题库后我会先清掉本地的 answers 记录避免排行榜被旧数据干扰。有一次我改了题目字段后忘了同步 getQuiz 的 field 配置结果前端一直拿不到选项排查了很久才发现是字段名不匹配。从那以后我每动一次题库都会强制走一遍“控制台数据库导出 → 改 JSON → 导入 → 真机答题一次”的完整流程再回头看代码改动。希望帮到你。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
