夜雨聆风
从一个1182行的HTML，到覆盖七个阶段的完整APP
从三升四的HTML单文件，到覆盖幼升小到小升初七个阶段的完整APP，我用了三天，迭代了15个版本。这篇文章没有技术干货，只是一段真实的开发心路——踩过的坑、犯过的错、还有那些半夜盯着报错信息发呆的时刻。
开头很简单：一个HTML文件
星期一下午，我把三升四的学习系统做好了。一个1182行的HTML文件，66道题，7天课程，星星金币徽章全齐。孩子试了一下，说挺好玩的。我觉得这事儿可以收工了。
然后有朋友说：
"能不能做个二升三的？我家娃开学三年级。"
我说行，改改内容就行。
然后又有人说：
"小升初能做吗？"
我愣了一下——这跨度有点大。小学六年，从20以内加减法到分数乘除法，从拼音到文言文，从ABC到四大时态。每个年级的教材、新课标、知识点都不一样。
但我想了想，本质上不就是把同一个系统的内容换成不同年级的吗？框架是现成的，改数据就行。
于是我把原来的HTML文件复制了一份，开始往里填二升三的内容。做到一半发现不对——二升三的孩子才七岁，需要纯点击、大按钮、不能有打字题。我不能用同一套交互逻辑去套所有年级。
📌 v1 诞生：三升四改成了二升三，修修补补，凑合着跑。文件从37KB涨到41KB。
架构崩塌：一个下拉菜单救了我
从复制粘贴到JSON数据驱动——架构重构示意
v1跑起来之后，我开始往里加第三个阶段——四升五。代码开始乱。
原来每个阶段我都是复制粘贴HTML，然后改内容。三个阶段就是三套几乎一样的HTML，只是题目和知识卡片不同。当一个bug出现时，我需要在三个地方分别修改。
我知道这样不行。但当时想着"先跑起来再说"，就硬着头皮继续复制。
加到第五个阶段的时候，代码已经快一千五百行了。一个CSS样式的调整需要改五处，一个JavaScript函数的修复需要在五个地方同步。我漏了两次，导致不同阶段的交互行为不一致。
💡 星期二晚上，我做了一个决定：重构
不是修修补补，是彻底重来。
把七个阶段的数据抽出来，放进独立的JSON结构里。页面只保留一套渲染逻辑。用户切换阶段时，用同一套代码去渲染不同年级的内容。
阶段选择器是一个下拉菜单，放在页面顶部。
这是v3到v6。这个决定是对的。
数据填充：翻倍的题库是体力活
框架稳定之后，剩下的就是填充内容。
理论上限计算：
7个阶段 × 7天 × 3科 × 5题 = 735道题
实际完成：565道题（选择题+判断题为主，少量填空题）
填充数据本身没什么技术含量，就是一道题一道题地写，一道题一道题地校对。数学题要验算，英语题要核对拼写和语法，语文题要确认课文出处和知识点对应。这个环节没有任何捷径。
🚨 一个低级错误
我在JSON里把某道数学题的正确答案写错了——自己验算的时候才发现，4×25明明等于100，我怎么写了个125。如果这个错误没发现，孩子做对了系统判错，他会怀疑自己的计算能力。
这件事教会我：AI可以帮我出题，但不能帮我验题。565道题，每一道的答案我都自己算过一遍。
AI插图：最大的坑，也是最值的尝试
AI生成图片翻车现场——文字标注张冠李戴
v8开始加AI插图。最初的计划很美好——每个知识点配一张图，七个阶段大概需要30张左右。
我试了四个AI生图工具：
❌ Agnes 2.1 Flash
经常503，并行下载时文件名混淆。有一次"身体部位"的图存成了"天气词汇"，elbow标在了膝盖位置。英文拼写也经常出错。
→ 结论：只用来生成不带文字的纯视觉图，概念标注用HTML卡片实现
⚠️ belt（FLUX / Seedream）
效果确实不错——空山、夕阳、青苔，水墨风，和王维《鹿柴》的意境很搭。但免费额度有限，积分用完就没法继续用。
❌ GPT Image 2 / DALL·E 3
被墙了。试了几次，要么连不上，要么半路断开。在现有网络环境下不可靠。
✅ 最终方案：25张AI插图
• 语文古诗 → 意境图（AI生成）
• 数学概念 → 内联SVG（数位表、除法图，必须100%准确）
• 英语场景 → 纯视觉插图（不带文字标注）
一个尴尬的错误：77MB的APK
v8打包成APK的时候，出了个让我印象深刻的问题。
我把25张AI图片全部原图放进去了。那些图每张2-4MB，25张加起来将近70MB。加上HTML本身的代码，APK体积直接飙到——
77MB
一个学习APP，里面就一个HTML文件和二十几张图
试着装了一下——安装包解析失败。不是网络问题，不是权限问题，就是太大了，系统拒绝安装。
我开始压缩图片。用ffmpeg批量转格式、降质量、调尺寸：
图片压缩前 → 压缩后
平均每张：3MB → 300KB
图片总计：70MB → 5MB
APK：77MB → 12MB ✅
v10就是这个版本。12MB，能装了，打开速度也正常。
教训很简单：不是所有图片都需要高分辨率。一个数学概念图的示意图，800×600足够了。只有古诗意境图这种需要"欣赏"的，才用1024×768。
最终成果：一些数字
 |  |  |
 |  |  |
从深夜代码到成品APP——15个版本的旅程
📊 15个版本，最终数据
📱 覆盖阶段 7个（幼升小 → 小升初）
📅 课程天数 49天
📝 题目总数 565道（选择+判断+填空）
🎨 AI插图 25张
📦 APK大小 12MB
技术栈不复杂：HTML/CSS/JS做前端，aapt打包APK，jarsigner和apksigner签名，ffmpeg压缩图片，Agnes和belt生成AI插图。
写的代码不多，改的代码很多。大部分时间不是在"写新功能"，而是在"修旧问题"——要么是架构不对，要么是数据错了，要么是图片太大。
三条真实的教训
做完之后回头看，有三件事如果一开始就想清楚，能省掉一半的时间。
教训一：别想着"先跑起来再改"
单阶段改多阶段的时候我吃了大亏。v1到v5那堆复制粘贴的代码，最后全删了。如果一开始就设计好JSON数据结构，七天做完的东西三天就够了。
教训二：AI生成的内容，人必须验
无论是题目还是答案，还是图片上的标注，AI都会出错。而且错得很自然——看起来像是对的，实际上完全不对。需要人为去核对。
教训三：图片该压缩就压缩
不是所有图片都需要原图。77MB那个版本，打开可能要等好几秒。12MB的版本，几乎秒开。800×600够用的东西，没必要用4K。
写在最后
这个APP还在继续完善。有些阶段的题量还不够，有些配图还可以再调，有些交互细节还能优化。
但总的来说，三天时间，从一个HTML文件到一个覆盖七个阶段的完整APP，这段经历挺有意思的。不是因为它做得多好——事实上中间各种翻车——而是因为它是一个很典型的"想法→踩坑→重构→再踩坑→再重构"的过程。
自己搞开发，真累！
如果你也想做类似的东西，上面那三条教训可能是这篇文章里最有用的部分。
· · ·
🗣️ 聊聊
你用过什么给孩子做的学习工具？
或者你自己踩过什么"开发翻车"的坑？
评论区聊聊 👇
📖 本系列往期
第35篇：暑假学习系统从零搭建（后台回复"暑假桥"获取）
第36篇：WAIC 60台机器人 vs 我家9岁孩子