第 16 次课：做出你的微信小程序

一、上节课回顾

上节知识要点：

• 上节课把杂乱的学习文件整理成好找、能提交的课程资料，反复用的是四步流程：查看资料 → 分类命名 → 整理副本 → 按要求取出文件。
• 整理是让已有的东西变整齐；今天换个方向：从零做出一个新东西，并让它真的能在手机上用起来。

二、本节课任务与安排

本课交付

老师带大家把「手机袋管理员」从需求做到手机上真用：导入花名册自动生成 60 格手机袋图，点卡片就能记谁没交手机，统计提交后每天的数据都留档。

你会得到两个能真机使用的小程序：课上全班一起做出来的「手机袋管理员」，和你自己选题的独立小程序。

顺序	环节	学生产出	时间
回顾	上节课回顾	想起四步整理流程	5分钟
交付	看手机袋管理员演示与本课产出	知道要做两个真机可用的小程序	3分钟
理论	理论基础：小程序与云服务	会用四句话讲需求	10分钟
案例1	做出手机袋管理员并上线	第一个手机可用的小程序	22分钟
案例2	真机试用与改进	按反馈改出版本二	15分钟
案例3	独立开发我的小程序	独立完成的第二个小程序	15分钟
收尾	展示作品、复述方法	能说出四句话需求法	5分钟
机动	等待与排错	补齐必做成果	5分钟

上课前完成课前准备，素材从课程资料逐个下载。

环境：Windows 10/11，WorkBuddy 桌面端 5.6.1 及以上版本（安装登录教程），本人手机微信；本机课程目录为 D:\AIGC\lesson-16。软件版本与机房路径由教师在开课前核对：[课前演练补充]。

三、理论基础：小程序与云服务

先看一个今天绕不开的问题：管理员今天点了「张三交手机」，明天换台手机打开，记录没了。数据只存在一台设备上，就等于没存；今天整节课就是把它搬进云端，做成谁记都进同一个账本的小程序。

微信小程序是微信里打开就能用的小应用。 不用下载安装，扫码或点链接就进去，用完就退。微信像一座大商场，小程序就是商场里的一个个店铺：不用自己盖房子，入驻就能营业，顾客顺手就逛到。

数据要存进云服务。 点了谁没交手机，这个记录只存在手机上，换台设备就没了；存进云端像把钱存进银行，谁记账都进同一个账本，明天打开还能看到今天的数据。小程序需要保存数据时，WorkBuddy 会主动提示连接云服务，确认即可，不用自己搭服务器。

从生成到上线一条链路。 说清需求 → 生成预览 → 关联云服务 → 分享上线。以前上线要装开发者工具、配 AppID、手动传代码包；现在这些都在 WorkBuddy 里走完。没有小程序账号就先创建 14 天试用版，像店铺试营业，先让顾客进门；以后注册自己的小程序账号，再做正式版。

需求用四句话讲清：页面有什么、谁能用、存什么数据、跑通什么流程。 手机袋管理员这四句话就是需求卡上的四行，AI 照着做就能做对；四句话说不清，AI 就会猜，猜错就返工。描述时写明「微信小程序」四个字，避免被做成网页。

四、实操环节

案例1：做出手机袋管理员并上线

任务目标：

把「手机袋管理员」从需求做到手机能用：导入花名册生成 60 格手机袋图，点卡片切换状态，提交后数据存云端，手机真机操作。

实操步骤

1. 说需求，生成小程序（8分钟）

1. 在资源管理器打开 D 盘，确认 D:\AIGC\lesson-16 目录存在；没有就右键新建。

2. 打开 WorkBuddy 新建任务，工作目录选择 D:\AIGC\lesson-16。

3. 从课程资料下载 需求卡_手机袋管理员.txt 和 花名册_示例班级.csv 放进本课目录，双击打开需求卡，对照四句话是否完整。

4. 在任务输入框发送下面的提示词。

   请做一个微信小程序：手机袋管理员。
   我们教室门口有编号 01-60 的手机袋，编号是学生学号后两位。请实现：
   1. 新建班级并导入花名册（CSV 含学号、姓名两列），学号后两位自动作为该生的手机袋编号；
   2. 班级可以增加和删除，班级学生可以新增，编辑和删除，班级列表通过卡片布局显示；
   3. 点「手机入袋」打开对应班级的手机袋网格页，60 个卡片，每张显示袋号和姓名；
   4. 点卡片循环切换状态：已交（默认）→ 未交 → 请假 → 回到已交，三种状态用颜色区分；
   5. 网格页实时统计今天未交和请假名单；
   6. 点「提交本节课记录」把当天数据存入云数据库；
   7. 支持按日期查看历史记录。
   工作目录里有个需求文档以及「花名册_示例班级.csv」可用于测试。请生成一个可以直接体验测试的微信小程序并给我，API 和数据库都部署在云端，数据库用 SQLite，API 用 nodejs。

   执行后你会看到：预览区出现手机样式的小程序页面，有班级页和手机袋网格页；因为要保存花名册和打卡记录，对话中会提示连接云服务。

2. 关联云服务，导入花名册，分享上线（14分钟）

1. WorkBuddy 提示连接云服务时选择确认：云数据库保存花名册和每天的打卡记录。

2. 打开应用预览区，点应用名旁边的「云服务」标签，能看到数据表就说明连接成功。

3. 在预览里试用：新建班级「示例班」，上传工作目录里的「花名册_示例班级.csv」，确认网格页出现 60 个卡片，编号 01-60 对上姓名。

4. 点几张卡片：第一下变「未交」，第二下变「请假」，第三下回到「已交」；底部实时出现未交名单。

5. 记一条想改进的地方，比如想在统计页直接显示未交学生的座位号，发送下面的修改提示词。

   基本能用，请加一个改进：网格页顶部增加一行今日汇总，显示「已交 N 人、未交 M 人、请假 K 人」三个数字，点数字可跳转查看对应名单。其他保持不变。

   执行后你会看到：预览更新：网格页顶部出现三个统计数字，点击能跳转名单；原有打卡和提交功能不变。

6. 点应用空间里的「分享」进入发布流程；没有小程序账号就选择创建 14 天试用版；按软件给出的二维码，用自己手机的微信打开小程序。

   执行后你会看到：手机微信里能打开手机袋管理员；在手机上点几张卡片并提交，回到电脑预览的统计页能看到同一批记录——数据真的存进了云端。

查什么	合格的样子
网格正确	导入花名册后 60 张卡片，袋号与姓名一一对应
状态切换	点卡片按 已交 → 未交 → 请假 → 已交 循环，颜色区分清楚
数据上云	手机提交的记录在电脑端统计页可见
云服务已连	「云服务」标签里能看到数据表

问题与注意事项

• 找不到「小程序」入口：确认 WorkBuddy 为 5.6.1 及以上版本（版本检查见课前准备页）；仍没有就直接在对话框说「帮我做一个XX微信小程序」，写明「微信小程序」四个字。
• 生成了网页不是小程序：在对话里指出「我要的是微信小程序，不是网页」，让 AI 按小程序重新生成。
• 导入花名册后卡片对不上：检查 CSV 是否用记事本打开另存过导致编码变化；重新上传原始文件，并在对话里说明「学号后两位是袋号」。
• 分享或试用版创建失败：截图错误提示，先回预览区核对功能，发布环节等老师统一排查后再试。
• 手机打不开：确认是在微信里打开，不是其他浏览器；仍打不开换一台手机对照，判断是分享方式的问题还是手机的问题。

案例2：真机试用与改进

任务目标：

同桌用手机真机试用你的小程序并提出具体反馈；你按反馈改版，体验真实用户反馈驱动的修改。

实操步骤

1. 真机互访，收集反馈（7分钟）

1. 把你的分享二维码发给同桌；同桌在手机微信里打开你的手机袋管理员，真实点几张卡片、提交一次。

2. 同桌提出一条具体反馈：哪里看不懂、想加什么、哪里点不动。只说「挺好的」不算反馈。

3. 你也打开同桌的小程序试用，回一条具体反馈。

   请把我的小程序分享方式和一句使用说明整理成一段话，方便发到教师群邀请同事试用。

   执行后你会看到：你收到至少一条针对自己小程序的具体反馈，也发出一条。

2. 按反馈改版（8分钟）

1. 把收到的反馈放进下面的提示词发送，要求只改这一处。

   同学反馈：（粘贴收到的反馈）。请按这条反馈修改小程序，其他功能保持不变，改完更新预览。

2. 更新后按软件提示重新分享或刷新试用版，再用手机验证反馈点。

   执行后你会看到：手机上反馈提到的那一处行为发生了变化；原有打卡、统计、提交功能没有被改坏。

查什么	合格的样子
反馈具体	发出的反馈指出具体位置与期望行为
改版生效	手机上反馈点已按预期变化
功能保留	打卡、统计、提交等原有功能仍正常

问题与注意事项

• 收到「挺好的」这类反馈：请对方至少说出一个「如果能加上某个功能就更好了」。
• 改版把别的功能改坏：回对话指出「哪里坏了」，让 AI 恢复该功能后再更新分享。
• 试用版更新有延迟：以软件实际提示为准，必要时重新生成分享方式再扫码验证。

案例3：独立开发我的小程序

任务目标：

从自己的真实需求里选一个，独立走完「四句话需求、生成、连云服务、分享上线」，做出第二个小程序。

实操步骤

1. 选需求，填需求单（4分钟）

1. 下载 需求单_我的小程序.txt，从清单里选一个，或写下自己的：班费记录、课堂打卡、活动报名、宿舍报修、单词自测都可以。

2. 按四句话把页面、谁能用、存什么数据、跑通什么流程填写完整；吃不准就先写最简版本。

   请检查我填写的「需求单_我的小程序.txt」：四句话是否完整、有没有互相矛盾、适不适合做成小程序。有问题指出，不要开始生成。

   执行后你会看到：需求单四行全部填完，AI 确认无矛盾或给出修改建议。

2. 独立生成并上线（11分钟）

1. 发送生成提示词，写明微信小程序和四句话需求；涉及保存数据就确认连接云服务。

2. 在预览里试用，至少提出一处修改并确认改好。

3. 分享上线，用自己手机验证，再把分享方式和一句用法说明发到班级群。

   我要做一个微信小程序（不是网页）。四句话需求：第一，页面有：（填）；第二，谁能用：（填）；第三，要保存的数据：（填）；第四，跑通的流程：（填）。请生成预览；需要保存数据时提示我连接云服务。

   执行后你会看到：第二个小程序能在手机微信里打开，功能与需求单一致；班级群里能看到同学发出的各类小程序。

查什么	合格的样子
需求单完整	四句话无空项，独立任务由本人完成
真机可用	第二个小程序在自己手机微信里打开并操作
功能一致	实际功能覆盖需求单的四句话

问题与注意事项

• 不知道选什么：做「课堂打卡」最简单：一个打卡按钮加一个日历显示记录，就够用。
• 生成结果太复杂：补一句「先做最简版本，页面不超过两个」。
• 时间不够完成分享：至少完成生成与预览试用，分享环节可参照 案例1 步骤课后自己做。

五、总结与巩固

回想今天反复用的方法：页面有什么、谁能用、存什么数据、跑通什么流程；这就是用 AI 解决自己身边小问题的完整过程——从真实需求到四句话需求卡，再到生成、云服务、真机验证。

说一说：你身边哪件重复的小事，值得用今天的方法做成一个小程序？

下课后老师会把「手机袋管理员」真的用在接下来的每节课：交手机时打开点一点，谁没交一目了然。你们的独立小程序也一样，做出来就要真用。

六、资料与下载

• 课前准备：软件版本、手机微信、素材下载位置和自查。
• 课程资料：素材逐个下载，全部小于 10 MB。

延伸视频

推荐观看：20 分钟用 AI 走完小程序开发全流程，与本课 案例1 的带练流程互相印证。