最近，我花了一些时间写一个“小办理入住”迷你程序。该产品主要关注日常习惯，例如早起，健身，阅读等以及签出记录以及共享，以帮助用户养成良好的习惯。

目前，该小程序支持与签到相关的许多功能。特别是在这里记录和分享开发过程中使用的工具和开发经验。

一个微信Mini计划需要经历产品功能概念，模块部门，原型设计，UI设计，前端开发，后端开发，接口调试，测试和启动的开发阶段，然后可以将其引入市场并输入用户的愿景。

在开发之前，您需要对整个开发阶段有全球了解，并清楚每个阶段的工作重点。

此外，您需要使用一些现成的高质量工具或代码资源来有效并快速开发迷你程序以实现您的创造力。

本文将不会教您如何逐步编写代码，但会在整个产品开发阶段谈论前端和后端开发的一些关键点。本文旨在提供一些相关的资源和经验，可以帮助您以一半的精力来快速开发迷你计划。

1.1根据您构想的产品的相关功能，请使用“ Map”来标准化产品的功能模块。

消除粗糙性并提取本质，并弄清与产品功能相关的想法。

生成产品想法后，我的总体实践是尽快记录备忘录。随后，其他想法围绕着该产品的功能，市场，特征，使用过程等转移，并继续将其补充为备忘录。

随着记录更多的记录，产品变得越来越复杂。目前，我们使用脑图工具从应用程序的设计概念中学习，并重新分配备忘录上功能和过程的记录。

在此过程中，我们需要确定整个产品的模块划分以及每个模块下的小功能，并剥离相同的功能。

如下图所示，这是早期小办理登机手续的功能模块的划分。我认为只有功能是必不可少的。我计划在产品的第一个屏幕上放置四个级别的主页，每个主页包含相应的辅助页面和功能。

通过简单的原型制作工具以较低的成本来可视化您的创造力。

此步骤要求您简要了解Mini计划开发中可用的UI组件。

在官方迷你程序文档的组件中，详细介绍了Mini计划提供的视图容器，表单，媒体，导航和其他组件。在开始之前，您至少必须了解这些组件的外观。

设计迷你程序时，不要先使用华丽的界面。您应该尝试参考官方设计的现有组件，以确保功能是首选的。

这样，您可以暂时跳过UI设计阶段，并在写作前端代码期间重复使用正式提供的组件和代码，并最多进行一些更改。

此外，这些所谓的UI组件被广泛使用，基本上可以在各种应用程序上看到。在“ mo dao”的在线原型设计网站上，您可以使用拖放来设计界面。

使用两个工具来更有效地开发。

如果您想做一份好工作，则必须首先提高工具。为了开发Mini计划的前端部分，您可以使用官方IDE并匹配白羊翼。

前者允许您方便地预览，在真实机器中进行调试和公开部署

后者弥补了代码编辑中官方IDE的缺点，并提供页面模板创建，代码完成和实时代码预览功能。

比较迷你程序的功能，仔细分析您的产品，并考虑如何组织迷你程序的组件和API来实施您的功能和页面。

在前端开发阶段，尽管它只是在接口上显示的代码，但您必须首先了解Mini程序的基本骨架，配置，逻辑，视图和样式之间的连接。

简而言之，该小程序包含一个描述整体程序和多个描述其各自页面的应用程序。

此处的应用是指根目录中的三个文件：app.js，app.json和app.wxss。它们主要负责全球逻辑，配置和样式。

这是您将要编写的多个页面。多个可以通过官方导航功能重定向。

每个页面由四个文件组成：page.js，page.json，page.wxml和page.wxss。 WXML页面类似于HTML文件，主要负责该页面的结构。

但是，WXML比HTML简单，您的布局基本上是关于使用和标签，以及其他官方文档中描述的其他标签。

请注意官方文档中组件的内容。

1.5结合相关代码编写产品的前端接口

比较原型设计，并使用WXML和样式组件来写出您的产品界面。

要构建产品界面，我们必须提及WEUI-WXSS的官方开源样式库。

该库封装了许多实用的组件，例如图像上传，消息提示，日期选择，选项卡和其他组件。您只需要将相应的代码复制到您的项目中即可使用。这也是您尝试将微信上的现有组件引用以设计原型的原因。

这样做还有另一个优点，即它可以使界面样式和微信尽可能统一。

此外，官方演示代码还包含中官方组件和API的示例，这些官方组件和API值得开发人员学习和使用。

总结

这部分主要是迷你程序前端接口的开发过程。对于没有后端开发方面的基础和经验的用户，如果他们想在没有数据交互的情况下编写产品，他们基本上可以练习它 - 当然，不要忘记在上网之前很好地编写页面逻辑，测试和修复错误。

对于具有后端开发经验的朋友，您可以继续阅读。

下面，我将讨论如何快速发展后端，当然，我还将尽可能将现有资源或代码组合在一起。

2。后端开发

2.1根据完成的前端代码编写接口文档

该小程序设置了页面中的数据更改，该数据将相应的更改为接口。您需要就服务器端程序的数据交互格式达成共识。

完成前端接口后，您已经完成了静态接口的编写。

在微信系中，更改页面上定义的数据对象下的特定属性的值。

简而言之，如果您需要更改接口上的内容，例如显示不同昵称的不同用户，我们只需要在页面中定义数据对象数据：

数据：{：'

在page.xml中，您可以使用以下数据：

{{}}

通过网络请求后，您可以通过（）函数更改数据：

这个。（{：'小签入'}）

执行此功能操作后，您看到的接口内容也更改。

因此，在编写后端代码之前，我们可以首先分类需要在每个页面或功能中更改的数据，并确定需要从服务器获得哪些数据。

我们编写接口文档，以允许前端和后端遵循此法规并进行数据交互。

下图是我的“小办理入住”小程序接口的一个示例：

使用小办理登机手续的用户知道，在创建登机手续时，他们可以在建议列表中直接选择习惯。我将根据每个人的习惯频率来更新建议的习惯。

因此，我首先使用该文档就此数据的请求方法，请求链接，请求期间带来的参数以及返回的数据格式达成共识。

首先，在页面数据对象中定义此属性。将网络请求发送到小程序中的服务器并获取返回的数据后，通过（）更新数据对象下定义的值。

之后，推荐列表的内容将自动显示在接口上。代码如下：

//page.js

页（{

数据：{

：[]，，

}，，

：（）{//页面初始化时，发送网络请求

这。（）;

}，，

：）{

var that = this;

wx。（{