Skip to content
Learning pinyin (拼音) alphabet wechat-miniprogram, use Taro.js to build.
TypeScript CSS JavaScript HTML Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
serverless/now
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.huskyrc.js
.lintstagedrc.js
.prettierignore
.prettierrc
.stylelintignore
.stylelintrc.js
LICENSE
README.md
deploy-now.sh
deploy.sh
global.d.ts
package.json
project.config.json
tsconfig.base.json
tsconfig.json
yarn.lock

README.md

拼音 PRO

小程序码

gh_365ab9eb1245_258

主要页面截图

all

ABOUT

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

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

DEVLOG

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 用得很精妙。

You can’t perform that action at this time.