夜雨聆风
从一份Word复习资料到手机英语学习APP的实现
不是炫技，而是把专业资料变成真正能用、能更新、能传播的学习工具。
最开始的问题很朴素：
我手里有一份《轨道交通造价工程英语》复习资料，但Word 文档不适合碎片化学习。
通勤、出差、午休时想复习，打开 Word 不方便；想查一个词，翻文档不够快；更关键的是，英语学习不能只看，还要能听、能跟读。
所以，我决定把它变成一个手机上的复习 APP。
最终成果：
-
48 个学习单元 -
762 张复习卡片 -
支持刷卡片、做测验、全文搜索、跟读发音 -
手机随时随地打开，Word 更新后一键重新生成
整个过程不需要高深技术，一个非程序员也能复用。
下面是我的完整落地过程。
一、业务痛点：Word 为什么不适合碎片化学习
问题不在资料有没有，而在使用场景变了。
手机时代，学习发生在通勤路上、出差途中、午休间隙——每次 10 分钟。
Word 文档有三个致命问题：
1. 打开不方便
通勤时想复习，Word 路径长、阅读重，不适合 10 分钟快速学习。
2. 查找不够快
想查 “quotation””scope of supply””variation” 这些工程英语表达，只能翻文档。
3. 不能有效跟读
英语学习不能只看文本，还要听、模仿、复述。手机浏览器的朗读能力参差不齐，根本靠不住。
所以目标很明确：
不是做一个复杂系统，而是做一个能用的学习工具。
具体要求：
-
✅ 能看章节内容 -
✅ 能刷单词和句型卡片 -
✅ 能做小测验 -
✅ 能快速搜索 -
✅ 能朗读和跟读 -
✅ 能随时随地访问 -
✅ 后续 Word 更新后，能重新生成新版
二、总体路线：先做网页版，再封装成 APP
最终采用的路线很简单：
Word 资料 → Python 提取内容 → 生成网页复习 APP → 发布到 Netlify → 手机随时访问 → 需要时封装成安卓 APP
为什么不一开始就做原生安卓 APP？
因为需要配置 Android Studio、Java、Gradle、签名、安装包……对非程序员门槛太高。
先让内容跑通，再考虑安装包。网页 APP 更轻，更新更方便，更新成本最低，也最适合非程序员维护。
三、第一步：把 Word 内容结构化
原始资料是 Word 文档，里面包含章节、英文句子、中文解释、对话、听力文本、词汇和句型。
处理方式：写一个 Python 脚本，读取 Word，提取成网页能使用的数据文件。
scripts/build_review_data.pydata/review_data.js
关键不是”识别所有文字”，而是把内容变成适合学习的结构：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
这一步完成后，全本资料被整理成：
-
48 个学习单元 -
762 张复习卡片
四、第二步：做成手机网页复习 APP
网页 APP 采用最轻量的方式实现，核心文件：
index.html 网页入口styles.css 手机端样式app.js 卡片、测验、搜索、跟读逻辑data/review_data.js 复习数据manifest.webmanifest APP 信息sw.js 离线缓存assets/audio/ 跟读音频
功能分成6 个入口：
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
设计原则：
首页不是宣传页，而是直接进入复习。信息密度要适合复习场景，按钮和入口要少而清楚。手机上打开后，直接进入学习。
实际界面
首页：今日学习 + 6 个功能入口
支持”全部/词汇/句型/必背”分类筛选，点击”翻面”查看中文解释，”朗读”按钮直接播放音频。
五、第三步：发布到公网，让手机随时随地能打开
本地网页只能在电脑附近使用，不适合”随时随地”。
所以采用Netlify发布静态网页。
发布包只保留公网需要的文件：
index.htmlapp.jsstyles.cssmanifest.webmanifestsw.jsrobots.txtassets/data/
不上传源文件：
原始 Word、脚本、本地运行批处理、日志、input/、scripts/
这样做是为了避免把原始文件、本地路径或脚本暴露到网页上。
最终手机访问地址：
https://lively-gaufre-e1cbeb.netlify.app/
加入robots.txt与noindex，降低搜索引擎收录概率。不主动公开，但知道链接的人可以访问。
六、第四步：解决手机不能朗读的问题（踩坑）
这是整个过程中最大的坑。
一开始网页使用浏览器自带的语音朗读功能。电脑和部分浏览器可以，但荣耀手机自带浏览器对网页朗读支持不好，导致”单词朗读”没有声音。
旧方案：网页调用浏览器自带朗读
→ 问题：部分手机浏览器不支持或不稳定
新方案：用 Microsoft Edge TTS 提前生成 MP3，网页按钮直接播放音频
→ 结果：朗读能力从”依赖浏览器”变成”内容自带音频”
现在音频分成三类：
-
章节全文音频 -
随身复习音频 -
英文卡片音频
卡片页、测验页、搜索页、跟读页都优先播放 MP3。这样荣耀手机浏览器也可以听和跟读。
️ 注意：纯中文说明卡不会生成英文 MP3，这是正常的。
七、APP 核心功能展示
测验：自动生成选择题
从卡片数据自动生成中文含义选择题，答对答错即时反馈，带进度条显示完成情况。
跟读：整段英文跟读训练
整段英文展示，”朗读全文”按钮播放 MP3 音频，发音重点自动标红提示。
随身复习卡：高频表达速记
自我介绍、会议常用表达等高频场景，中英对照，支持逐句朗读和跟读。
搜索：快速查词和句型
支持英文、中文、工程含义混合搜索，输入 “quotation””预算””investment” 都能快速定位。
八、第五步：更新闭环——后续不是重做，而是重新生成
这个工具真正有价值的地方，是内容更新后可以形成固定流程。
后续如果 Word 内容更新，不需要重做整个项目。流程是：
1. 把新的 Word 放到下载目录2. 双击 rebuild_data.bat → 自动重新生成复习数据和音频3. 双击 build_deploy_package.bat → 得到 output/mobile_review_site.zip4. 上传到 Netlify 原网站覆盖旧版5. 手机刷新即可看到新版
用户只需要记住两个入口：
-
rebuild_data.bat：从 Word 重新生成内容和音频 -
build_deploy_package.bat：生成可上传的发布包
缓存问题：
如果手机还是旧版，通常不是上传失败，而是PWA 缓存。
解决办法：在网址后加版本号，例如：
https://lively-gaufre-e1cbeb.netlify.app/?v=20260626-card-audio
或者清理浏览器缓存后重新打开。
九、第六步：封装成安卓 APP
网页已经能用，但如果想更像一个真正 APP，可以再封装。
推荐路线：PWABuilder
1. 打开 https://www.pwabuilder.com/2. 输入 Netlify 永久网址3. 选择 Package / Android4. 下载安卓安装包5. 发到手机安装
什么时候需要重新封装 APK？
-
改 APP 名称 -
改 APP 图标 -
改网址 -
要上架应用商店 -
改安卓包名或签名
💡 如果只是更新学习内容，一般不用重新封装 APK。因为 APP 打开的仍然是 Netlify 网页，只要网页更新，APP 下次打开就会读取新内容。
十、四个踩坑复盘
这些问题看似小，但都是非程序员做移动工具时最容易卡住的地方。
1️⃣ 缓存坑
以为上传了网页，手机就一定会更新。
实际不是。PWA 会缓存旧版本，手机可能继续显示旧内容。
解决：改缓存版本号、清缓存，或在网址后加版本参数。
2️⃣ 朗读坑
以为浏览器朗读在所有手机都能用。
实际不是。荣耀自带浏览器不稳定。
解决：提前生成 MP3，内容自带音频。
3️ 入口坑
以为 Netlify 的公开网址就是上传入口。
实际不是。公开网址只能看网页，不能拖文件更新。
解决：更新必须进入 Netlify 后台的Deploys 页面，上传新的发布包。
4️⃣ 安全坑
把所有项目文件都上传到公网。
不应该。公网发布包只放网页运行需要的文件。
解决：原始 Word、脚本、本地路径都不应该上传。
十一、可以复用的经验
这个方法不只适合英语复习，也适合很多专业资料的移动化学习：
-
专业考试复习 -
项目管理知识库 -
合同条款速查 -
造价指标学习卡 -
海外项目常用表达 -
企业内部培训资料
关键思路：
先把资料结构化再做成手机可用的网页再补上搜索、卡片、测验、音频最后再考虑封装成 APP
这样成本低、更新快，也更适合个人或小团队落地。
十二、需要注意的边界
如果资料里包含内部报价、合同、项目成本、投标文件、业主信息等敏感内容，不建议直接用公开 Netlify 链接。
这种情况下应该改成：
-
带密码访问 -
企业内部服务器 -
私有网盘或内部门户 -
带登录权限的知识库系统
这次的复习资料主要是英语学习内容，所以可以采用”不主动公开网址，但知道链接即可访问”的轻量方案。
十三、一句话总结
这不是单纯把 Word 转成网页，而是把一份专业学习资料，拆成了可以随时刷、随时听、随时查、随时更新的手机学习工具。
对非程序员来说，最重要的不是技术多复杂，而是形成一个可持续更新的流程：
资料更新 → 自动生成 → 上传发布 → 手机使用
只要这个闭环跑通，后面就可以不断扩展内容。
附：关键工具
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
参考资料：
-
Netlify Create deploys：https://docs.netlify.com/deploy/create-deploys/ -
Chrome Trusted Web Activity：https://developer.chrome.com/docs/android/trusted-web-activity/quick-start -
PWABuilder：https://www.pwabuilder.com/ 