V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
SolidZORO
V2EX  ›  分享创造

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

  •  
  •   SolidZORO ·
    SolidZORO · 2019-09-28 14:19:45 +08:00 · 2730 次点击
    这是一个创建于 1643 天前的主题,其中的信息可能已经有所发展或是发生改变。

    拼音 RRO little-dose-pinyin-qr-all-in-one

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

    第 1 条附言  ·  2019-10-12 16:28:58 +08:00
    8 条回复    2019-10-04 10:57:55 +08:00
    berumotto
        1
    berumotto  
       2019-09-28 14:25:28 +08:00
    ui 挺好看的
    airyland
        2
    airyland  
       2019-09-28 14:35:16 +08:00
    可以拿来提高我的拼音水平了
    haiyang416
        3
    haiyang416  
       2019-09-28 14:46:53 +08:00
    只得了 76 的路过,老是根据英文的发音去按。
    工具挺好的,支持一下。
    Daming
        4
    Daming  
       2019-09-28 15:29:27 +08:00 via Android
    我闺女通过宝宝巴士学拼音,说实话,你这个没有小孩喜欢,没法寓教于乐。
    q8515620
        5
    q8515620  
       2019-09-28 15:58:36 +08:00 via Android
    很不错,赞

    有几点问题
    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
        6
    qiayue  
       2019-09-28 16:03:00 +08:00
    建议一个群,来分享比拼测试结果,感兴趣的进
    另外诚挚邀请楼主进
    SolidZORO
        7
    SolidZORO  
    OP
       2019-09-28 16:09:08 +08:00
    @haiyang416 作为一个南方人,我在测试的时候也不一定能拿满分 hhhh。


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


    @q8515620 非常非常感谢你意见,相信你一定是个非常棒的测试工程师(笑)。这些问题都提到了点子上,对于问题 3 的 eng 和 ong,我确实找不到替代汉字上去,这个我再想想。嗯,在下一个版本里,我会一一实现并修复你说的这些 issues,再次感谢。🙏
    keleba8
        8
    keleba8  
       2019-10-04 10:57:55 +08:00
    在哪里下载呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   936 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:58 · PVG 04:58 · LAX 13:58 · JFK 16:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.