https://github.com/kunyashaw/razLearning
作为一个奶爸，看着孩子每天拿着平板想学英语，但市面上的RAZ App要么收费太贵，要么界面复杂不适合孩子使用。于是我决定自己动手，给孩子搭建一个专属的学习站点。
说实话，市面上的RAZ学习资源确实不少，但问题也很明显：
既然我是做技术的，为什么不给孩子量身定制一个呢？
孩子的积极性需要激励，设计了11个里程碑徽章：
每个徽章都有精美的3D动画效果，解锁时还有粒子特效，孩子特别喜欢！
孩子喜欢新鲜感，做了13套主题可以切换：
彩虹、森林、海洋、太空、糖果、动物、哪吒、敖丙、动物城、海绵、舒克、护眼、夜间
前端：Vue 3 + Vite + Tailwind CSS
状态管理：Pinia
PDF渲染：PDF.js
路由：Vue Router
构建产物：纯静态文件，可部署到任何Web服务器
选择Vue 3是因为响应式系统做得好，组件化开发效率高。Vite的构建速度快，开发体验好。
问题：PDF.js默认worker路径有问题，在平板浏览器上经常加载失败
解决：把pdf.worker.min.mjs单独抽出来放在public目录，手动指定worker路径
问题：iOS和Android的WebView默认禁止自动播放视频
解决：改成用户主动点击播放，同时加个友好的提示"点击播放视频"
问题：读完绘本后返回列表页，进度条还是显示0%
解决：问题出在bookService.js里初始数据都是completed: false，没有从bookStore读取真实状态。修复方案是让服务层实时检查存储状态：
const completed = bookStore.isBookCompleted(book.id, type, level)
问题：孩子读完后弹窗显示获得徽章，但找不到关闭按钮
解决历程：
问题：读完绘本后弹窗提示"阅读下一本"，点击没反应
原因：Vue Router在同一路径只改变query参数时不会重新渲染组件
解决：
watch(() => route.query, ...)loadBookData()里直接从route.query读取最新参数const { id } = route.query（只执行一次）问题：牛津树绘本没有单词数据，页面报错
解决：加个判断，牛津树绘本跳过单词加载，只支持RAZ的单词学习
问题：一开始设计了本地备份系统，结果逻辑越来越复杂，还容易出bug
解决：砍掉本地备份功能！只保留简单的数据导出/导入（JSON文件），简单又够用。
问题：孩子乱点屏幕不小心激活了开发者模式
解决：改成需要连续点击版本号10次才显示开关，并且默认关闭
孩子学习的动力来自可视化的进步：
// 学习数据存储结构
{
completedBooks: [], // 已完成绘本
studyHistory: [], // 学习历史记录
totalStudyTime: 0, // 累计学习时长（秒）
dailyStats: {}, // 按天统计
learnedWords: [], // 已学单词
unlockedRewards: [] // 已解锁徽章
}
所有数据都存在localStorage，不需要后端服务器，部署超简单。
# 资源
腾讯云1元买了1年的50g的bucket，上传音视频以及pdf资源到bucket中，获取可访问链接，注意在bucker的安全设置中要允许自己的域名来访问
# 之前架vpn的一台主机
安装配置nginx，上传生成的部署文件
# 之前有个阿里上的域名
设置下域名的解析规则，解析到上边的主机
# 直接访问
现在孩子每天的学习流程：
这次给孩子做学习站点的经历，让我深刻体会到：
技术还是要服务于生活。看着孩子每天主动要求"爸爸，我要读绘本"，那种成就感比工作中完成一个大项目还要满足。
简单够用就好。一开始想加很多功能，后来发现孩子需要的其实很简单：好看的界面+顺畅的阅读体验+及时的奖励反馈。
适合自己的才是最好的。市面上的产品再成熟，也不如自己定制的贴合实际需求。
如果你也是技术出身的父母，不妨也给孩子做一个专属的学习工具。这不仅是技术实践，更是一份特别的礼物 🎁
实际上本篇博客也是ai写的，工程中的实际代码我一行也没写
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。