少儿舞蹈小程序从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. 数据绑定：将后台数据准确无误地呈现在前端页面上。

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