夜雨聆风但网页工具有个硬伤：得打开电脑，或者在手机浏览器里输入一长串地址才能用。对于小孩来说，这个门槛还是高了。
今天心血来潮：要不直接做成微信小程序？
说干就干。想体验可以直接点下面这个···
先说说这个东西到底能干啥，免得后面说技术的时候你一头雾水。
一共四个模块。
录入：手动添加单词，填英文、中文释义，词性和例句选填。也可以批量导入，每行一个，用竖线隔开就行——apple | 苹果 | n. | An apple a day，粘贴进去一次性导几十个。导完的单词存在本地，支持搜索，每个单词旁边有个喇叭按钮，点一下有道TTS直接读出来。还有个比较实用的设计：连续看释义答对10次、听音答对10次，系统自动标记为"已掌握"，之后测试就不出现了。
练习：就是翻转卡片。正面英文，点一下翻过去看中文。切到下一张会自动播放发音。还有个连续播放模式——按下去之后，自动播单词、播例句、翻转显示释义、2.5秒后切下一个，全程不用动手。适合放在桌上当背景音磨耳朵。另外支持打乱顺序，防止孩子按顺序背变成记位置。
拼写：两种模式——看释义拼写，或者听音拼写。听音模式进入新题自动播放发音，看释义模式也会自动读一遍。答完即时反馈对错，自动追踪掌握度。测完有统计：正确率、用时、错题列表。还支持只练错题本里的单词。历史记录保留最近50次。
错题本：拼写答错的单词自动进来，记错误次数。连续答对3次（可以自己调，1到10次都行）自动移除。也可以手动清理，或者一键跳转重练。
所有数据都存在微信本地，不需要登录，不需要联网——除了发音要请求有道TTS。
功能说完了，聊聊怎么从网页版变成小程序的。
技术选型没纠结太久。Trae——字节的AI编程工具，加上微信官方的开发者工具，两个配合着用。Trae写代码，微信开发者工具预览调试。
有人可能会问：你自己不会直接写小程序代码吗？
会，但太慢了。以前写一个小程序页面，从wxml到wxss到js，少说也得个把小时。现在用Trae，我把原来的HTML代码丢给它，跟它说"把这个转成微信小程序的格式"，它刷刷刷就给你转好了。
当然也不是百分之百完美，有些细节还得调。但整体框架、数据层、页面结构，AI基本帮你搞定了。你要做的就是跑起来，看哪里不对，告诉它哪里不对，它再改。
这个过程有点像带实习生——你不用自己写每一行代码，但你得知道什么是对的，什么是错的。
具体说说转换过程中遇到的几个问题。
第一个，存储方式不一样。
网页版用的是浏览器的localStorage，数据存在浏览器里。小程序没有localStorage，得用微信的wx.setStorageSync。这个改动不大，但涉及的地方不少——单词库、掌握度、错题本、测试历史，四块数据各自独立存储，所有读写的地方都得换。
我跟Trae说了一声，它就把所有localStorage操作换成了wx.setStorageSync，包括JSON.parse那些也都帮你处理好了。四个数据模块一个没落下。
第二个，发音方案得换。
网页版用的是浏览器自带的SpeechSynthesis API，一行代码就能让浏览器朗读英文单词。但小程序环境里没有这个API。
研究了一下，改用有道TTS接口。在小程序里通过请求有道的翻译服务获取发音，音质比浏览器自带的好不少，跟录入模块里的发音用的同一套方案。
Trae帮我把原来网页版的speak函数整个重构成了小程序的调用方式，包括回调处理和错误兜底。听音拼写模式进入新题自动播放、练习卡片切换自动朗读，这些逻辑也都帮我平移过来了。
第三个，页面结构要重新组织。
网页版是四个Tab在同一个页面上切换。小程序更自然的方式是用底部tabBar导航到四个独立页面。
这个改造量稍大——要把原来一个页面里的四个面板拆成四个独立页面，每个页面有自己的wxml、wxss、js。录入页的批量导入弹窗、练习页的连续播放状态、拼写页的两种模式切换、错题本的设置项，每个都要单独处理。
我跟Trae说了下思路，它给了个拆分方案，我确认没问题就动手了。四个页面大概二十分钟全部转完。
第四个，样式适配。
网页版的CSS不能直接搬到小程序里，得转成wxss。大部分属性通用，但有些选择器、伪类在小程序里不支持。还有rpx这个单位，得把原来的px换算一下。
练习页那个翻转卡片的3D动画、拼写页的大字体居中布局、错题本的进度条——这些样式转换的时候都得注意。不过AI干这种活确实利索，转完稍微调调间距和字号就差不多了。
整个过程大概花了两个多小时。
如果纯手工写，怎么也得大半天。不是不会写，是重复性的转换工作太耗时间。把px换成rpx、把localStorage换成wx.setStorageSync、把DOM操作换成setData——这些事没有技术含量，但一件件做真的很磨人。
AI最擅长的就是干这种活。你告诉它规则，它执行得又快又准。你只需要把关方向和质量就行。
做完之后在手机上试了一下，体验比网页版好不少。
点开就能用，不用输网址。底部四个Tab切换很顺滑。发音点一下就有声音。翻转卡片在手机上滑起来比网页版流畅——毕竟小程序是原生渲染，网页版还得过一层浏览器。
连续播放模式特别好用，孩子把手机往桌上一放，自动播单词播例句，自己该干嘛干嘛，磨耳朵神器。
数据存在本地，关掉小程序再打开还在，不用重新加载。不用登录，不用注册，没有广告——这三点是我做这个工具的核心原则。
孩子拿到手就开始了，都不用我教。
回过头想想，这次从网页版到小程序的迁移，本质上是一次"平台适配"。代码逻辑几乎没变，变的是运行环境和交互方式。
这类工作特别适合AI来做。因为规则明确、转换路径清晰、不需要太多创造性判断。你只需要把原始代码喂给AI，告诉它目标平台是什么，它就能帮你完成大部分工作。
但有一点很重要——你得能看懂它写的东西。
不是说你要逐行审查，而是你得有能力判断它生成的代码是不是合理的。比如它用了个你不认识的API，你得会去查一下这个API是不是靠谱。比如它写的样式在某个机型上显示不对，你得能看出问题在哪。
AI是工具，不是替代品。用AI写代码的前提是，你自己得懂代码。
不然它给你挖个坑，你都不知道。
下一步打算加点功能。比如支持多个单词本——现在所有单词都在一个池子里，语文英语混在一起不太方便。再加个导出功能，方便把单词表备份出来。
这些功能实现起来不难，等孩子用一阵子看看还有什么需求再说。
我是老傅，一个在AI时代还在努力学习的老程序员。关注我，带你看懂那些正在改变我们生活的技术变化。如果觉得有用，转发给你身边需要的人。
