这个程序员爸爸,专门做了款小程序,教会小孩认字 | 晓组织 #9

小程序

2017-06-28 12:02

知晓程序注:

「晓组织」是知晓程序推出的全新栏目。

每周,我们都会邀请优秀的小程序开发者,从产品/开发/运营等角度,分享他的小程序实战经验。如果你想成为「晓组织」的一员,请发送邮件至 [email protected] 给我们投稿,献上你的投名状。


这里是「晓组织」的第 9 期。

本期的分享嘉宾是看图识字的开发者朱信勇。

大家好,我叫朱信勇,是一名前端工程师,现就职于爱屋吉屋,生活在上海。

由于一次学校的网页比赛误入前端行业,现一直从事前端方面的工作。这次非常意外又惊喜的收到知晓程序(微信号 zxcx0101)的邀请,来说一说我的第一款小程序「看图识字」背后的一些事。

「看图识字」小程序使用链接
https://minapp.com/miniapp/2859/

为孩子做一款小程序

其实这款「看图识字」小程序功能很简单:主要是帮助幼儿和小学生识字、辨物,并附带发音的功能。

做这个软件的原因很简单:为了给出生的小孩做个东西留下纪念,同时亲戚朋友也有需要的。

为了解决这些需求,做看图识字这个想法就诞生了。

有了想法就要落实,第一个就要考虑以什么来承载看图识字这个软件,我主要从以下三个方面来分析:

  • 开发成本:毕竟是一个人在战斗。
  • 获客成本:没有钱去推广、运营。
  • 数据监测:为了满足我的好奇心。

因为我是一名前端开发人员,上手微信小程序开发相对较快,同时依托微信的平台分享、传播容易一些。

同时,小程序是不需要安装和卸载的,获客成本基本为零,而 app 的成本在 2-6 块钱(数据可能不准),数据监测小程序有自己的一套。

从以上可以看出,小程序很适合作为看图识字的载体。

千方百计找内容

整个小程序技术方面还是很简单的,基本都是用的基础组件,面向文档开发没有特别定制。

甚至我的小程序没有后端服务,图片资源存储在腾讯云,开发工具用的是 Visual Studio Code 和微信开发者工具。

相较于技术,作为一个内容类产品(网站、app、小程序、桌面应用等),内容的来源这个问题更让我头疼。

为了解决内容问题,我用了「一个想法两种途径」。

1. 想法:找人画或者自己学 Sketch 画

如果要是按照这个想法做,不管是找设计老司机还是我自己搞,估计这个小程序还没上线。

如果一个东西拖的太久,慢慢的就失去了做下去的动力,所以我就放弃这个路子。

2. 途径:网上资源

另辟蹊径,既然不能重头开始画,那肯定得找现成的,最后就找到一个水果系列的共 25 张,我就开始一张一张的右键查看地址下载,等我下载几张后,发现很机械。

临时找了一个 python 爬虫教程写了一个简易的爬虫下载完了图片。

估计手动下载最多 5 分钟,可是写爬虫用了半小时😭😭😭。

关注「知晓程序」公众号,微信后台回复「爬虫」,免费获取爬虫开源链接。

3. 途径:万能的淘宝

虽然看图识字在爬了两个系列之后,就匆匆上线了。

可是用了一两天,发现图片实在是太渣,然后我就到万能的淘宝去寻觅,最后在和卖家的讨论(撕逼)下,把电子版的图片发我了(有可能侵权),然后就加入新的系列更新了一版,图片的质量好多了。

(注:有没有设计师愿意一起维护这个小程序,欢迎加入 I need you!)

而在第二版本中,我加入了语音功能,当时我的想法是搜一下网上有没有现成的 API 直接调用一下,最后搜到一篇文章里面有个地址,直接复制到浏览器后顺利发音,出现了我想要的效果:

想避坑,多看文档

因为整个看图识字小程序很简单,用到的东西不多并没有太多的坑,这里简单列几个。

1. 页面上下回弹

就是在卡片页面 iOS 平台上图片左右滚动时,图片也会上下回弹。

刚开始用 css 方法解决没有成功,最后在文档里找到了解决方法:

只要在对应的 xxx.json 里面添加:{“disableScroll”:true},整个页面就像锁死一样不会上下回弹。

仔细看看文档还是可以少走弯路、节约好多时间的!

2. 转发功能

此功能还是同事问我:页面没有转发功能,如何推荐给朋友?

当时我说要回到小程序关于页面点击「推荐给朋友」,想想也是傻,如果分享功能做那么深,谁还有动力分享。

然后我又看了文档:


现在微信又增加了一个「页面内发起转发」,就是页面添加一个 button, 设置属性 open-type=”share”,可以在用户点击按钮后触发  Page.onShareAppMessage() 事件。

多多看文档,腰不疼,腿不抽,手不抖,代码还写的快了!

3. 上线

第一版本代码提交之后,我就开始等待什么时候能上线,第二天在地铁上收到微信团队的一个推送消息:看图识字小程序审核通过。

然后我就高兴的到小程序里面去搜!搜!搜!搜了半天也没搜到,问开发过小程序的同事怎么回事,他猜测可能是我输入的名字没有匹配,可是我输入的是全名不是模糊词。

回到家打开电脑才发现需要开发者手动点击上线!手动点击上线!手动点击上线!

😖😖😖

后续的开发计划

起初,这个小程序的用户就限定在我和家人朋友之间,并没太多的预期。

后来某天晚上我就到知晓商店 minapp.com发布了一下小程序,当时也只是为了玩玩也没抱太多希望。

果然没有希望就没有失望,看了用户累计数还是依旧惨淡。

5 月 11 日在朋友提醒下,才知道知晓程序(微信号 zxcx0101)推荐了我的看图识字小程序,看了下第 7 个果然就是我的,然后那天也就达到了各种访问数据的最高峰。

现在卡片的类别有点少,后面会慢慢丰富。同时也会把图片再进行压缩、加入缓存,减少一些用户的使用流量,加入一些新的交互方式和玩法。

通过这个小产品的上线,更加明白技术只是一个完整产品的一个小环节,是作为基础辅助。前期有产品的需求和目标用户的定位,后期还需要很好的运营和维护、优化,才能使产品慢慢完善。

最近小程序经常晚上发出一些新的功能,慢慢的使整个生态圈变的更好。

我后面估计也会开发一些别的小程序,如果有什么意见和想法想沟通、交流欢迎加微信:ghostcode。

多谢大家阅读完!

关注「知晓程序」微信公众号,在后台回复「晓组织」,查看更多有趣的小程序分享文章。

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

小程序商店 minapp.com,一扫即用的小程序大全。微信公众号「知晓程序」,做中国最好的小程序报道。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容