想做一个微信做题小程序，但网上搜到的教程要么是零散的代码片段，要么是过时的开发工具版本。今天这篇文章，我会像带你一步步搭积木一样，从视频制作的角度，把整个流程拆解清楚。你跟着做，不仅能做出能跑的小程序，还能录出一段别人看了就能复刻的教学视频。

一、为什么你的做题小程序视频没人看？先解决选题和定位

我见过太多人一上来就录“从零搭建题库管理后台”，结果视频播放量不到50。问题出在哪？你想想，观众打开视频的瞬间，脑子里想的是“我能不能3分钟搞定一个刷题工具”，而不是“我要学一个完整的后端架构”。

所以，视频的切入点要小。举个例子，别做“微信做题小程序全栈开发”，改成“10分钟用云开发做一个选择题刷题器”。后者把“云开发”这个具体工具和“选择题”这个具体场景绑定了，观众一听就知道自己能不能用上。

实际操作中，你可以在视频开头用30秒展示最终效果——手机屏幕上，一道选择题出现，点选项立刻出对错，底部还有进度条。这个画面比任何技术术语都有说服力。

二、选题库结构设计：别让观众在第一步就卡住

很多教程一上来就让你建“数据库表结构”，什么“字段类型”、“索引优化”，观众直接懵了。我的做法是：先给一个现成的、能直接导入的题库JSON格式。

比如，你在视频里可以这么说：“打开你的记事本，复制下面这段代码，保存成questions.json。注意，每一道题有四个字段：题目、选项A到D、正确答案。答案用数字1到4表示。”

然后你当场演示：

{ "question": "中国的首都是哪个城市？", "options": ["上海", "北京", "广州", "深圳"], "answer": 2 }

这里有个坑：很多新手会在选项数组里写“A.上海”、“B.北京”，但小程序渲染时还要手动切掉前缀。你直接写纯文本，前端代码会更简洁。这个细节，你在视频里一定要提，观众会觉得你替他们想好了所有坑。

三、云开发环境配置：手把手教，连鼠标点击位置都标出来

打开微信开发者工具，选“小程序”->“云开发快速启动模板”。这一步会选错成“基础模板”，导致后续找不到云函数入口。你在视频里要特意把鼠标挪到那个选项上，圈出来。

接着，点“云开发”按钮，开通环境。这里有个关键：环境ID要复制保存好，后面代码里要用。我见过有人视频里一闪而过，结果观众倒回去看了三遍才找到。

你可以在视频里说：“我习惯把环境ID写在项目根目录的env.js文件里，这样不会丢。来，跟着我新建一个文件，输入 const env = ‘你的环境ID-xxxxx’。”

然后上传题库数据：在云开发控制台里，点“数据库”->“新建集合”->命名为“questions”->“导入”。选中刚才的JSON文件。注意，导入时选“JSON格式”，编码选“UTF-8”，否则中文会乱码。

四、前端页面制作：把“从数据库取数据”变成观众能看懂的步骤

这部分最容易讲得枯燥。我的技巧是：先做静态页面，再连数据库。观众先看到界面效果，心理上会觉得“这个我见过”，学起来不抗拒。

在pages/index/index.wxml里，写一个简单的布局：顶部是进度条（用view模拟），中间是题目文字，下面是四个选项按钮。每个按钮绑定一个点击事件。

比如：

{{currentQuestion.question}} {{item}}

这里有个容易出bug的地方：data-index必须写成驼峰式？不，小程序里要用data-*，且取值时用e.currentTarget.dataset.index。你在视频里要特意演示一次错误写法——比如写成dataIndex，然后控制台打印出undefined，观众一看就记住了。

然后写JavaScript逻辑：在onLoad里调用云函数获取题库数据。注意，第一次调用云函数需要初始化。你可以在app.js的onLaunch里写：

wx.cloud.init({ env: ‘你的环境ID’ })

获取数据的代码：

const db = wx.cloud.database() db.collection(‘questions’).get().then(res => { this.setData({ questions: res.data, currentIndex: 0 }) })

这里要强调：云数据库默认一次只能取20条数据。如果你的题库超过20题，要加分页逻辑。但视频里，你就用20题以内举例，说一句“超过20题的同学，可以看视频简介里的扩展教程链接”。既控制了视频长度，又留了钩子。

五、答题交互与反馈：让观众觉得“这小程序真智能”

点击选项后，要判断对错并给出视觉反馈。在selectAnswer函数里：

const selected = e.currentTarget.dataset.index const correct = this.data.questions[this.data.currentIndex].answer if (selected === correct) { wx.showToast({ title: ‘答对了！’, icon: ‘success’ }) } else { wx.showToast({ title: ‘答错了，继续加油’, icon: ‘none’ }) }

但这样太简单了。你要在视频里加入一个“高亮正确选项”的效果：无论用户选对选错，都把正确选项的按钮背景变成绿色，错误选项（如果选错）变成红色。这样用户能立刻知道正确答案是什么，学习效果更好。

具体做法：在data里加一个selectedIndex和correctIndex。点击后，setData这两个值，然后在wxml里用动态class控制颜色。

{{item}}

这个交互逻辑，比你用弹窗提示“正确答案是B”要直观十倍。观众看完会觉得：“哦，原来交互反馈可以这样做，我以后做其他功能也能用上。”

六、录制视频的实操技巧：怎么让观众跟着你做不迷路

别用录屏软件直接录整个屏幕。我推荐用OBS只录制微信开发者工具的那个窗口，然后把分辨率调到1280x720。这样视频清晰，而且观众手机上看字不费劲。

录制时，键盘操作要慢一点。比如你按Ctrl+S保存，嘴里要说“现在保存文件”，然后停顿两秒。很多教程语速太快，观众还没找到保存按钮在哪，画面已经切到下一步了。

还有一个独门技巧：在代码里故意埋一个错误，然后演示怎么调试。比如，故意把数据库集合名写成“question”（少个s），然后预览时报错“collection not found”。接着你打开调试器，指着错误信息说：“看，这里提示找不到集合，说明我集合名写错了。”观众会瞬间觉得“这老师真实在，连翻车都演示给我看”。

七、发布与分享：让你的小程序和视频一起被更多人看到

小程序做好后，在开发者工具里点“上传”，然后去微信公众平台提交审核。这里要提醒观众：个人主体的小程序不能做付费题库，也不能有用户间排名功能。如果你视频里做了排行榜，记得加一句“这里仅做演示，实际发布时要去掉”。

视频的最后，你可以展示一下小程序码，说：“扫这个码就能体验你刚做的这个小程序。如果你做出来了，欢迎在评论区晒出你的截图。”这个动作能大幅提升视频的互动率。

另外，把题库JSON文件和云函数代码打包成网盘链接，放在视频简介里。观众省去了手动敲代码的时间，更愿意看完你的视频。而且，他们用你的模板做出来东西，会默认你教得好，下次还来看你的教程。

最后说一句：做教学视频，恨不得把所有功能都塞进去。但一个好的做题小程序视频，核心是让观众在20分钟内，从“不会”到“跑起来一个最小可用版本”。题库管理、错题本、计时器，这些都可以放在第二期。第一期，就专注“选择题刷题”这一个点，讲透、讲全、讲得别人能复刻。