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

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

0.准备工作：在线思维导图工具：百度脑图在线原型制作工具：墨刀在线API文档编写工具：ShowDoc官方界面组件文档可视化编辑器Egret Wing微信官方IDE 小程序界面样式库weui- wxss官方演示代码接口联合调试邮递员腾讯云小程序后端开发套件晶圆腾讯云晶圆自部署计划小打孔卡微信小程序 1.前端开发1.与产品相关的您通过“百度脑图”来构思功能，以标准化产品的功能模块

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

生成产品创意后，我的常规做法是尽快记录备忘录，然后继续在备忘录中添加有关产品功能，市场，功能，使用过程和其他创意的其他创意。这样，更多的记录，产品就变得越来越复杂。这时，使用思维导图工具从通用应用程序的设计中学习，重新组织备忘录中的功能和处理记录，确定整个产品的模块划分以及每个模块下的小功能，并剥离相同的功能。如下图所示，这是早期小型打孔卡的功能模块划分。仅保留我认为必不可少的功能。我打算在产品的第一个屏幕上放置四个水平的主页面，每个页面包含相应的辅助页面和功能。

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

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

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

实际上，此步骤的工作要求您简要了解小程序开发中可用的ui组件。在小程序官方文档的组成部分中，由小程序提供的视图容器，表单，媒体，导航和其他组件。在开发之前，您必须至少弄清楚这些组件的外观。在早期阶段，请确保功能具有优先级。设计小程序时，请不要搞乱华丽的界面。一些组件用于设计产品，因此您可以先跳过UI设计阶段，而在编写前端代码的阶段，可以重用官方组件和代码，最多只对微进行了少许更改官方组成部分。因此，您可以轻松进行开发。此外，这些所谓的ui组件被广泛使用，并且可以在各种应用程序中看到。在Ink Knife的在线原型设计网站上，您可以通过拖放来设计小程序界面。

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

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

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

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

图片：白鹭翼的代码编辑

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

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

熟悉官方界面和组件文档。尽管此阶段只是编写用于界面显示的代码，但您必须首先弄清楚小程序的基本框架，配置，逻辑，视图和样式。简而言之，小程序包含一个描述整个程序的应用程序以及多个描述每个页面的页面。这里的应用程序指的是放在根目录中的三个文件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，这是官方的开源样式库，其中封装了许多有用的组件，例如图像上载，消息提示，日期选择，选项卡和其他组件。您只需要将相应的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.jsPage({ 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文档规范以小程序规定了要为特定页面或操作发送的数据以及从服务器返回的数据格式，这对于独立开发或团队开发非常有用。这样的文档编写工具可以在线网站，也可以自己编写单词。目的是就前后数据的输入和输出达成一致。当然，有些工具比我提到的ShowDoc更强大，更易于使用。在开发过程中，需要根据实际情况对API接口文档进行补充和完善，因为并非所有数据都会显示在视图层中，并且有些数据与您的逻辑有关，因此需要考虑定义在界面文档中。好吧，此阶段的工作直接影响到下一阶段数据表的设计。因此，在设计数据表之前，请尝试为各种操作编写小程序逻辑代码，并整理出需要在服务器端提供的各种数据。

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

请参考相应的设计规范进行数据库设计，很难说~~~~

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

晶圆是腾讯云的开源小程序后端PHP套件。部署后，您可以轻松使用会话服务和频道服务

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

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

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