创建内容页

项目
03/07/2024

内容页是在 Microsoft Teams 客户端中呈现的基本级别网页，开发人员可在其中添加选项卡的内容。它允许你在 Teams 客户端中无缝集成 Web 内容，从而为用户创建一个更沉浸式且更具吸引力的环境。例如，可以使用内容页来显示自定义数据、集成第三方服务或创建更个性化的用户体验。创建以下任一选项卡都需要内容页：

个人范围的自定义选项卡：在这种情况下，内容页是用户遇到的第一页。
频道或群组自定义选项卡：在用户固定并在适当的上下文中配置选项卡后，显示内容页。
对话框：可以创建内容页并将其作为 Web 视图嵌入到对话中， (TeamsJS v1.x) 中称为任务模块。页面呈现在模式弹出窗口内。

如果需要在频道、组或个人范围内添加选项卡，请在选项卡中显示 HTML 内容页。对于静态选项卡，内容 URL 直接在应用清单中设置。

本文专门介绍如何将内容页用作选项卡;但是，无论内容页如何呈现给用户，此处的大多数指南都适用。

注意

本主题反映 Microsoft Teams JavaScript 客户端库版本 2.0.x (TeamsJS) 。如果使用的是早期版本，请参阅 TeamsJS 库概述，获取有关最新 TeamsJS 与早期版本之间的差异的指导。

选项卡内容和设计指南

选项卡的总体目标是提供对具有实际价值和明确用途的有意义且引人入胜的内容的访问权限。

你需要专注于使选项卡设计简洁、导航直观和内容沉浸式。有关详细信息，请参阅选项卡设计指南和 Microsoft Teams 应用商店验证指南。

将代码与 Teams 集成

若要在 Teams 中显示页面，需要在代码中包含 Microsoft Teams JavaScript 客户端库 (TeamsJS) ，并在页面加载后调用 app.initialize() 。

注意

由于缓存，任何内容或 UI 更改都需要近 24-48 小时才能反映在选项卡应用中。

以下代码是页面和 Teams 客户端通信方式的示例：

TeamsJS v2
TeamsJS v1

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    await microsoftTeams.app.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    microsoftTeams.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

有关如何创建内容页并将其添加到个人选项卡的详细信息，请参阅将内容页添加到个人选项卡。

下图显示了 HTML 内容页的配置以及选项卡中的内容页的输出：

内容页配置

Web 中的输出

屏幕截图显示 Web 中内容页的输出。

选项卡中的输出

屏幕截图显示团队选项卡中的内容页的输出。

访问其他内容

可以通过使用 TeamsJS 与 Teams 交互、创建深层链接、使用对话框以及验证数组中 validDomains 是否包含 URL 域来访问其他内容。

使用 TeamsJS 与 Teams 交互： Microsoft Teams JavaScript 客户端库提供了更多在开发内容页面时有用的函数。
深层链接：可以在 Teams 中创建指向实体的深层链接。它们用于创建导航到选项卡中的内容和信息的链接。有关详细信息，请参阅在 Teams 中创建指向内容和功能的深层链接。
对话框：对话框是可从选项卡触发的模式弹出体验。使用内容页中的对话框显示表单以收集其他信息、显示列表中项的详细信息或向用户提供其他信息。对话框本身可以是其他内容页，也可以是完全使用自适应卡片创建的。有关详细信息，请参阅在选项卡中使用对话框。
有效域：确保选项卡中使用的所有 URL 域都包含在应用清单的validDomains数组中。有关详细信息，请参阅 validDomains。

注意

选项卡的核心功能存在于 Teams 内，而不是 Teams 外部。

显示本机加载指示器

可以配置本机加载指示器并将其显示给选项卡。可以从清单架构 v1.7 开始提供本机加载指示器。例如，选项卡内容页、配置页、删除页和选项卡中的对话框。

注意

移动客户端上的行为无法通过本机加载指示器属性进行配置。移动客户端默认跨内容页和基于 iframe 的对话框显示此指示器。移动设备上的此指示器将在发出内容提取请求时显示，并在请求完成后立即关闭。

如果在应用清单中指示 showLoadingIndicator : true ，则所有选项卡配置、内容、删除页和所有基于 iframe 的对话框都必须执行以下步骤：

使用以下步骤显示本机加载指示器：

添加到 "showLoadingIndicator": true 应用清单。
调用 app.initialize();。
调用 app.notifySuccess() 所有基于 iframe 的内容，以通知 Teams 你的应用已成功加载。如果适用，Teams 会隐藏加载指示器。如果未 notifySuccess 在 30 秒内调用，Teams 会假定你的应用已超时，并显示错误屏幕，其中包含重试选项。对于应用更新，此步骤适用于已配置的选项卡。如果不执行此步骤，则会为现有用户显示错误屏幕。 [必需]
如果已准备好打印到屏幕，并希望延迟加载应用程序的其余内容，可以通过调用 app.notifyAppLoaded();来手动隐藏加载指示器。 [可选]
如果应用程序未加载，可以调用 app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"}); 以告知 Teams 有关失败的信息。当前 message 未使用属性，因此失败消息不会出现在 UI 中，并且向用户显示一个泛型错误屏幕。以下代码显示了定义应用程序加载失败的可能原因的枚举：
```
/* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}
```

后续步骤

创建配置页