分享一个给小朋友写的 拼音 小程序，以及开发日志

[SolidZORO]

开发这个小程序的初衷是想要一个可「同屏显示声、韵母」的工具，但市面上还真找不到，所以只好自己写写看。算第一次写小程序，怕坑用上了 Taro 框架，几天使用下来开发体验非常满意，感谢 O2 团队。另外就是开发过程中 80% 的时间其实都是在做非编程的事，看来 DevOps 还真是未来趋势。

PS：其实这个项目本来应该开源的，但是开发过程中，我找了很多小程序来参考，发现小程序 Store 中充满了大量除了 icon 外完全一样的小程序。这些小程序多数质量低下且满屏广告，有个别比较优秀的小程序也出现了很多这种山寨版本，所以我还蛮担心开源后被人这样价格广告就上架，所以开源计划就先推迟了，择日再开源吧，下面是开发时每天写的开发日志，分享一下。

2019-09-18

初始化项目，开发框架没用小程序原生，而是选了可跨平台的 Taro，这样一套代码可以同时编译到小程序和 H5。不过因为 H5 上是点击后加载音频文件， 会有延迟，且不好离线使用。 为了做到多端通用且有较好的效果，我认为最好的方案是把音频文件 base64 压成一个 js 文件。但由于第一版发布前我想先优化小程序端，H5 版本可以先放一放，如果到时候写完，我会部署一份到 now.sh 上。

2019-09-21

在搭好脚手架后，已有几天没过来写代码了。今天主要处理拼音语音部分，本来想用 Siri 念出所有拼音读音然后提取使用，这样不会有版权问题。但无奈 Siri 无法单独发出 ong、ing 这种音。后来我还是找了一个无版权视频，用 AU 提取了所有拼音读音。不过我感觉声音部分还是不够好，待寻找更清晰更标准的方案。

2019-09-23

在处理图片的时候，我发现如果图片全用 jpg 或 png，即便每张 50K，40 张加起来就是 2M，已突破小程序的限制。 所以留给我的方案只能是 svg，这样每张图片控制在 20K 内还是很轻松的，而且完美缩放。不过 svg 资源没有图片丰富，特别是无版权的 svg，很多拼音字母愣是找不到对应的 svg，只好自己多花一些时间用 AI 画咯（哭）。

2019-09-24

为项目工程起开发代号不复杂，这个小程序开发代号叫 little-dose-pinyin，但为上架起名就很难了。我不大可能直接把开发代号直译成中文「小剂量拼音」发布，因为这比较奇怪……虽然比较酷，但小剂量读音容易被误认为小伎俩，让人感觉不是特别正面。所以想啊想，叫什么呢？翻看了一下「代码大全」，想到了一堆不靠谱的比如尾递归拼音、拼音溢出、拼音表达式这种过于荒诞的词汇……然后到小程序审核平台找了下，有部分还过不了验证，说不是常用词（泪）。所以只能往比较大众化的方向去想了，比如 拼音 GO、拼音 PRO、拼音点读、这种路人甲命名方案，写这个时候还不确定到底用什么名字，再说拉，反正之后有几次机会改名，先上架用起来。

今天除了起名，还做了一个测试功能，学完拼音之后就是测试嘛。为了测试功能，我又做了历史记录功能。 这样便可以知道每次测试的成绩，这个功能其实是给家长用的，完全可以做到暗中观察小朋友的测试成绩 hhhhh，所以入口放在不起眼的右下角，而且故意不加「清除」功能，就怕小朋友测试完后把不好的成绩清掉。 当然这个功能其实我也想过加一个比较难的数学题，做对了才可以点击清除，但后来想想没什么必要，存着那几个字符串也花不了多少空间。

2019-09-25

上架前夕用安卓手机测了一下，发现测试页面无法发音，debug 发现原来是 array 不支持 flat()，想来也对，flat() 比较新，在较老的浏览器上无法实现。这里顺便说一个坑，小程序开发者工具其实是无法完全模拟真机场景的，一定要真机跑过才行，如果我没有安卓手机那估计要坑了一片用户。那么问题来了，我现在要让 array flat() 全平台兼容，但是又不拉一个 lodash 过来，自己写虽然几行代码，但为符合 DRY 原则，找来 array-flat-polyfill 直接用上，看了源码，真的就几行，reduce 用得很精妙。

项目 Repo Public 啦： https://github.com/SolidZORO/little-dose-pinyin

[berumotto]

ui 挺好看的

[airyland]

可以拿来提高我的拼音水平了

[haiyang416]

只得了 76 的路过，老是根据英文的发音去按。
工具挺好的，支持一下。

[Daming]

我闺女通过宝宝巴士学拼音，说实话，你这个没有小孩喜欢，没法寓教于乐。

[q8515620]

很不错，赞

有几点问题
1. y=i, w=u, ü=yu, 这三个发音应该是一样的才对（在测试时，可使用提示“声母 /韵母”加以区分）

2. 有些双韵母确实不好找到完全一样的发音的汉字，但我觉得没必要硬凑，很容易造成误导，比如这些：
ui≠喂(wei)，建议：hui(灰)/zui/tui 等等
iu≠邮(you)，建议：jiu(九)/qiu/xiu/liu 等等
un≠蚊(wen)，建议：cun(村)/hun/sun/tun 等等

3. bug：
w 的文字错了吧？“屋”？
eng、ong 漏了汉字了吧？

[qiayue]

建议一个群，来分享比拼测试结果，感兴趣的进
另外诚挚邀请楼主进

[SolidZORO]

@haiyang416 作为一个南方人，我在测试的时候也不一定能拿满分 hhhh。


@Daming 你说的没错，小孩子是不会喜欢用这个学拼音的。这个其实更像是字典，偏向学过拼音的但写作业的时候记不起来，然后点一下做个 double check，所以把所有拼音放在一屏上。


@q8515620 非常非常感谢你意见，相信你一定是个非常棒的测试工程师（笑）。这些问题都提到了点子上，对于问题 3 的 eng 和 ong，我确实找不到替代汉字上去，这个我再想想。嗯，在下一个版本里，我会一一实现并修复你说的这些 issues，再次感谢。🙏

[keleba8]

在哪里下载呢