少儿舞蹈小程序从0到1（5）：搭建关于我们页面

前言

尊敬的校长，您好！

恭喜您，通过前四篇教程的学习，您的小程序首页已经拥有了专业的轮播图和功能齐全的“金刚区”导航。

现在，我们要开始为这个小程序注入真正的“灵魂”，让它不再是静止的图片，而是能够根据您的运营需要灵活展示内容、并且可以跳转到不同页面的“活”系统。

今天，我们将一起搭建一个重要的内容模块——机构介绍。它就像您机构的“电子宣传册”，可以让家长在首页快速了解您的品牌亮点，并能点击“查看更多”跳转到详细的“关于我们”页面，全面展示您机构的实力和优势。

---

第一部分：规划您的“电子宣传册”（功能与原型）

一个好的“电子宣传册”应该有两个部分：一个在首页的精简版，和一个在独立页面的完整版。

• 精简版（在首页）：包含一个标题“机构介绍”、一句简洁的品牌简介，以及一个“查看更多”按钮。
• 完整版（在“关于我们”页面）：我们将在这里集中展示所有能体现您机构实力的内容，比如品牌故事、办学优势、师资团队、校区地址和联系方式等。

我们的目标是：当家长在首页看到精简版介绍，对您的机构产生兴趣后，可以点击“查看更多”按钮，无缝跳转到完整的“关于我们”页面，获取更全面的信息。

---

第二部分：搭建您的“关于我们”页面

有了后台数据，现在我们要做的就是将这些数据呈现在小程序的前台页面上。这就像是设计师已经为您准备好了所有装修材料，您现在要做的就是按照图纸，把它们摆放到正确的位置上。

1 创建API接口：连接前端与后台

为了让前端页面能够获取后台数据，我们需要在“数据资源”中创建一个API接口。这个接口就像一个数据搬运工，它知道如何从数据库中找到您需要的机构信息，并把它们安全地传递给前端页面。

操作步骤：

• 在您的微搭控制台，找到左侧的“资源连接”并点击。
• 选择“APIs”模块，点击“+”号，创建一个新的API。
• 将新API的名称设置为 获取机构信息，标识设置为 getOrgInfo。
• 在API的代码编辑区，复制粘贴以下代码。这段代码会去查询 institutions 表和 dance_advantages 表，然后把数据整合在一起，返回给前端。

/*** 获取机构信息API* 严格按照微搭官方文档的语法编写*/
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,};}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 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,businessHours: institution.business_hours,status: institution.status,},advantages: sortedAdvantages.map(advantage => ({id: advantage._id,title: advantage.title,description: advantage.description,sortOrder: advantage.sort_order,}))};return {code: 200,message: '获取机构信息成功',data: responseData,};} catch (error) {console.error('获取机构信息错误:', error);return {code: 500,message: '服务器内部错误',data: null,};}
};

2 页面搭建：调用API

现在我们有了数据源，可以开始在前端页面上进行“调用了。

操作步骤:

在应用编辑器中，点击创建页面的图标，创建“关于我们”页面。

在代码区，点击 “点击新建”，然后选择 “新建外部APIs查询”。

在弹出的窗口中，选择 API 类型，找到我们刚刚创建的 获取机构信息 这个API，并将其命名为 query1。设置触发方式为 “入参变化时自动执行”

---

3 页面搭建与数据绑定

现在，我们可以开始搭建布局与数据进行绑定了。

搭建机构简介

先点击右下角的代码编辑器，我们来设置公共样式

在style中输入我们的全局样式

:root {/* 主色调 */--primary-color: #FF6B9D;        /* 少儿舞蹈主题粉色 */--primary-light: #FFB3D1;        /* 浅粉色 */--primary-dark: #E91E63;         /* 深粉色 *//* 辅助色 */--success-color: #4CAF50;        /* 成功绿 */--warning-color: #FF9800;        /* 警告橙 */--error-color: #F44336;          /* 错误红 */--info-color: #2196F3;           /* 信息蓝 *//* 中性色 */--text-primary: #333333;         /* 主要文本 */--text-secondary: #666666;       /* 次要文本 */--text-disabled: #999999;        /* 禁用文本 */--border-color: #E5E5E5;         /* 边框色 */--background-color: #F8F9FA;     /* 背景色 *//* 字体大小 */--font-size-xs: 12px;            /* 超小字 */--font-size-sm: 14px;            /* 小字 */--font-size-base: 16px;          /* 正文 */--font-size-lg: 18px;            /* 次标题 */--font-size-xl: 20px;            /* 标题 */--font-size-xxl: 22px;           /* 主标题 *//* 间距 */--spacing-xs: 4px;               /* 超小间距 */--spacing-sm: 8px;               /* 小间距 */--spacing-base: 12px;            /* 基础间距 */--spacing-lg: 16px;              /* 中间距 */--spacing-xl: 24px;              /* 大间距 */--spacing-xxl: 32px;             /* 超大间距 *//* 圆角 */--border-radius-sm: 4px;--border-radius-base: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;/* 阴影 */--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);--shadow-base: 0 4px 8px rgba(0, 0, 0, 0.1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}/* ===== 重置样式 ===== */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;font-size: var(--font-size-base);color: var(--text-primary);background-color: var(--background-color);line-height: 1.5;
}

然后设置关于我们页面的默认样式

body {background: var(--background-color);margin: 0;padding-bottom: 60px;
}

先往页面中添加一个普通容器，设置组件样式

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

继续添加普通容器，设置样式

:root {background: white;border-radius: var(--border-radius-lg);padding: var(--spacing-xl);margin-bottom: var(--spacing-lg);text-align: center;box-shadow: var(--shadow-sm);
}

继续添加普通容器，输入样式

:root {width: 60px;height: 60px;border-radius: 50%;background: linear-gradient(135deg, var(--primary-color), var(--primary-light));display: flex;align-items: center;justify-content: center;margin: 0 auto var(--spacing-lg);font-size: 36px;color: white;font-weight: bold;
}

里边放置图标组件，选择自定义图标，从素材选择我们的LOGO

继续添加普通容器，里边添加文本组件

绑定文本内容，从API中绑定，绑定机构名称字段

设置样式

:root {font-size: var(--font-size-xl);font-weight: bold;color: var(--text-primary);margin-bottom: var(--spacing-sm);
}

继续添加文本组件

绑定文本内容，选择简介字段

设置样式

:root {color: var(--text-secondary);
}

---

大功告成！

点击右上角的“预览”，您会发现一个巨大的改变：您的“关于我们”页面不再是空白，而是有了一个可交互的、动态更新的机构信息模块。

通过今天的学习，您已经掌握了：

1. API创建：学会了如何通过API连接前端和后台数据。
2. 数据绑定：将后台数据准确无误地呈现在前端页面上。

在下一篇教程中，我们将继续讲解关于我们的页面搭建，敬请期待！