手机上刷英语题是什么体验？我用 Spring Boot + Vue 3 做了一个随时能用的英语练习平台

复制代码

# 手机上刷英语题是什么体验？我用 Spring Boot + Vue 3 做了一个随时能用的英语练习平台

不用下载 App，手机浏览器直接打开，微信里也能用，随时随地刷题学英语。前后端分离、语音朗读、智能提示、580+ 真题------从零到上线的完整记录。

前言

你有没有这样的经历？

通勤路上想背几个单词，打开 App 要加载半天
微信里看到一句英文想练练，得切到另一个 App
市面上的背单词软件都是「看单词选释义」，和真实考试脱节

我想要的是：掏出手机就能练，打开微信就能学，练的是真正考试会考的「看中文写英文句子」。

于是花了几天时间，做了一个英语句子填空练习平台。最大的特点是：手机端体验做到了极致------不用下载任何 App，浏览器打开即用，微信内置浏览器完美兼容，连语音播放都不受影响。

一、先看效果

在线体验：https://solosun.com.cn/english-learner/

手机浏览器或微信内直接打开即可体验，不用下载任何 App。

二、为什么要做手机端？

学习场景决定了一切

学英语最有效的场景不是坐在电脑前正经学习，而是碎片化时间：

🚌 通勤路上（地铁/公交）
🛏️ 睡前 10 分钟
☕ 等人/排队的间隙
🚽 嗯...那个场景

这些场景下你手边只有手机，而且大概率正在刷微信。如果一个学习工具需要「下载 App → 注册登录 → 找到课程」才能开始，90% 的人就放弃了。

我的设计目标：打开链接就能练，3 秒进入学习状态。

技术选型

方案	优点	缺点
原生 App	体验好	需要下载，推广难
小程序	微信内直接用	审核麻烦，功能受限
H5 网页	不用下载，微信能打开	需要解决移动端兼容

最终选择 H5 网页方案，因为：

用户零门槛，发个链接就能用
微信里直接打开，不用切 App
不受应用商店审核限制
一套代码全平台通用

三、手机端踩坑全记录

3.1 第一个坑：输入框键盘弹不出来

最开始把隐藏的 <input> 设成了 width: 0; height: 0，电脑上没问题，手机上点单词槽位------键盘死活不出来。

原因：手机浏览器对零尺寸的 input 元素不触发键盘。

css 复制代码

/* ❌ 错误写法 */
.hidden-input {
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ✅ 正确写法 */
.hidden-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  font-size: 16px;  /* 关键：防止 iOS 自动缩放 */
}

教训：手机端的 input 必须有真实尺寸，opacity: 0 可以隐藏但不能设为零尺寸。

3.2 第二个坑：删除键不灵

用户反馈：打错字母想删除，按 Backspace 没反应。

原因：手机键盘按 Backspace 时，如果 input 已经为空，浏览器不会触发 input 事件。

解决方案：监听 keydown.backspace，当前单词为空时自动跳到上一个单词：

javascript 复制代码

const onBackspace = (index) => {
  // 当前单词为空，跳到上一个单词继续删除
  if (!words.value[index].value && index > 0) {
    focusWord(index - 1)
  }
}

3.3 第三个坑：微信浏览器没有语音 API

这是最大的坑。Web Speech API（speechSynthesis）在手机浏览器上本来是支持的，但微信内置浏览器直接砍掉了这个 API。

javascript 复制代码

// 电脑上完美运行，微信里直接报错
if (!('speechSynthesis' in window)) {
  // 微信走到这里了...
}

踩坑过程：

复制代码

第一版：speechSynthesis → 电脑✅ 手机Safari✅ 微信❌
第二版：Google TTS API → 国内被墙 ❌
第三版：Edge TTS（后端生成音频）→ 全平台✅ 最终方案

最终方案：后端用微软 Edge TTS 生成 MP3 音频，前端用 new Audio() 播放：

python 复制代码

# 后端 tts.py
import edge_tts

voice = "en-US-AriaNeural"  # 微软免费语音
communicate = edge_tts.Communicate("Hello World", voice)
await communicate.save("output.mp3")

javascript 复制代码

// 前端：优先用浏览器语音，不支持时降级调后端
const speak = (text, lang) => {
  if ('speechSynthesis' in window) {
    // Safari/Chrome 直接用浏览器语音（延迟低）
    speechSynthesis.speak(new SpeechSynthesisUtterance(text))
    return
  }
  // 微信等不支持的浏览器，调后端 TTS
  new Audio(`/api/tts?text=${text}&lang=${lang}`).play()
}

这个方案的好处：

Safari/Chrome 用户：零延迟，直接用浏览器语音
微信用户：后端生成音频，体验稍有延迟但完全可用
音频有缓存：同一个句子只生成一次，后续直接返回缓存

3.4 第四个坑：Element Plus 按钮在微信里点击延迟

<el-button> 在微信浏览器里有 300ms 点击延迟，改用原生 <button> 后立即解决。

html 复制代码

<!-- ❌ 微信里有延迟 -->
<el-button @click="playAudio">播放</el-button>

<!-- ✅ 原生按钮，响应即时 -->
<button @click="playAudio">🔊 播放</button>

3.5 第五个坑：iOS 自动缩放

iOS 上点击 input 时页面会自动缩放，加入 font-size: 16px 后解决：

css 复制代码

.hidden-input {
  font-size: 16px;  /* iOS 不会对 >= 16px 的 input 缩放 */
}

四、核心功能设计

4.1 填空式练习

不同于选择题，填空式练习要求你真正记住单词的拼写：

复制代码

中文：她每天早上六点起床。
英文：She ___ ___ at six o'clock every morning.
         ↑    ↑
       gets  up

每个单词独立一个槽位，输入空格自动跳到下一个，Backspace 自动回到上一个，体验和写文档一样流畅。

4.2 智能提示系统

提示不只是「显示答案」，而是一个渐进式引导：

第一次点提示：显示第 1 个单词（橙色占位）
第二次点提示：自动填入第 1 个单词，显示第 2 个单词
依次类推：已提示的单词自动填入，不重复扣分

javascript 复制代码

const getHint = async () => {
  // 先把已提示但未填写的自动填入
  for (const [idx, word] of hintWords.value) {
    if (!words.value[idx].value.trim()) {
      words.value[idx].value = word
    }
  }
  // 再提示下一个...
}

4.3 连击加分系统

连续答对题目，分数递增：

复制代码

第 1 题答对：10 + 0 = 10 分
第 2 题答对：10 + 1 = 11 分
第 3 题答对：10 + 2 = 12 分
...
第 10 题答对：10 + 10 = 20 分（上限）

这个设计让刷题有了「打连击」的爽感，不知不觉就多做了好几道题。

📸 【插入图片：答对后撒花动画 + 分数变化截图】

4.4 580+ 道真题

题目来自四六级、考研真题，按难度分三级：

难度	示例
简单	I like apples.
中等	She has been working here for three years.
困难	Not until he graduated from college did he realize how important time management is.

五、整体架构

前后端分离，JWT 无状态认证，Nginx 文根隔离（一台服务器跑多个项目）。

六、一键部署

bash 复制代码

node deploy.js   # 自动构建 + SSH 上传 + 重启服务

脚本会自动：

构建前端 npm run build
构建后端 mvn package
SSH 上传到服务器
安装 edge-tts 依赖
重启 systemd 服务

七、总结

亮点	说明
📱 手机即用	浏览器打开就能练，不用下载 App
💬 微信兼容	微信内置浏览器完美运行，语音也能播
🔊 双引擎语音	浏览器原生 + Edge TTS 降级，全平台覆盖
🎯 填空式练习	比选择题更接近真实考试
💡 智能提示	已提示单词自动填入，不重复扣分
📊 连击系统	连续答对分数递增，越刷越上瘾
⚡ 一键部署	自动构建 + 上传 + 重启

这个项目最适合这些人：

想利用碎片时间学英语的上班族
备考四六级/考研的学生
想练全栈项目的开发者
想了解移动端适配踩坑的前端工程师

八、获取源码

本仓库为精简版，完整源码（含 580+ 题目数据、部署配置、Nginx 配置）请通过 Gitee 仓库获取。

Gitee 仓库：https://gitee.com/fly-chen1/english-learner

📌 欢迎 Star ⭐ / Fork 🍴，有问题在 Issues 提问，作者会及时回复。

写在最后

做这个项目最大的收获不是技术，而是真正理解了用户场景。

一开始我只想着「功能做出来就行」，但真正用手机打开测试的时候，才发现各种问题：键盘弹不出来、删除键不灵、微信没声音、按钮点不动...

每一个「手机端兼容」问题的背后，都是一个真实的用户在手机上遇到的糟心体验。把这些问题一个个解决掉，才是一个真正能用的产品。

如果这篇文章对你有帮助，欢迎点赞 + 收藏 + 关注，后续会分享更多实战项目。