感谢作者许家宜的出版权。

作者：徐嘉义，整个堆栈开发工程师，专门研究技术选择，系统架构，产品设计，正面和背面开发。在公司中，他主要负责软件开发项目管理，故障排除，招聘和其他工作。

负责编辑：陈秋歌，注意微信开发等领域。有关报告或贡献，请给chenqg＃发送电子邮件，或添加微信：Rachel_qg。

摘要：最近，从1月25日到2月8日，我花时间写了一个“小值机”微信小程序。本产品主要用于记录和记录每天的早晨，健身，阅读等习惯。分享并帮助用户养成良好的习惯！当前，它支持以下功能，例如私人签到，签到推送通知，共享和邀请组好友签到，统计，签到记录，签到排名，照片/位置释放，签到公开/私有日记，例如朋友签到日记等。特别是，记录并共享开发过程中使用的工具和开发经验。

A微信小程序需要经历产品功能概念，模块划分，原型设计，UI设计，前端开发，后端开发，接口联合调试，测试和启动等开发阶段，最后市场并进入用户的视野。在开发之前，您需要对整个开发阶段有一个整体的了解，并明确每个阶段的工作重点。此外，您还需要使用一些现成的高质量工具或代码以及其他资源来快速有效地开发小程序以实现您的创造力。本文不会教您如何手工编写代码。它将主要描述整个产品开发阶段中前端和后端开发的一些关键点。旨在提供一些相关的资源和开发经验，使您可以花更少的钱做更多的事情，并快速开发小程序！

准备工作在线思维导图工具：百度思维导图在线原型制作工具：Moknife在线API文档编写工具：ShowDoc官方界面组件文档视觉编辑器Egret Wing 微信官方IDE小程序界面样式库Weui -wxss官方演示代码接口联合调试插件Postman腾讯云小程序晶圆后端开发套件腾讯云晶圆自部署方案小打卡微信小程序前端开发

1.根据构思产品的相关功能，使用“百度脑图”来标准化产品的功能模块。

删除粗略和精炼的内容，并整理出与产品功能有关的想法。

产生产品构想后，我的一般做法是尽快记录备忘录。随后，有关产品功能，市场，功能，使用过程等的其他想法不断地添加到备忘录中。这样，记录越多，产品变得越复杂。此时，您可以使用大脑图工具从通用App的设计中学习，以重新组织备忘录中功能和流程的记录，确定整个产品的模块划分以及每个模块下的小功能，以及去除相同的功能。如下图所示，这是早期小型打孔卡的功能模块划分。仅保留我认为必不可少的功能。我打算在产品的第一个屏幕上放置四个水平的主页面，每个页面都包含相应的辅助页面和功能。

图片：小打孔卡的功能模块划分

2.根据完成的“功能模块设计”，使用“墨刀”在线设计来完成产品的原型。

使用简单的原型工具，在编码之前，可以以低成本可视化想法。

在此步骤中，您实际上需要简要了解小程序开发中可用的UI组件。在小程序官方文档的组成部分中，详细介绍了视图容器，表单和小程序提供的表单。对于媒体和导航之类的组件，在开发之前，必须至少弄清楚这些组件的外观。在初始阶段，请确保功能具有优先级。设计小程序时，请不要首先迷惑华丽的界面，并尝试参考正式的界面。用于设计产品的组件，因此您可以首先跳过UI设计阶段，而在编写前端代码的阶段，可以重用官方组件和代码，对官方组件的更改最多为微。因此，您可以轻松进行开发。此外，这些所谓的UI组件得到了广泛使用，并且基本上可以在各种应用程序中看到。在Ink Knife的在线原型设计网站上，您可以通过拖放来设计小程序界面。

图片：墨刀在线原型设计网站

3.使用“白鹭翼”和“ 微信官方IDE”编写前端代码

同时使用两个工具来提高开发效率。

如果工人想做好自己的工作，则必须首先磨砺工具。小程序前端部分的开发可以使用官方的IDE + Egret Wing搭配。前者可让您轻松预览产品，扫描代码并上传。小程序代码已在线部署。后者弥补了官方IDE在编辑代码方面的不足，提供了非常方便的代码页模板创建，代码完成以及实时编辑和预览功能。

图片：白鹭翼的代码编辑

4.仔细阅读“官方接口组件文档”以了解小程序提供的相关组件和API。

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

熟悉官方界面和组件文档。尽管此阶段只是编写用于界面显示的代码，但您必须首先弄清楚小程序的基本框架，配置，逻辑，视图和样式。简而言之，小程序包含一个描述整个程序的应用程序和多个描述其各自页面的页面。这里的App指的是放置在根目录中的三个文件app.js / app.json / app.wxss。它们主要负责全局逻辑，配置和样式。页面是您要编写的多个页面，与原型设计中的每个页面相对应，并且可以通过官方导航功能跳过多个页面。每个页面由四个文件组成：page.js / page.json / page.wxml / page.wxss。 wxml页面类似于html文件，主要负责页面的结构，但是比html简化。您的布局基本上是使用其他官方文档中描述的标签和其他标签。在这里，请检查正式文档中组件的内容。

5.将“ weui-wxss”和“ Official Demo”的相关代码合并以编写产品前端接口的代码

此步骤主要是比较您的原型设计，使用微信小程序的WXML语法以及使用小程序的样式组件来编写您的产品界面。

要构建产品界面，我不得不提到weui-wxss，它是官方的开源样式库，其中封装了许多有用的组件，例如图像上载，消息提示，日期选择，Tab选项卡和其他组件。您只需要将相应的WXML和WXSS代码复制到项目中的相应文件中。这也是为什么您一开始尝试参考微信中的现有组件来设计原型的原因。这样做的另一个优点是，界面样式和微信可以尽可能统一和一致。另外，官方的Deom代码包含官方组件和API的小程序中使用的代码，供开发人员参考。

总结：上面的部分主要是关于小程序前端接口的开发过程。对于没有后端开发基础和经验的用户，如果要编写不与服务器进行数据交互的产品，则基本上是实用的。在线之前，请不要忘记编写页面逻辑，测试并修复错误。对于那些具有后端开发经验的人，您可以继续看不起。下面将讨论如何快速进行后端开发。当然，也可以尽可能地组合现有资源或代码。

2.后端开发

1.根据“已完成的前端接口和逻辑”，使用“ ShowDoc”在线完成API接口文档。

小程序通过更改逻辑page.js中的设置数据，将相应地更改界面，并且需要与服务器端程序协商数据交换格式。

完成前端接口后，您可以编写一堆假接口或静态接口。在微信小程序中，我们更改逻辑层的page.js文件中定义的数据对象下的属性值，这将导致视图page.wxml文件中的属性值自动变为更改后的值。简而言之，如果您需要更改界面上的内容，例如，不同的用户显示不同的昵称，我们只需要像这样在page.js中定义数据对象数据：

数据：{nickName：'XX'}

在page.xml中使用此数据：

{{nickName}}

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

this.setData（{nickName：'小打卡'}）

执行此功能操作后，您看到的界面内容也会更改。

因此，在编写后端代码之前，我们可以先触摸每个页面或功能中需要更改的数据，然后从服务器获取数据。我们编写接口文档，以使前端和后端遵循此规则进行数据交互。下图是我的小打孔卡小程序的界面示例：

图：接口文档样本

使用小型签到卡的用户知道，在创建签到卡时，您可以直接在推荐列表中选择一种习惯。我将根据每个人的习惯使用频率来更新此推荐的习惯，因此我首先同意文档“此数据请求方法，请求链接，请求参数和返回的数据格式”。首先在页面的数据对象中定义此属性habitList。在向小程序中的服务器发送网络请求并获取返回的数据后，通过setData（）更新在数据对象下定义的habitList的值。之后，推荐列表的内容将自动显示在界面上。代码如下：

//page.js Page({    data:{     habitList: [],    },    onLoad:function(){//页面初始化时，发送网络请求     this.habitFind();    },    habitFind: function(){     var that = this;     wx.request({       url: 'https://www.x.com/habit/find',        method: 'GET',       data: {         openId: userInfo.openId       },       success: function(res) {//成功获取返回的数据         if(res.data.code == '2000'){          let habitList = res.data.data.habitList;          if(habitList.length){            that.setData({//更新data数据中的habitList             habitList: habitList           });          }         }       }     });    } })复制代码

//page.wxml 可以参考官方文档中的列表渲染部分的内容{{item.habitName}}复制代码

图：渲染后的列表页面

API文档规范以小程序规定了要为特定页面或操作发送的数据以及从服务器返回的数据格式，这对于独立开发或团队开发非常有用。这样的文档编写工具可以在线网站，也可以自己编写Word。目的是就前后数据的输入和输出达成一致。当然，有些工具比我提到的ShowDoc更强大，更易于使用。在开发过程中，需要根据实际情况对API接口文档进行补充和完善，因为并非所有数据都会显示在视图层中，并且有些数据与您的逻辑有关，因此需要考虑定义在界面文档中。好吧，此阶段的工作直接影响到下一阶段数据表的设计。因此，在设计数据表之前，请尝试为各种操作编写小程序逻辑代码，并整理出需要在服务器端提供的各种数据。

2.根据“ API接口文档”和“前端小程序代码”，设计所需的数据表。

请参考相应的数据库设计规范，这很难说...

3.根据“ API接口文档”和“数据表”，阅读“晶片自我部署计划”，并在“小程序后端套件晶片”中使用会话服务和CI框架。确定后端控制器，进行数据模型划分，编写后端代码。

晶圆是腾讯云的开源小程序后端PHP套件。部署后，您可以轻松地使用会话服务和通道服务来授权登录并获取用户身份信息。尽管官方文档中提到了这些功能，但未提供特定的后端。实现代码后，腾讯云的晶圆套件就可以满足需求。可以直接部署和使用后端，但是部署仍然有些麻烦。为了使其更简单，您可以购买支持该服务的腾讯云服务器。如果您自己进行部署，则可以参考我的部署经验。部署后，您需要结合设计的数据表来编写和调试其他特定的接口代码。

图片：腾讯云提供的小程序解决方案

在编写了后端代码之后，可以对数据进行合并。记住要完成Http请求，前端小程序的数据呈现和其他逻辑。在启动产品之前，测试产品的相关功能和逻辑，并修复相关的错误。

在开发小程序的过程中，不可避免要踩坑，学习更多小程序官方文件，学习更多小程序官方文件，学习更多小程序官方文件，寻找相关的开发知识，阅读更多高质量的小程序源代码，更多的写作和实践使之完美。肯定有很多高质量的开源代码，工具和其他资源没有被提及，欢迎添加！