Time酱:100小时熬成的微信小程序

avatar
技术支持 @LeanCloud

文/nickyhu
本文试图回答这些问题:

  • 作为个人开发者或创业小队,该选择哪类产品试手小程序?
  • 微信小程序的开发是一种怎样的体验?
  • 开发和维护一款微信小程序的成本是多少?
  • 一个想法是如何一步步变成一个小程序的?

从 12 月 22 日开始,我利用业余时间,陆续投入 100 小时,一人单枪匹马完成了一款微信小程序。整个过程混杂着产品构思,交互设计,UI 调校,数据结构设计,代码编写。总体而言,微信小程序不论是学习门槛,还是开发维护成本,相比 app 原生开发,都低很多,一次开发,覆盖所有微信用户,挺适合小工具和早期产品试错。

产品构思

之前写过一篇对小程序的预测《小程序,微信的自我残化》,其中提到「小程序能帮助微信群成员更深度互动」,对于个人开发者或创业小队而言,如果没有独到的可持续的结构化信息,没有连接线上线下的商务服务能力,开发一款小工具可能是一个不错的选(huan)择(xiang)。

对于工具而言,有一个传统的分类「效率类」,下面有一大堆时间管理和目标管理的 app 应用。

传统的时间管理和目标管理应用,比如 Clear,倒数日,番茄时钟,omnifocus 都是单人模式,是自己对时间和目标的管理与提醒,本质是备忘工具。

然而,时间的感知维度是丰富的,除我之外,每个参与者都有不一样的视角。有些场景,有好友一起参与,才能坚持更久,更值得回顾和珍惜。兄弟陪你每天晨跑,闺蜜与你一起减肥,和学霸男友一起过四六级,一家人 10 天的出国旅行,每一次目标的达成,都是一段与时间为友的美好体验。

因此,如果能把大家的投入,回忆,心得在一个目标下聚合起来,彼此心照「而」宣,对目标的达成会更有帮助,让坚持更多一点趣味。

所以,我决定实现这样一个小工具,她是一款能让时间和目标管理更有趣的小程序,帮你摆脱朋友圈的时间黑洞。在看完一集 papi 酱的逗逼视频后,我脑洞一开,不如就叫「Time酱」。

不用繁琐的设置,不用耗时的下载,新用户只需打开微信,直接搜索「time酱」,就能立即免费添加「小目标」,每天与好友一起记录目标的进展,回顾目标里程碑。

产品实现

有了 idea 之后,不急着做产品原型,建议先仔细阅读《微信小程序设计指南》,核心是不要干扰用户,保持简洁优雅,隐含的意思是用你的产品和服务来征服用户,而不是靠营销来广告用户。WeUI 是一套小巧的交互框架,所有要素,微信已经高频地教育过 8 亿多用户,我们直接拿来主义就好。

我是一边看着 WeUI,一边想功能,交互和视觉,一边直接写代码实现,所以下面简单说说技术选型和开发过程。

开发工具首选微信官方的,整合了项目配置,编码,预览,调试,打包和发布的全流程,大约花 2 小时熟悉之后,有点不相信,屏这个和 chrome 调试类似的小工具就能搞出 app 原生的交互体验?

对小程序新语法的熟悉,如果你有 vue 或 react 的基础,那学习门槛几乎为 0,分分钟上手,我前前后后大约花了 8 小时基本掌握了小程序的语法和开发规则。

小程序开发框架满足了用户前端交互,后端数据和服务器还是要自己搞定,这个时候,给大家隆重推荐一款利器 Leancloud(查看 小程序 SDK 文档入口),它能让你专注在前端交互上,后端的数据结构,接口服务,并发负载,实时通讯能力都能帮你全套搞定。如果没有 Leancloud,可能我还要多花 100 小时在后端的处理上,或者需要组队一名后端程序员来一起开发。有了 Leancloud,可以更自由更独立的发挥。有了它,后端处理大约花了 10 个小时。

剩下的 50 个小时,用在具体功能开发和联调测试中。下面具体介绍一下「time酱」的产品功能。

产品介绍

1、添加目标,并与好友共享

这里已经准备好一些目标可供选择,当然,你也可以直接输入目标。


然后,你可以进一步完善目标信息:

添加成功后,就会看到目标详情页

此时,点击右上角的「…」,就能显示分享入口,分享给微信好友,加入目标。

2、与好友一起添加进展

不仅可以记录时间,还能添加照片和文字

3、进展统计

随着进展的累积,可以按天按周按月统计投入的时间,还能看到图文明细。


好了,第一版的「time酱」就先介绍到这里,希望你会喜欢。

不用繁琐的设置,不用耗时的下载,新用户只需打开微信,直接搜索「time酱」,就能立即免费添加「小目标」,每天与好友一起记录目标的进展,回顾目标里程碑。