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

开发这个小程序的初衷是想要一个可「同屏显示声、韵母」的工具，但市面上还真找不到，所以只好自己写写看。算第一次写小程序，怕坑用上了 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 用得很精妙。