目录
- 前言
- 第一部分：规划您的"电子宣传册"（功能与原型）
- 第二部分：搭建您的"关于我们"页面
-
- [1 创建API接口：连接前端与后台](#1 创建API接口：连接前端与后台)
- [2 页面搭建：调用API](#2 页面搭建：调用API)
- [3 页面搭建与数据绑定](#3 页面搭建与数据绑定)
- 大功告成！
前言
尊敬的校长，您好！
恭喜您，通过前四篇教程的学习，您的小程序首页已经拥有了专业的轮播图和功能齐全的"金刚区"导航。
现在，我们要开始为这个小程序注入真正的"灵魂"，让它不再是静止的图片，而是能够根据您的运营需要灵活展示内容、并且可以跳转到不同页面的"活"系统。
今天，我们将一起搭建一个重要的内容模块------机构介绍。它就像您机构的"电子宣传册"，可以让家长在首页快速了解您的品牌亮点，并能点击"查看更多"跳转到详细的"关于我们"页面，全面展示您机构的实力和优势。
第一部分：规划您的"电子宣传册"（功能与原型）
一个好的"电子宣传册"应该有两个部分：一个在首页的精简版 ，和一个在独立页面的完整版。
- 精简版（在首页）：包含一个标题"机构介绍"、一句简洁的品牌简介，以及一个"查看更多"按钮。
- 完整版（在"关于我们"页面）：我们将在这里集中展示所有能体现您机构实力的内容，比如品牌故事、办学优势、师资团队、校区地址和联系方式等。
我们的目标是：当家长在首页看到精简版介绍，对您的机构产生兴趣后，可以点击"查看更多"按钮，无缝跳转到完整的"关于我们"页面，获取更全面的信息。
第二部分：搭建您的"关于我们"页面
有了后台数据，现在我们要做的就是将这些数据呈现在小程序的前台页面上。这就像是设计师已经为您准备好了所有装修材料，您现在要做的就是按照图纸，把它们摆放到正确的位置上。
1 创建API接口：连接前端与后台
为了让前端页面能够获取后台数据，我们需要在"数据资源"中创建一个API接口。这个接口就像一个数据搬运工，它知道如何从数据库中找到您需要的机构信息，并把它们安全地传递给前端页面。
操作步骤：
- 在您的微搭控制台，找到左侧的"资源连接"并点击。
- 选择"APIs "模块，点击"+"号，创建一个新的API。
- 将新API的名称设置为
获取机构信息，标识设置为getOrgInfo。 - 在API的代码编辑区，复制粘贴以下代码。这段代码会去查询
institutions表和dance_advantages表，然后把数据整合在一起，返回给前端。
javascript
/**
* 获取机构信息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中输入我们的全局样式
bash
: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;
}然后设置关于我们页面的默认样式
bash
body {
background: var(--background-color);
margin: 0;
padding-bottom: 60px;
}先往页面中添加一个普通容器，设置组件样式
bash
:root {
padding: var(--spacing-lg);
}继续添加普通容器，设置样式
bash
: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);
}继续添加普通容器，输入样式
bash
: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中绑定，绑定机构名称字段
设置样式
bash
:root {
font-size: var(--font-size-xl);
font-weight: bold;
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
}继续添加文本组件
绑定文本内容，选择简介字段
设置样式
bash
:root {
color: var(--text-secondary);
}大功告成！
点击右上角的"预览 "，您会发现一个巨大的改变：您的"关于我们"页面不再是空白，而是有了一个可交互的、动态更新的机构信息模块。
通过今天的学习，您已经掌握了：
- API创建：学会了如何通过API连接前端和后台数据。
- 数据绑定：将后台数据准确无误地呈现在前端页面上。
在下一篇教程中，我们将继续讲解关于我们的页面搭建，敬请期待！