最近，抽空编写了「小打卡」小程序。该产品主要是针对每日早起、健身、阅读等习惯，进行打卡记录和分享，帮助用户养成好习惯。
目前，这款小程序支持许多打卡有关的功能。特别在此记录分享一下开发过程中所用到的工具和开发。
一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段，之后便可推向市场，进入用户的视野。
本文不会手把手教你编写代码，而是讲述在整个产品开发阶段，前后端开发的一些要点。本文旨在提供一些能让你事半功倍、快速开发小程序的相关资源和。
产生一个产品 idea 后，我的一般做法是尽快记录到备忘录。随后，围绕这个产品的功能、市场、特色、使用流程等，发散其它想法，并不断补充到备忘录上。
随着记录越多，产品也变得越来越复杂，这个时候，采用脑图工具，借鉴 app 的设计概念，对备忘录上的功能和流程方面的记录重新梳理。
如下图，这是早期小打卡的功能模块划分。只保留了我认为必不可少的功能，产品的第一屏我准备放置四个平级的主页面，每个主页面又包含相应的次级页面和功能。
在小程序文档的组件这部分内容中，详细介绍了小程序提供的视图容器、表单、、等组件。在动手之前，你至少要弄明白这些组件长啥样子。
刚开始在设计你的小程序时，先别瞎华丽的界面，应该尽量参考已有的组件来设计你的产品，功能优先。
这样，你可以暂时跳过 UI 设计这个阶段，还能在编写前端代码的阶段复用提供的组件和代码，最多进行稍微改动。
此外，这些所谓的 UI 组件应用很广泛，在各类 app 上基本都能见到。在「墨刀」这个在线原型设计网站上，你可以用拖拽的方式，设计你的小程序界面。
工欲善其事，必先利其器。小程序的前端部分的开发，可以使用 IDE，搭配白鹭 Egret Wing。
对比小程序的能力，仔细地分析你的产品，思考怎么组织小程序的组件和 API，去实现你的功能和页面。
前端开发阶段，虽说只是编写界面展示的代码，但你得先搞清楚小程序的基本骨架、配置、逻辑、视图及样式之间的联系。
这里的app是指放在根目录的app.js、app.json、app.wxss这三个文件，他们主要负责全局性的逻辑、配置及样式。
不过比起 HTML，WXML 更加简单，你的布局基本上是在使用view和text标签，以及其它文档上说明的其他标签。
这个库封装了很多实用的组件，比如图片上传、消息提示、日期选择、tab 选项卡等组件，你只需要复制相应代码到你的项目就能使用，这也是让你尽量参考微信已有组件来设计原型图的原因。
另外， demo 代码包含了组件和 API 在小程序的中的示例，值得开发者借鉴使用。
这一部分主要是小程序前端界面的开发流程，对于没有后端开发基础和经验的用户，想写一个没有数据交互的产品，基本可以实践了——当然，别忘了写好页面逻辑、测试修复好 bug 再上线。
小程序通过page.js中设置数据的改变，带来界面相应的变化。你需要和服务器端程序约定好数据交互的格式。
在微信小程序中，改变page.js文件中定义data对象下某个属性的值，会引起视图层page.wxml文件中，相应值的改变。
简而言之，如果需要改变界面上的内容，比如不同的用户显示不同的昵称，我们只需要在page.js这样定义data对象数据：
因此，在写后端代码之前，我们可以先捋一捋各个页面或者功能需要发生变化的数据，并且决定好哪些数据需要从服务器获取。
使用过小打卡的用户都知道，在创建打卡的时候，可以在推荐列表中直接选择某个习惯，我之后会根据大家的习惯使用频次，来更新这个推荐的习惯。
所以，我先通过文档，约定这个数据的请求方式、请求链接、请求时所带的参数，以及返回的数据格式。
首先在page的data对象中定义这个属性habitList，在小程序中向服务器发送网络请求并获取返回的数据后，通过setData()更新data对象下定义的habitList的值。
通过 API 文档规范约定小程序中某个页面、操作所需发送的数据，以及从服务端返回的数据格式等，对于开发或团队协作开发，都大有裨益。
这样的工作，可以利用相关的网站或服务，也可以自行编写文档，目的都是约定好前后端数据的输入输出格式。
需要注意的是，并非所有数据都会在视图层显示。这些非显性的数据逻辑，也需要在接口文档中去定义。
这个阶段的工作，直接会影响数据表设计阶段。所以在设计数据表之前，尽量把你的小程序的各种操作的逻辑代码写好，整理出你需要服务器端提供的各项数据。
腾讯云的 wafer 套件刚好满足了需求，后端可以直接部署使用。但是部署还是有点儿麻烦，更简单点你可以购买配套这个服务的腾讯云服务器。
若你希望自行部署，可以参考我的部署。部署后，其他具体的接口代码你需要结合设计好的数据表进行编写、调试。
后端代码编写后可以联调数据，记得完成前端小程序的网络请求、数据渲染及其他逻辑。接着，需要对产品的相关功能和逻辑的进行测试，修复相关 bug 后再上线产品。
推荐：