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

这里是「晓组织」的第 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。

多谢大家阅读完!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-06-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

微信小程序 6 大新能力全面解读!附个人开发者注册教程

微信小程序在 3 月 27 日晚 10 点突然爆出大新闻。微信为小程序开放了 6 大新能力,在知晓程序的这篇文章中,你将看到小程序 6 大新能力的最靠谱解读。

1133
来自专栏知晓程序

开发 | 适用场景广,表单收集类小程序开发案例复盘(上)

今天我将以「北江纺织牛仔新时尚」小程序为例,复盘一个服装行业订单收集小程序从设计到实现的全过程。这是上篇,主要讲产品逻辑搭建和数据库设计的过程。

1333
来自专栏互联网数据官iCDO

【经典文章】运营优化的秘密武器:重新认识热图的力量!

主编注:这篇文章获得业内很高的关注。是宋星老师的另一篇讲述如何优化网站页面尤其是着陆页的经典文章。 引言   之前发布的文章:《优化高跳出率着陆...

3314
来自专栏无原型不设计

UX术语详解:任务流,用户流,流程图以及其它全新术语

? 用户体验拥有一长串专业的术语和可交付内容。当在线查看UX相关职位描述时,所罗列的这类术语更是全面繁多。而且,随着时间的流逝和它们自身的不断演变,其中很大一...

4045
来自专栏司想君

Google Web应用开发指南第一章:什么是Web应用?

很多人向我问起学习HTML5技术的权威入门资料,我总是毫不犹豫地推荐由Google推出的HTML5rocks,这个网站就像一个宝库,包含经 典的教程、文章、De...

3117
来自专栏13blog.site

Spring+SpringMVC+MyBatis+easyUI整合优化篇(三)代码测试

前言 看到标题你可能会问为什么这一篇会谈到代码测试,不是说代码优化么?前两篇主要是讲了程序的输出及Log4j的使用,Log能够帮助我们进行bug的定位,优化开发...

27810
来自专栏无原型不设计

UX术语详解:任务流,用户流,流程图以及其它全新术语

以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

1.9K11
来自专栏IT派

Python爱好者常用的11个站点 哪几个是你必看的?

学习一门编程语言,除了语法,最重要的是学习解决问题。很多时候单凭自己的能力确实无法做到完美解决,所以无论是搜索引擎、社区、文档还是博客,都是我们解决问题的利器。

1210
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–组件收费的委外加工(251)-4采购

4.3 ME59N创建采购订单 采购订单按照采购请求自动创建。 在供应商,物料主数据中,自动建立采购订单的复选框设置标识,以及创建货源清单与MRP相关。 ? ?...

3764
来自专栏ytkah

如何进行网站统计分析?分8步走!

数据分析是做sem非常重要的一个环节,做好网站统计数据分析可以为sem优化提供基础。很多人还是只停留在查看IP、PV、关键词阶段,在这里ytkah就和大家一起来...

3358

扫码关注云+社区

领取腾讯云代金券