当前位置：首页 > news >正文

少儿舞蹈小程序（9）校区信息展示

news 2025/9/7 7:11:22

前言

上一篇我们介绍了校区信息的后台管理功能，后台功能通常是提供给机构校长日常维护信息使用的。校长在后台将基础信息维护好之后，就需要在小程序的首页上进行展示，本篇我们介绍一下前端信息展示的搭建过程。
在这里插入图片描述

1 搭建API

要想在前端展示校区信息，需要先从数据库中取出数据。在低代码中，我们是通过API来完成数据的获取。在前边章节中，我们已经将机构信息取出。校区信息和机构是有关联的，我们在现有API的基础上增加校区信息的获取。

找到我们已经创建好的机构信息API，点击编辑进行修改
在这里插入图片描述
在原有的基础上继续增加获取校区信息的代码

/*** 获取机构信息API - 完全基于官方文档语法* 严格按照微搭官方文档的语法编写* 参考：https://docs.cloudbase.net/lowcode/api/model_crud*/module.exports = async function (params, context) {try {// 第一步：获取机构表的数据 - 使用官方确认的语法const institutionResult = await context.callModel({dataSourceName: 'institutions',methodName: 'wedaGetRecordsV2',params: {select: { $master: true }}});// 检查查询结果if (!institutionResult.records || institutionResult.records.length === 0) {return {code: 404,message: '未找到机构信息',data: null,timestamp: Date.now()};}// 取第一条记录const institution = institutionResult.records[0];const institutionId = institution._id;// 第二步：根据机构ID获取机构优势信息const advantagesResult = await context.callModel({dataSourceName: 'dance_advantages',methodName: 'wedaGetRecordsV2',params: {filter: {where: {institution_id: { $eq: institutionId }}},select: { $master: true }}});const campuses = await context.callModel({dataSourceName: 'dance_campuses',methodName: 'wedaGetRecordsV2',params: {filter: {where: {institution_id: { $eq: institutionId }}},select: { $master: true }}})// 对优势信息进行排序（在代码中处理，避免使用不确定的orderBy语法）const sortedAdvantages = advantagesResult.records.sort((a, b) => {return (a.sort_order || 0) - (b.sort_order || 0);});// 构建返回的数据结构const responseData = {institution: {id: institution._id,name: institution.name,logo: institution.logo,description: institution.description,contactPhone: institution.contact_phone,email:institution.email,businessHours: institution.business_hours,status: institution.status,createdTime: institution.created_time,updatedTime: institution.updated_time},advantages: sortedAdvantages.map(advantage => ({id: advantage._id,title: advantage.title,description: advantage.description,sortOrder: advantage.sort_order,createdTime: advantage.created_time,updatedTime: advantage.updated_time})),campuses:campuses.records};return {code: 200,message: '获取机构信息成功',data: responseData,timestamp: Date.now()};} catch (error) {console.error('获取机构信息错误:', error);return {code: 500,message: '服务器内部错误',data: null,timestamp: Date.now()};}
};

代码修改好了之后，点击出参自动映射更新API
在这里插入图片描述

2 前端调用API

后端API修改好之后，需要在页面上进行调用。先打开我们的小程序应用
在这里插入图片描述
点击首页代码区的+号，我们来创建API的调用

选择新建外部APIs查询

选择机构管理，触发方式选择入参变化时自动执行

配置好之后点击保存按钮，保存配置

3 搭建布局

API配置好之后，我们的数据已经通过API获取到了，现在需要先搭建页面的布局。

先在页面组件下添加普通容器，作为我们整体内容的容器
在这里插入图片描述
给容器设置10px的内边距

里边继续添加一个普通容器，作为校区信息的背景

设置白色的背景色

继续添加普通容器，作为我们的标题背景

设置如下样式

:root {padding: var(--spacing-lg);background: linear-gradient(135deg, var(--primary-light), var(--primary-color));color: white;display: flex;justify-content: space-between;align-items: center;
}

里边添加文本组件和按钮组件
在这里插入图片描述
文本组件的文本内容修改为📍 校区信息

样式设置为

:root {font-size: var(--font-size-lg);font-weight: bold;display: flex;align-items: center;gap: var(--spacing-sm);
}

按钮内容修改为更多，类型修改为链接
在这里插入图片描述
设置样式

:root {color: white;font-size: var(--font-size-sm);opacity: 0.9;
}

在标题下继续添加普通容器作为内容区域
在这里插入图片描述
设置样式

:root {padding: var(--spacing-sm);
}

因为校区是有多个的，所以我们需要循环展示每个校区的信息，我们先把一个校区的布局搭建好。

先分析一下具体的布局
在这里插入图片描述
可以看到是一个一行三列的布局，中间的内容区域要占满，这种的我们可以考虑用普通容器来构造，先添加一个普通容器，里边增加三个普通容器，表示我们一行三列布局

在这里插入图片描述
设置外层的普通容器的布局为横向排列，垂直居中

内层的普通容器，第一个里边放置一个文本组件，文本内容改为🏢

样式改为

:root {width: 50px;height: 50px;background: var(--primary-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;color: var(--primary-color);
}

内层的第二个普通容器里边放置两个文本组件，样式改为
在这里插入图片描述

:root {flex: 1;
}

内层第三个普通容器，里边放置两个按钮组件，按钮的内容改为电话和导航
在这里插入图片描述
将按钮改为纯图标展示，配置合适的图标

4 绑定数据

布局搭建好了之后就需要进行数据绑定，我们的校区是有多个的，在我们搭建好的布局的外层添加一个循环展示组件
在这里插入图片描述
点击数据，绑定为我们API的校区属性

然后把搭建好的布局移入循环展示中

第一个文本组件绑定校区的名称

第二个文本组件绑定校区的地址

选中第一个按钮组件，设置点击事件

选择拨打电话

绑定机构的电话
在这里插入图片描述
第二个按钮绑定地图导航

绑定机构的经纬度信息