
## 一、项目背景

家里有中学生，背单词是刚需。市面上的背单词 App 要么广告多、要么词库不跟教材。于是我想自己做一个**面向中学生、词库贴合人教版教材、能离线、能装到手机上**的背单词应用。
成品叫 **「智背单词」**，最终形态是一个 **Android APK**：打开就是原生 App 的体验，里面跑的是一个 H5 应用（HTML/CSS/JS），整个前端被打包进 `assets/web/`，用 `WebView` 加载。


----
## 二、技术方案：H5 + WebView 包装

我让 WorkBuddy 帮我权衡过几种方案，最终选了 **H5 + Android WebView 包装**：

| | | |
|:-:|:-:|:-:|
|方案|评价|结论|
|纯原生 Kotlin 全写|开发慢、改动贵|太重|
|React Native / Flutter|环境复杂|暂不需要|
|**H5 + WebView 壳**|前端随便改、安卓只做容器|✅ 选中|
好处：前端逻辑用 Web 技术快速迭代，安卓侧只负责"套个壳+装包"，学习和发布成本都低。
工程分两层：
```

```

----
## 三、我怎么用 WorkBuddy 推进（真实过程）

这个项目不是一步到位的，我（借 WorkBuddy）分了三轮迭代：
1. **第一版：搭骨架**。让 WorkBuddy 把应用拆成 5 个模块——词库接口 `database.js`、朗读 `tts.js`、存储 `storage.js`、复习引擎 `review.js`、主逻辑 `app.js`，逐个生成。

1. **第一次升级：补全词库**。用 Python 脚本（`generate_middle.py` / `generate_high.py`）批量生成了 11 个分册词库（初中 5 册 622 词 + 高中 6 册 652 词），把 `database.js` 改成"按年级查询"的统一接口。

1. **第二次升级：对齐教材**。我用下来发现词库不是教材原表、还按首字母排序。我让 WorkBuddy **派出 5 个并行子 Agent** 抓取 11 册教材单词表，导出 TSV，再用 `build_words.py` 转成带 `unit`（单元）字段的 JS 词库，**最终 4557 词、按教材单元顺序**，还复用了 638 条旧例句。

>经验：让 WorkBuddy 一次写功能是可控的；但"抓 11 册教材词表"这种大批量活儿，用**并行子 Agent** 比串行快得多，也不会互相干扰。


----
## 四、核心模块（含真实代码）

### 4.1 词库接口 `database.js`（按年级/分册统一查询）

所有分册词库挂在一个映射里，对外只暴露 `getWords(grade)` 等统一方法，换年级不用改业务代码：
```

```### 4.2 单词发音 `tts.js`（Web Speech API）

用浏览器原生语音合成朗读单词/例句，自动挑 `en-US` 语音：
```

```>坑：Chrome 的语音列表是**异步加载**的，所以要在 `onvoiceschanged` 里再取一次，否则首屏可能读不出声。

### 4.3 艾宾浩斯复习引擎 `review.js`（项目灵魂）

背了不忘才是关键。复习间隔按经典遗忘曲线设定（分钟），并用"熟悉度"做系数微调：
```

```用户每次背完选"1 不认识 / 2 模糊 / 3 认识 / 4 很熟"，引擎据此排下次复习时间——记得越熟，间隔拉得越长。
### 4.4 数据存储 `storage.js`

学习进度、复习队列全用 `localStorage` 存。词库结构升级时靠版本号自动重置进度，避免脏数据：
```

```### 4.5 安卓壳 `MainActivity.java`（WebView 包装）

安卓侧极简——一个 `MainActivity` 里放一个 `WebView`，把前端当本地页面加载：
```

```布局 `activity_main.xml` 里就一个 `<WebView>`；`AndroidManifest.xml` 里给 `MainActivity` 配了 `configChanges` 让旋转屏不重载页面（交给 CSS 媒体查询自适应）。
`build.gradle` 关键点：
```

```

----
## 五、踩坑与解决（真实经验）

**坑 1：词库跟教材对不上**
第一版词库是通用词表、按首字母排，孩子找不到教材里的单词。解决：用 **5 个并行子 Agent** 抓 11 册教材单词表 → TSV → `build_words.py` 转 JS，带上 `unit` 字段按单元排序。
**坑 2：词库升级后进度错乱**
词库结构变了，旧的复习记录对不上新词。解决：`storage.js` 加 `DB_VERSION`，版本不一致就清空重建进度。
**坑 3：TTS 首屏不发声**
语音列表异步加载，开局取空。解决：监听 `onvoiceschanged` 重新取语音。
**坑 4：旋转屏页面重置**
默认 WebView 会重载。解决：`Manifest` 里加 `configChanges="orientation|screenSize..."`，并 `onConfigurationChanged` 空实现，让 CSS 自适应。


----
## 六、成果

「智背单词」现在能：
- 按**人教版教材单元**背单词（初中到高中 11 册、4557 词）

- 点一下听标准发音

- 按**艾宾浩斯曲线**自动排复习，记得越熟间隔越长

- 离线可用，进度本地保存

- 装成 **Android App**，体验和原生无异


----
## 七、给想用 WorkBuddy 做应用的同学的建议

1. **先定架构再写代码**：H5 + WebView 这类"前端快、壳子轻"的组合，非常适合个人开发者

1. **大批量活交给并行子 Agent**：抓词库、爬资料，并行比串行快且互不干扰

1. **存储加版本号**：词库/结构一变，旧数据要能安全重置

1. **每升一级留记录**：像我 `.workbuddy/memory` 里那样写开发日志，复盘和写教程都省力

1. **真实记录**：写教程时把真实截图和代码留好，既是分享也是复盘


----
本文为原创内容，记录本人用 WorkBuddy 开发「智背单词」Android 应用的真实过程。首发于腾讯云开发者社区，转载请注明出处。

家里有中学生，背单词是刚需。市面上的背单词 App 要么广告多、要么词库不跟教材。于是我想自己做一个面向中学生、词库贴合人教版教材、能离线、能装到手机上的背单词应用。成品叫 「智背单词」，最终形态是一个 Android APK：打开就是原生 App 的体验，里面跑的是一个 H5 应用（HTML/CSS/JS），整个前端被打包进 assets/web/，用 WebView 加载。

WorkBuddy# 实战：用 WorkBuddy 开发「智背单词」——一个面向中学生的 Android 背单词应用

客户端

前端

开发工具

「智背单词」是一款面向中学生的离线背单词Android应用，词库精准对齐人教版教材11册4557词，按单元顺序学习，支持标准发音及艾宾浩斯遗忘曲线智能复习。采用H5+WebView轻量架构，开发迭代快，安卓壳极简，学习进度本地存储。文章详述用WorkBuddy并行子Agent抓取教材词库的真实开发流程，含核心代码、踩坑解决及个人开发者实用建议。

语音合成

数据存储

代码解释

WorkBuddy 

Flutter

Android

Python

Kotlin

容器

Agent

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

「智背单词」是一款面向中学生的离线背单词Android应用，词库精准对齐人教版教材11册4557词，按单元顺序学习，支持标准发音及艾宾浩斯遗忘曲线智能复习。采用H5+WebView轻量架构，开发迭代快，安卓壳极简，学习进度本地存储。文章详述用WorkBuddy并行子Agent抓取教材词库的真实开发流程，含核心代码、踩坑...

WorkBuddy# 实战：用 WorkBuddy 开发「智背单词」——一个面向中学生的 Android 背单词应用-腾讯云开发者社区-腾讯云

WorkBuddy# 实战：用 WorkBuddy 开发「智背单词」——一个面向中学生的 Android 背单词应用

WorkBuddy# 实战：用 WorkBuddy 开发「智背单词」——一个面向中学生的 Android 背单词应用

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐