如何一天撸出一个完整的小程序

0 起因

随着各种工具/轮子越来越多，做程序员可以说是越来越潇洒，真真的吃着火锅唱着歌，闲了调调BUG。

今天要分享的是一套完整的带后台的小程序，完全从0开始，没有借助微擎等小程序生成框架。

1 成果

从第一天早上10点的Idea到第二天凌晨6点提交上架，除去做饭+吃喝拉撒，总共花费约16个小时。

注：经过十天审核，现在可以搜【一文一图】看下实际效果了。

复盘下来，觉得整个过程颇有代表性，故分享出来，供诸位拍砖。

小程序截图

2 工具清单

2.1 准备阶段

• 思维导图：幕布
• 小程序申请：微信公众平台

2.2 开发阶段

2.2.1 后台]

• 版本管理：码云
• 后台开发IDE：PHPStorm
• 后台框架：PHP + Laravel
• 数据库：MySQL
• 微信后台对接（Laravel插件）：EasyWechat
• 图片存储（Laravel插件）：Aliyun-oss-storage

2.2.2 小程序

• 小程序开发IDE：微信开发者工具
• 小程序：官方的文档、组件、API
• 瀑布流展示（小程序插件）：BrickLayout晓瀑布流

2.2.3 设计

• 图标：iconfont
• UI参考：WeUI小程序版
• 编辑：Photoshop

2.3 运维阶段

• 小程序助手
• 小程序数据助手
• 小程序客服小助手

3 开发过程

3.1 从Idea到动手

吃够了不经调研的动手开搞带来的苦头，近几年对于Idea到产品是颇为谨慎的。像这次干净利索的决定，显然已经是好久不见。

其实我是不推荐这么迅速的作出开发新项目的决定的，除非具备几个因素：1、项目开发周期短，1-3天为宜；2、具备立竿见影的效果；3、没钱了。

从Idea到产品，首先需要梳理思路。之前用的xmind，最近一直用新出的幕布，后者更方便分享，多端可用，比较适合国内的使用习惯。

思维导图
时间紧迫，简单画了画。如果是较大的项目，则需要有比较系统的思路。这里推荐下 processon，之前一直用他画流程图，最近发现它又新出了诸如商业画布一类的工具，很好用。

3.2 着手设计

产品最终的形态，在开发之处最好是要有原型的，否则开发过程中，会逐步失去方向，被琐碎的事情干扰，以致最终开发出的产品和最初的设想有很大出入。

产品原型的工具，在上面没有列出来，是因为项目太小，画原型图在时间上划不来。原型图的工具推荐下 墨刀，和幕布一样，也是可以在线分享演示的，这在团队协作和给客户演示时非常方便。

这次的设计，就是完全在脑子里打了个草稿，又去找了找同类型的产品取了点经，一个大概的产品模型就有了。

至于风格什么样，那就只能靠天吃饭了。因为这么短的时间，不可能去动用设计的兄弟，所以就在 iconfont 和 ooopic 一类的设计网站上找灵感。好在iconfont上刚好有一组图标，与心目中的产品比较契合，果断下载。

至此，logo、图标、框架等都齐了，开始最激动的撸代码阶段。

3.3 撸代码

一个人搞定前后端，这里面就有些门道了。
先干啥后干啥，每个人的喜好不同。以效率为出发点，我有如下建议：首搭框架，先前再后，先横再竖，敏捷交付。

【首搭框架】，是指先把前后端的基础框架搭建起来，该配的基础功能先做好。比如Laravel的本地调试环境、代码仓库、云端服务器、备案过的域名、小程序的账号、业务域名配置等等，这些环节先在脑子里过一遍，再从头到尾整个做完。

之所以一鼓作气全部做完，是因为在后面编码的过程中，一旦被上面一些小问题卡住，思路就容易被打乱，影响效率。并且，很多事情是需要较长的时间的，比如域名备案，慢的话就得一二十天，如果被域名卡住，项目流产的可能性就会直线攀升。

第二是【先前再后】。这个意思则是在开发某个功能时，先设计前端界面和逻辑，再做后端接口和数据。反过来不行么？行，但是不好。在这种快速迭代开发的情况下，前端页面和逻辑没有经过系统的设计，会经常发生变动。这和传统团队开发不太一样，没有概要设计到详细设计再到开发的过程，更没有并行开发的条件，因此要因地制宜，采取更适合这种小型作战的方式方法。

当然，这个建议重点关注的是具体的功能开发，而不是完全取消前置设计。如果没有整体的框架设计，是万万不行的。

第三是【先横再竖】。我们从水平和垂直两个方向，去划分具体的功能。比如这个项目中有四个页面，分别是发现页、发布页、个人主页、以及单篇展示页。我在开发时，先把四个页面建好，把tab和图标都加进去，页面切换做好，先感受下最终的效果。这种方式叫水平开发，好处在于让你会对产品的最终形态先有所感知，如果有不舒服的地方，及时地进行调整。

当我们对某个页面，或者某个跨页面的功能进行开发时，则称之为垂直开发。此时的功能颗粒度就会相对较小，也更容易把控。

最后是【敏捷交付】，是脱胎于敏捷开发模式的。意思是要持续的向客户交付可用的产品，这里的客户就是开发者自身。在前几个原则的基础上，要实现敏捷交付，还应该注意不要被细枝末节的点牵绊住。比如某个图标的配色不好，某个按钮的位置摆的不正等等。切记，一定要抓大放小，美化完善的工作一定放在最最后。再者，一款产品就是要在不断的打磨下，才能奔着精品而去。

3.4 运营准备

一个产品的启动是很有讲究的，尤其是社交和UGC产品。当一个用户初次使用时，如果觉得你这个产品冷冷清清毫无生气，是很难沉下心来去体验的。所以，适当的“作假”是提高用户体验的增长黑客手段。

在产品达到一定量级后，一定记得把这些措施去除。比如王者荣耀的排位匹配，当你的等级很低时，会匹配一些AI机器人陪玩，以鼓励玩家。

当到达人数比较多的等级阶段时，就会降低AI机器人的比率，因为让用户等待时间过久，是一件体验非常不好的事。同样的，在我们这个产品中，用户发出去的文章，在达到一定时间内，应当引入一定的激励机制，以鼓励用户。当用户较多时，真实的互动足够激励用户再创作时，则可取消激励机制，彻底度过项目的冷启动阶段。

4 后记

整个过程都是一个人完成的，对于小项目尚能如此，稍微大些的就需要考虑到协作问题。

改天会就中小型团队协作的过程，以及用到的一些提高效能的工具进行分享。