我手搓了一个少儿英语微信小程序：从 0 到「快乐英语岛」的完整复盘

手搓小程序实录 · 第 1 篇

我手搓了一个少儿英语微信小程序： 从 0 到「快乐英语岛」的完整复盘

功能设计 · 技术方案 · 踩坑复盘 | 全文约 4000 字，阅读 10 分钟

导读：本文记录我从需求分析、原创内容设计、AI 语音合成、页面编码到真机调试的全过程。技术栈很轻：微信原生小程序 + edge-tts + ffmpeg，但踩过的坑很真实——包体积超限、页面白屏、转发按钮变灰，一个都没躲过。所有内容均为原创，不碰任何教材版权红线。

一、为什么要手搓这个小程序？

我想给 1~6 年级的孩子做一个「点一点就能学」的小程序：界面柔和卡通、字体放大、没有大段文字，六大模块摆在首页，选个年级就能开始。更关键的一条底线——所有学习内容全部原创改写，只借鉴主流教材「先听说后读写」的教学框架，绝不搬运原版课文、歌词和音频，规避版权风险。

二、产品设计：六大模块 + 年级分层

首页是六个彩色卡片，对应六大功能模块，按年级循序渐进：

• 字母发音：26 个字母、元音音标、大小写书写规范，配真人发音；
• 趣味单词：单词卡带配图、音标、联想小故事、例句，学完有看词选义小测验；
• 快乐儿歌：原创英文儿歌，歌词逐句高亮滚动、可整首循环、点任意一句单独朗读；
• 课文朗读：短文分段朗读、逐句中文翻译、重点词句标注、录音跟读对比；
• 情景对话：校园、家庭、购物等 8 个生活场景，乌龟慢速 / 兔子常速一键切换，角色配音练习；
• 听力闯关：分级题库，听完四选一，做完自动出分，错题自动进错题本。

分层逻辑很简单：1~2 年级只开放听说类模块（字母、单词、儿歌、对话），课文和听力 3 年级解锁。激励系统用最原始也最有效的——小星星：完成测验 +2，听力通关 +2，攒星星换徽章，进度全部本地存储，无需注册登录。

▲ 从需求到上线的完整制作流程与技术架构

三、核心设计：一份 JSON，喂饱两端

整个项目最省心的决策：把全部内容做成 7 份 JSON 数据文件——字母表、分年级单词、儿歌、课文、对话、听力题库、全局配置。页面代码只负责渲染，不写死一行内容。

这一份 JSON 同时喂两个「客户端」：转成 data/*.js 给小程序用，生成 preload.js 给浏览器 H5 预览版用。以后扩充词库，只改 JSON、重跑脚本，两端同步生效。

这里有个隐藏知识点：微信小程序的 require() 不支持 JSON 文件，只能引入 JS 模块——这正是我后面白屏半小时的元凶，按下不表，坑点复盘里细说。

四、没有配音演员，怎么做到「真人发音」？

孩子的英语启蒙，发音是生命线。请配音不现实，我用 edge-tts（微软 Edge 的神经网络语音合成）解决：写了一个 Python 脚本读取全部 JSON，把每一句文本合成真实英语发音的 mp3。

几个让效果明显提升的细节：

• 每个句子都有唯一音频 ID，如 w_g1_cat、dlg_shop_2_s，页面按 ID 取文件；
• 对话做双版本：同一句话合成慢速（_s）和常速（_n）两套音频，低年级听慢速磨耳朵，高年级切常速练语感；
• 增量生成：脚本自动跳过已存在的音频文件，扩充内容时只合成新增句子，190 句扩充到 241 句只花了一分多钟。

五、功能走读：六张图看懂全部模块

▲ 首页：年级徽章 + 六大模块入口 + 星星余额

▲ 字母与音标：字母卡、音标表、大小写规范、分年级语法

▲ 趣味单词（微信开发者工具真机截图）：配图 + 音标 + 联想故事 + 例句 + 跟读

▲ 快乐儿歌：逐句高亮滚动 + 循环播放 + 进度显示

▲ 情景对话：微信式气泡，慢速/常速切换，按住麦克风配音

▲ 听力闯关：即时对错反馈 + 自动出分 + 错题本

六、踩坑复盘：三个印象最深的坑

坑 1：Error 80051，包体积超限

Error: 系统错误，错误码 80051, source size 5167KB exceed max limit 4MB

第一次点「预览」就被这个报错打脸。排查发现是低级失误：把交付的 zip 解压进了项目目录里，嵌套的项目副本带着整整一份音频，包体积直接翻倍到 5.1MB。

解决分两层：短期用 project.config.json 的 packOptions.ignore 把嵌套目录、README、预览页排除出打包（非破坏性，文件还在）；根治用 ffmpeg 把 241 个 mp3 全部压缩成 24kHz/32kbps 单声道——语音清晰度几乎无感，体积从 3.4MB 砍到 2.4MB。

💡 记住这组平台硬指标：上传主包 ≤2MB、预览/真机调试 ≤4MB、用分包后整包 ≤30MB。它们不可申请调大，静态资源（音频/图片）多的项目，发布前一律上 CDN 或微信云存储。

坑 2：导航栏正常，页面一片空白

模拟器里标题栏渲染得好好的，页面内容却全无，控制台还不报红。这种「安静的白屏」最磨人——最后发现是每个页面都在 require('../../data/xxx.json')，而小程序根本不支持引入 JSON。

修法很机械但有效：脚本把 7 份 JSON 批量转成 module.exports = {...} 的 JS 模块，页面引用统一改后缀，一次通过。教训：**小程序的数据内容请直接以 .js 模块形态存在，JSON 只配当源文件。**

坑 3：转发按钮是灰色的

真机上点右上角「···」，「转发给朋友」灰色点不动。原因：小程序页面必须定义 onShareAppMessage，转发才算启用；朋友圈分享还要额外定义 onShareTimeline。给全部 8 个页面补上这两个方法，并在 app.js 的 onLaunch 里调用 wx.showShareMenu，按钮立刻点亮。

顺带记一个冷知识：模拟器里永远测不了转发，它是真实的微信社交行为，只能真机验证。

七、现在的样子和下一步

目前「快乐英语岛」已能在真机流畅运行：17 个一年级单词、6 首原创儿歌、8 个对话场景、241 条真人发音，星星徽章和错题本都在。孩子拿着手机点一点，喇叭里就是标准的英语朗读。

下一步计划：

• 接微信同声传译插件，给跟读加语音评测打分；
• 音频迁到微信云存储，主包瘦身到 300KB 以内，正式发布；
• 家长端周报：学习时长、星星曲线、错题榜。

回头看，手搓一个小程序的门槛比想象中低：原生框架 + 一份好组织的 JSON + 一个语音合成脚本，两周内的业余时间就跑通了全流程。真正花时间的不是写代码，而是踩坑和填坑——好在每个坑都值回票价。

互动：你在做小程序时踩过什么印象深刻的坑？评论区聊聊。如果这篇复盘对你有用，转发给那个「也想做个小程序」的朋友吧。