目前我们的首页已经开发完毕了，包含轮播图、机构介绍、校区展示、作品与活动展示功能。家长在小程序了解了机构的基本情况之后，下一步就是参加试听，在线下真实体验一下校区的环境、师资情况、教学质量。
我们在首页提供了一个预约的快捷入口，家长可以在线的填写预约的相关信息
本篇我们介绍一下具体的开发过程
1 创建数据模型
家长如果希望在小程序填写信息，机构还想留存这些信息方便日后做沟通的，在低代码中需要通过创建数据模型来保存数据。
点击MySQL数据库，点击+号创建数据模型
输入模型的名称和标识
点击添加字段，先添加学员姓名，类型选择文本
继续添加字段，添加学员年龄，类型选择枚举，按照年龄段录入枚举值
继续添加字段，添加联系电话，类型选择电话
继续添加字段，添加意向课程，类型选择枚举，录入具体的课程
继续添加字段，添加备注说明，类型选择文本
继续添加字段，添加预约上课日期，类型选择日期时间
继续添加字段，添加状态，类型选择枚举，枚举值设置为待确认、已确认、已完成、已取消
继续添加字段，添加确认时间，类型选择日期时间
2 搭建预约按钮
数据表搭建好之后，我们就可以在小程序里搭建预约功能。打开我们的小程序应用
在首页的页面组件下边添加一个普通容器，里边添加一个文本组件
设置普通容器的样式
:root {
position: fixed;
bottom: 80px;
right: var(--spacing-lg);
z-index: 999;
}
设置文本组件的样式
:root {
width: 60px;
height: 60px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 12px;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
padding: 0px 15px;
font-weight: bolder;
}
3 搭建表单
点击按钮的时候，我们需要打开弹窗，在页面组件中添加弹窗组件
里边添加表单容器，数据模型选择在线预约
设置预约状态的选中值为1
切换到样式，隐藏该组局
将确认时间组件也隐藏
设置表单容器提交成功后的方法，添加关闭弹窗
关闭弹窗默认打开状态
设置预约文本组件，添加点击事件，打开弹窗
4 搭建管理功能
家长提交了预约信息后，机构需要在后台里进行查看，管理预约信息。打开我们的后台应用
点击创建页面的图标，我们来创建管理页面
选择表格与表单页，数据模型选择在线预约，布局选择左侧导航布局
切换到布局设计，选择布局导航，添加平级菜单
将预约列表页面添加到菜单里
整体效果
用户打开小程序首页，可以看到在线预约的按钮
点击预约时打开弹窗
录入相关信息，点击提交就可以在后台看到家长提交的预约信息
总结
本篇我们介绍了首页最后一个功能，在线预约。像这类功能通常比较简单，只需要搭建好表单容器就可以实现，再搭建一个后台功能就比较完善了。第一章我们用了14篇篇幅完整介绍了小程序首页的搭建过程，下一个篇章我们介绍一下商城功能，敬请期待。