通过

适用于 Microsoft Teams 的 SharePoint 框架解决方案部署选项

  • 项目

部署 SharePoint 框架 (SPFx) 解决方案以在 Microsoft Teams 中使用时，开发人员提供了多种选项。 本文介绍了 SharePoint Online 中支持的选项。

注意

在 2021 年 1 月之前，SharePoint Online 仅支持一个选项：当合格的 SPFx 解决方案上传到 SharePoint 租户应用目录时，将启用租户应用程序目录功能区中的“同步到 Teams”按钮。

SharePoint Online 支持两个选项，用于将 SPFx 解决方案部署到 Microsoft Teams 应用商店：

  1. 自动创建 Microsoft Teams 应用清单和程序包
  2. 使用开发人员提供的 Microsoft Teams 应用清单 & 包

自动创建 Microsoft Teams 应用清单和程序包

当你有一个要在 Microsoft Teams 中自动公开的简单实施方案时，此功能非常理想。

在此方案中，当上传 SPApp 解决方案到 SharePoint Online 租户应用程序目录时，如果解决方案包含 Microsoft Teams 的组件，将启用功能区中的“同步到 Teams”按钮。

同步到 Teams

此按钮将在 SharePoint Online 中启动以下流程：

  1. SharePoint 将动态创建 Microsoft Teams 应用清单文件
  2. SharePoint 将动态创建 Microsoft Teams 应用程序包
  3. SharePoint 将生成的 Microsoft Teams 应用包部署到租户的 Microsoft Teams 应用商店

SharePoint 创建应用清单时，它将使用 SPTx 解决方案中的值生成一些名称。 下表列出了 Microsoft Teams 应用清单文件的属性及其设置值。

注意

若要更详细了解应用清单，请参阅 Microsoft Teams 文档中的以下链接：用于 Microsoft Teams 的清单架构。

manifest.json 属性 SPFx 组件清单中的属性
packageName alias
id id
name.short preconfiguredEntries[0].title
description.short preconfiguredEntries[0].description
description.long preconfiguredEntries[0].description

注意

组件清单是从组件的清单中拉取的， (./src/webparts/.。/*.manifest.json) 。

如果 SPFx 解决方案包含多个指定用于 Microsoft Teams 的 Web 部件，SharePoint Online 将对每个部件重复上述过程。

注意

如果对生成的包结构感到好奇，可以使用以下 REST API 下载用于特定解决方案的包：

_api/web/tenantappcatalog/downloadteamssolution(id)/$value

id 是应用目录库中解决方案的数字标识符。

可以在应用目录的上下文中请求此 API，例如，使用 URL https://[yourtenant]].sharepoint.com/sites/appcatalog/_api/web/tenantappcatalog/downloadteamssolution(12)/$value。 API 调用将启动生成的清单包的下载过程。

开发人员提供的 Microsoft Teams 应用清单 & 包

需要对 Microsoft Teams 应用清单或应用包进行更多控制时，可以创建自己的包。 在这种情况下，当管理员选择“ 同步到 Teams ”按钮时，SharePoint Online 将在 *.sppkg 文件中查找以下文件： ./teams/TeamsSPFxApp.zip。

如果存在此文件，SharePoint Online 会将其部署到租户的 Microsoft Teams 应用商店，而不是动态创建该文件。 此选项使开发人员可以完全控制 Microsoft Teams 应用清单 & 应用包。

此选项非常适合以下方案：

  • 开发人员希望完全控制 Microsoft Teams 应用清单内容
  • 复杂的 Microsoft Teams 方案，例如指定自动程序、会议应用等
  • 当 SPFx 解决方案包含多个组件时，指定 Microsoft Teams 应用的 ID 和名称 & 说明。 例如，如果 SPFx 解决方案包含多个可在 Microsoft Teams 中用作选项卡的 Web 部件，则自动生成清单将选择两个组件之一用作 Microsoft Teams 的应用 ID 和名称 & 说明。

若要使用自己的 Microsoft Teams 应用程序清单 & 应用程序包，而不是让 SharePoint Online 动态创建它，请执行以下操作：

  1. 按 Microsoft Teams 文档创建 Microsoft Teams 应用清单：

    重要

    在 Teams 应用清单中，确保添加以下条目：

    "webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}

    这是确保从 Microsoft Teams 富客户端成功执行组件中的任何 API 调用所必需的。 teamSiteDomain将是 Teams 客户端使用的同一租户，这将无法跨租户/跨域工作，因此无法硬编码另一个域。

  2. 通过压缩 ./teams 文件夹的内容，创建名为 TeamsSPFxApp.zip 的 Microsoft Teams 应用包。

    重要

    不要压缩文件夹，而是压缩文件夹的内容。 如果压缩文件夹，它将是生成的 ZIP 文件的顶级子文件夹，该文件在 Microsoft Teams 中不是有效的应用包。

  3. 将 TeamsSPFxApp.zip 保存到 SPFx 解决方案的 ./teams 文件夹中。

  4. 使用与创建常规 SPFx 解决方案相同的方式创建 SPFx 包，即使用 gulp package-solution。 它将在 *.sppkg 中包含自定义 Microsoft Teams 应用包。

动态引用基础 SharePoint 网站 URL

Microsoft Teams 应用清单必须指向 SPFx 组件的已部署托管位置。 但是，创建 Microsoft Teams 应用清单或应用包时，这些 URL 仍为未知。

因此，在此部署选项中指定应用包时，您应使用以下字符串，这些字符串将在运行时由 Microsoft Teams 替换：

  • {teamSiteDomain}：部署和安装 SPUrl 解决方案处的 SharePoint Online 租户 URL
  • {teamSitePath}：用于安装 SPFx 组件的 SharePoint 网站的路径
  • {locale}：Microsoft Teams 客户端的当前区域设置

在自定义 Microsoft Teams 解决方案中使用 Web 部件时，可以使用这些字符串定义将加载该 Web 部件的页面 URL。 例如，使用下表作为指南，以创建 Microsoft Teams 应用中使用的 Web 部件的 URL：

重要

在下面的示例中，假设 SPFx 组件的 ID 为 {{SPFX_COMPONENT_ID}}。 请务必将此值替换为 Web 部件的组件 ID。 此值并非由 SharePoint 或 Microsoft Teams 动态设置：开发人员应当设置此值。

Microsoft Teams 组件 Microsoft Teams 应用清单属性 Microsoft Teams 应用清单属性
个人选项卡 staticTabs[..].contentUrl https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
频道/群组聊天选项卡 configurableTabs[..].configurationUrl https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}
消息传递扩展 composeExtensions.commands[..].taskInfo.url https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}