前言

尊敬的校长，您好！

欢迎开启您舞蹈机构的数字化之旅。您可能认为制作一款小程序是程序员才能完成的复杂工作，但实际上，借助现代化的零代码/低代码平台，您完全可以像搭积木一样，亲手打造出功能强大的“少儿舞蹈小程序”。

本系列教程将手把手带您完成整个过程。今天，我们的第一个目标，就是为小程序的“门面”——首页，安装一个精美、可自动播放的品牌宣传轮播图。这就像是为您线上校区装上一个最吸引眼球的电子展示窗！

让我们开始吧！

---

准备工作：理解两个小概念

在动手之前，我们先用一个简单的比喻来理解两个核心概念：

1. 数据模型：您可以把它想象成一个“智能相册”。我们先设计好这个相册的格式，比如规定每一页都必须包含“一张图片”和“一个跳转链接”。以后，我们只需要往这个相册里添加照片，所有需要展示这些照片的地方就会自动更新。
2. 数据绑定：这就像是施展一个“魔法连接”。我们将首页上的轮播图组件（展示窗）和我们刚刚创建的“智能相册”（数据模型）连接起来。这样一来，相册里有什么，展示窗里就自动展示什么，无需手动一张张更换。

理解了这两个概念，接下来的操作就会非常简单。

---

第一步：创建我们的“智能相册”（创建数据模型）

这是所有工作的基础。我们需要先创建一个地方，专门用来存放轮播图要展示的图片和信息。

1. 登录平台，找到“数据模型”管理入口。

2. 新建一个数据模型。

点击“新建数据模型”按钮。

给它取一个好记的名字，比如 banner_images 或者直接叫“轮播图相册”。这个名称是给系统看的，建议使用英文字母。

3. 为“相册”设计格式（添加字段）。

进入新建的“轮播图相册”后，我们需要为它添加对应的字段

点击“添加字段”，创建一个名为 宣传图片 的字段，它的字段类型请选择“图片”。这个位置将来就用来上传我们的宣传海报。

4. 向“相册”里添加内容（上传图片）。

点击添加行，可以上传需要展示的图片

---

第二步：搭建小程序框架（创建应用和首页）

如果说数据模型是原材料，那么现在我们就开始搭建房子的框架。

1. 创建应用：点击可视化低代码，选择小程序应用，点击从空白新建

3. 进入首页：创建成功后，平台会自动生成一个空白的首页。点击“页面设计”，进入可视化设计界面。这里就是我们施展创意的主战场！

通常这个空白页没什么用，属于多余的操作，点击创建页面的图标，我们创建一个首页

输入标题，页面ID修改为index

然后将刚才添加的页面设置为首页

---

第三步：放置轮播容器

现在，我们要把“电子展示窗”搬到首页上来。

1. 找到组件：在设计界面的右侧，您会看到一个“组件库”。这里有各种现成的功能模块，如按钮、文本、图片等。

2. 拖拽组件：在组件库里找到“轮播容器”组件。

3. 放置到页面：用鼠标按住它，直接拖拽到中间的空白首页画布上。松开鼠标，一个带有几张默认图片的轮播框就出现在您的首页上了！

---

第四步：施展“魔法连接”（自定义变量与数据绑定）

这是最关键的一步！我们要让这个轮播框自动去读取我们“智能相册”里的照片。

1. 创建“数据搬运工”（创建变量）

在代码区点击，点击新建

选择新建内置数据表查询

数据表选择轮播图相册，触发方式选择入参变化时自动执行

修改一下变量的名称

2. 进行“数据绑定”

选中轮播容器里的图片组件，点击图片地址的fx

依次展开我们刚刚定义的数据表查询对象，选择图片字段

3. 预览效果！

完成绑定后，点击界面右上角的“预览”按钮。

恭喜您！您会看到小程序首页上显示的，正是您在第一步中上传到“智能相册”里的那几张图片，并且它们可以自动播放了！

---

总结与展望

校长，您太棒了！您刚刚已经独立完成了小程序开发中最核心的一个流程：创建数据模型 -> 搭建前端界面 -> 实现数据连接。现在，您的首页轮播图已经是一个“活”的系统了。

未来，当您需要更换宣传海报时，再也无需修改小程序页面。您只需要回到第一步创建的“轮播图相册 ”中，添加、删除或修改图片，小程序首页的轮播图就会自动同步更新！

在下一篇教程中，我们将搭建一个后台系统，方便校长日常更换宣传图片。敬请期待！