用低代码开发简易的小程序技术教程

1小程序简介

本次教程利用微搭低代码工具带着大家实现一款打卡小程序，小程序一共分为三个页面，分别是首页、签到页、签退页。

2项目背景

随着社会经济的飞速发展，越来越多的家庭都是双职工，双职工家庭如果老人身体不太好假期带孩子就是个问题。家庭经济条件好的可以上假期托管班，但是这种托管班都价格不菲，对于收入不高的家庭来说是个不小的负担。

为了确实解决家长的托管需求，某单位征求大家的意见后决定在单位一楼开辟一个专门的场所，提供学习的工具和小孩娱乐的工具，起了个比较好听的名字托管小屋。运行了一段时间后发现了一些问题：

1、每天托管的孩子不固定，不知道孩子的家长是谁。

2、没有专人的看护，小孩子在楼道里乱跑影响办公环境。

3、安全有潜在的问题，担心孩子在托管小屋发生安全状况。

3需求分析

和用户沟通后，使用小程序进行家长及孩子信息的收集，需要提供二维码，方便家长扫码录入信息，小程序需要具备以下功能：

1、要考虑能匿名登录

2、首页需要进行功能跳转，分为签到和签退

3、签到采集家长和孩子的个人信息，有表单提交的功能

4、签退采集家长的信息，有表单提交的功能

4小程序开发步骤

利用微搭低代码开发小程序的总体步骤分为创建数据源、创建应用、开发页面、发布预览。

5步骤一 创建数据源

按照需求分析，我们设计了两个数据源，分别是签到数据源和签退数据源。具体的创建方法，登录微搭的控制台，点击数据源管理菜单，点击新建自建数据源按钮。

在弹出的页面输入数据源的名称和标识，点击确定按钮进行创建

创建好后，点击编辑按钮进入编辑模式

点击添加字段，增加我们需要的字段

5.1签到数据源

5.2签退数据源

6步骤二 创建应用

开发小程序需要创建应用，点击应用管理，点击创建空白应用按钮

新建应用的时候选择普通应用，输入应用名称和标识

7步骤三 开发页面

应用创建好后我们就需要开发页面，默认会给创建一个首页，需要再创建两个页面，签到页和签退页。创建页面的方法是先点应用进入到应用编辑模式

点击创建新页面，我们分别创建一下签到页面和签退页面

7.1首页的开发

按照一开始我们小程序简介的介绍，首页我们是一个导航的功能，点击图标可以导航到签到页面和签退页面。切换到组件页签，分别添加两个标题组件

修改标题的内容为如下，主要是修改标题的内容、级别和颜色

接着我们添加一个栅格布局，用来放置导航图标

修改栅格布局的列比例为6:6，列间距为150

然后修改一下栅格布局的样式，改为弹性布局，设置主轴方向为水平，主轴对齐为横向平分，副轴对齐为中点对齐

在栅格布局的第一个插槽中添加一个容器组件

设置容器组件的样式为弹性布局，主轴方向为垂直，主轴对齐为水平居中，副轴对齐为中点对齐

样式设置好后在容器组件中添加图片组件和文本组件

修改图片组件的宽和高各为100

图片地址更换为签到的图标

修改文本的内容为签到

为了图标能够响应点击事件，我们需要在容器上增加一个点击事件，选择为平台方法的导航方法，选择页面选择为qiandao

设置好后我们选中容器组件，点击鼠标的右键，选择复制

选中栅格组件的第二个插槽，点击鼠标右键，选择粘贴

然后修改图片组件的图片地址为签退的图标，文字内容修改为签退

修改容器组件的事件，页面改到qiantui

这样首页就开发好了

7.2签到页的开发

切换到页面管理，选择签到页面

切换到组件视图，先添加一个导航栏组件

修改一下导航标题为签到，打开展示返回图标的配置

给导航栏组件增加一个返回事件，选择平台方法的返回即可

导航栏组件配置好后，往页面中添加一个表单容器组件

给表单容器增加submit提交事件，先选择签到的数据源

然后在传入参数那点击数据绑定，使用表达式的方法进行绑定

提交事件设置好后，我们增加一个数据创建成功后的事件

数据创建成功后我们就返回到首页

剩下就依次在表单容器里加入表单输入组件，日期的话可以选择表单日期组件方便用户录入

字段设置好后，我们增加一个按钮，修改按钮的类型为提交

这样签到页面就开发好了

7.3签退页的开发

按照签到页面的方法开发签退页面

8步骤四 发布预览

页面开发好后，可以先进行实时预览测试功能，测试通过后点击发布按钮进行正式发布即可