让汉字笔顺APP 一夜成形，HarmonyOS 7 DevEco Code AI开发实录

我一直没做出来的汉字笔顺动画应用【柚兔学伴】终于上架了。

一、缘起：一个书法老父亲的心愿

孩子在学书法，每天练字前都要查笔顺。纸质字帖翻起来麻烦，网上的笔顺视频又没法想查哪个字就查哪个字。我一直想给他写一个 App：输入一个字，就能看到这个字的笔画是怎么一笔一笔写出来的。

想法很简单，但我不是专业移动端开发者。汉字笔画动画怎么实现？语音识别怎么接？数据怎么存？一想到这些问题，这个念头就在心里搁置了大半年。

直到 HarmonyOS 7.0 发布，DevEco Code 的 AI 助手也来了。我抱着试试看的心态，把这个心愿完整地描述了一遍——没想到，从第一行代码到跑在模拟器上的完整 App，我几乎没有写过一行代码。

二、DevEco Code 最打动我的：我只负责"提需求"和"验收"

以前也试过一些 AI 编程工具，体验大多是"你问一句，它贴一段代码"，编译、运行、调试还得自己来。DevEco Code 完全不是这个路数，它是一个能自己干活的工程师。

1. 自动建任务，需求直接变任务清单

我把"想给孩子做个汉字笔顺动画 App"丢给它之后，它没有直接闷头写代码，而是先做了一轮需求分析：确认要支持哪些功能、面向什么用户（孩子自己要能用）、要不要云同步，然后生成架构设计和一份拆解到文件粒度的任务清单。整个过程就像和一个真人对齐需求，每一步都停下来等我确认。

2. 自动编译，自动跑模拟器，坐等验收

任务确认后，它就开始自动写代码，写完自动编译，编译通过后自动安装到模拟器并启动，然后自己去逐页验证界面渲染是否正常。我要做的只有一件事：看一眼模拟器，说"这里不对"或者"可以，继续"。

中间我印象最深的一次，是它改完一个页面后自动重新构建、重装、重新打开模拟器，前后只花了一分多钟。这种"我提意见 → 它改 → 自动跑起来给我看"的循环，让整个开发过程的体感非常顺滑。

3. 顺手提一句：DevEco Code 是免费的

对个人开发者来说这一点很实在，正版、免费、官方维护，不用在工具上花一分钱。

三、核心功能：孩子自己就能用

1. 汉字笔顺动画

App 内置了覆盖 9000+ 常用字的笔画数据库，输入任意汉字，立刻播放逐笔书写动画，每一笔的起笔、行笔、收笔都清清楚楚，还可以反复重播。孩子练字前自己点开看两遍，比我在旁边比划管用多了。

2. 语音查字：说出"天空的天"就够了

这是我觉得最"HarmonyOS"的功能。孩子有时候不会打字，但一定会说话。点击语音按钮，说一句"天空的天"，App 调用 HarmonyOS 智慧语音服务套件 CoreSpeechKit 中的语音识别能力（speechRecognizer），自动从口语中提取出要查的"天"字，直接加载笔顺动画。

对刚学书法、识字量有限的孩子来说，"开口就能查"让这个 App 变成了他可以独立使用的工具——这也是我最初最大的愿望。

3. 释义和组词，还能读给孩子听

查字页面下方有这个字的释义和常用组词，孩子点一下组词，App 会调用 CoreSpeechKit 中的文本转语音能力（textToSpeech）朗读出来。同一个 Kit 覆盖了"听"和"说"两端，接进来就是调系统服务，不用额外集成第三方 SDK，离线场景也有保障。查一个字，顺带认识一组词，练字和识字互相促进。这个功能也是 AI 助手根据"使用者是孩子"这个场景主动建议的。

4. AI 建议的加分项：字帖生成

做到一半的时候，AI 助手提示我：既然有笔画数据库，为什么不加一个"生成字帖"的功能？于是有了现在的字帖模块——同样支持语音输入一段话，App 自动提取其中的汉字生成字帖，单字可以替换、添加、删除，最后一键导出成 PDF（项目里甚至手写了一个轻量 PDF 生成器，把矢量笔画直接排进 A4 页面），打印出来就是一份描红字帖。

5. 华为端云一体化：记录永不丢失

查字记录和字帖记录全部通过华为端云一体化的云数据库同步到云端，配合华为账号登录，换设备、卸载重装，孩子的学习记录都不会丢。后端服务器、数据库运维全部由云端托管，而且数据按用户隔离，每个人只能看到自己的记录。

四、技术拆解：笔顺动画到底是怎么实现的

这是我最开始觉得"完全不知道怎么做"的部分，也是被 AI 解决得最漂亮的部分。写出来给有同样需求的朋友参考，思路其实非常清晰。

1. 数据：现成的开源笔画库，不用自己描一个字

笔顺动画的前提是每个字每一笔的矢量数据。业界有个知名的开源笔画数据集（makemeahanzi 项目），覆盖 9000+ 常用字，每个字提供两份数据：

• strokes：每一笔的轮廓路径（SVG path 指令，M/L/C/Q/Z 贝塞尔曲线），描述这一笔的形状；

• medians：每一笔的中心线点集，描述这一笔的书写轨迹。

有了"形状 + 轨迹"两份数据，"按笔顺把字写出来"就有了完整的数学基础。App 把这个库放进本地资源，离线全量可用。

2. 坐标系：先翻个面

这个数据集用的是数学坐标系（y 轴向上，0~1024 的归一化空间），而屏幕坐标 y 轴向下。所以渲染前要做一步坐标变换（y' = 1024 - y），再根据整字的包围盒做等比缩放和居中平移，让任何字在画布里都自动铺满、不变形。

3. 动画：裁剪 + 中心线渐进揭示

核心渲染用的是 ArkUI 的 Canvas。单笔动画的思路很巧：

1. 先把当前笔的轮廓路径设为裁剪区域（clip）——画笔只允许在这一笔的形状内部作画；

2. 沿着中心线以动画进度渐进绘制一条粗线（进度 = 0 → 1，按点集累计长度截断）；

3. 两者叠加的视觉效果就是：笔尖沿着书写轨迹前进，笔迹只在这一笔的轮廓内"生长"出来，和真人写字的运笔过程一致；

4. 一笔完成，整笔填充定色，切下一笔循环。

配一个每帧推进进度的动画循环，逐笔串起来，就是行云流水的笔顺演示。播放、暂停、重播都只是对这个进度状态的控制。

4. 一份数据，两处复用

同一套笔画路径，在查字页走 Canvas 动态动画，在字帖页走静态 Path 矢量渲染（直接进 PDF），打印出来无论放大多少倍都是锐利的。数据一份、视图两用，这也是 AI 助手在架构设计阶段就规划好的。

五、一笔时间账：手搓 vs DevEco Code AI

以笔顺动画这个单项为例，如果我自己从零实现：

• 找到并理解 makemeahanzi 数据集的格式（strokes/medians、y 轴向上的坐标系）：1~2 天；

• 坐标变换、包围盒适配、Canvas 裁剪动画一步步调到顺滑：熟手 2~3 天，像我这样的非专业开发者，一周都未必能调到能看的程度；

• 这还没算 ASR/TTS 集成、字帖 PDF 导出、端云同步、多主题深色模式这些"周边"。

一个有经验的 HarmonyOS 开发者把整个 App 做到这个完成度，保守估计 2~3 周。而我——一个从没写过 ArkTS 的人，是在一个周末从零跑通核心功能的。 笔顺动画从"我描述清楚需求"到"在模拟器上看到'天'字一笔一笔写出来"，AI 助手连同写码、编译、装机、验证只用了几十分钟。剩下的时间都花在了我真正该做的事上：提需求、提意见、验收。

这就是 DevEco Code 最大的价值——它消灭的不是代码，而是从"想法"到"能跑"之间那段最劝退的路。

六、那些让质感瞬间提升的 HarmonyOS 7.0 特性

除了核心功能，AI 助手还帮我用上了好几个 HarmonyOS 7.0 的系统能力，都是容易被忽略、但用上之后体验明显不同的细节：

• 沉浸光感：界面从状态栏一直延伸到底部，内容与系统栏自然融合，全屏观感非常干净；

• 深色模式自动适配：晚上孩子用平板练字时界面自动切换成深色，不刺眼；

• 多套主题色一键切换：内置四套配色主题，一键切换整个 App 的视觉风格，孩子自己就挑得不亦乐乎；

• 系统级动效：卡片弹入、页面转场都用了系统动画曲线，流畅跟手。

这些能力没有一个是我"实现"的——我只是在对需求的时候说了句"想要好看的、跟手的感觉"，剩下的都是 AI 助手基于 HarmonyOS 的系统特性完成的。

 

七、写在最后

从"想给孩子写个笔顺 App"到孩子真的在用自己的声音查字、跟读、打印字帖，这个过程里我最大的感受是：开发门槛被 DevEco Code 大幅拉低了。

• 需求分析、架构设计、任务拆解：AI 自动完成，我负责拍板；

• 写代码、编译、装模拟器、验证界面：AI 自动完成，我负责验收；

• 语音识别、文本转语音、云数据库、深色模式这些系统能力：AI 直接调用 HarmonyOS 7.0 的官方 Kit（CoreSpeechKit、Cloud Foundation Kit……），不用自己造轮子；

• 工具本身：免费。

如果你也有一个"心里搁置了很久的小心愿"，也许现在就是动手的最好时机——你只需要把它清楚地描述出来。

柚兔学伴已经上架到应用市场，欢迎下载体验！