使用 SharePoint 框架生成 Microsoft Teams 选项卡

项目
03/21/2023

从 SharePoint 框架 v1.8 开始，可以使用SharePoint 框架工具为 Microsoft Teams 生成选项卡，并将 SharePoint 用作解决方案的主机。作为 SharePoint 框架 v1.10 的一部分，还可以将解决方案发布为 Microsoft Teams 个人应用。

使用 SharePoint 框架作为 Microsoft Teams 选项卡的平台的好处包括：

开发模型类似于 SharePoint 框架 Web 部件
任何 Web 部件都可以在 Microsoft Teams 中作为选项卡或个人应用公开
用于在租户中将自定义选项卡公开为 Web 部件和选项卡的不同范围选项
选项卡将在特定团队背后的基础 SharePoint 站点的上下文中执行。这意味着你可以利用 Web 部件中任何特定于 SharePoint 的 API 或功能。

开发流程

只需使用 SharePoint 框架 1.8 或更高版本的包即可开始开发 Microsoft Teams 选项卡。入门的高级步骤如下：

注意

请参阅使用 SharePoint 框架 - 教程从“生成 Microsoft Teams”选项卡开始的详细步骤，其中包含必须遵循的其他重要详细信息。

使用客户端 Web 部件创建SharePoint 框架解决方案
将添加到 "TeamsTab"supportedHosts Web 部件清单的属性，以将其用作通道中的选项卡：
```
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
```
将添加到 "TeamsPersonalApp"supportedHosts Web 部件清单的属性以将其用作个人应用：
```
"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],
```
使用租户范围的部署选项将 Web 部件部署到 SharePoint 应用程序目录
激活已部署的SharePoint 框架解决方案，然后在应用程序目录中选择“同步到 Teams”按钮

部署选项

有多个选项可用于部署 Microsoft Teams 选项卡或作为个人应用。由于 SharePoint 和 Microsoft Teams 都有自己的应用程序目录，因此部署需要对这两个服务进行操作。新功能的可见性可以通过部署步骤进行控制。

租户部署

可以使用应用程序目录功能区中的“ 与 Teams 同步 ”按钮，该按钮会自动创建 Microsoft Teams 应用清单、应用包并将其安装在 Microsoft Teams 应用商店中。这会使你的解决方案可供租户和 Microsoft Teams 团队中的所有用户使用。

开发人员还可以定义 Microsoft Teams 应用清单和应用包的内容。有关部署选项，请参阅 Microsoft Teams SharePoint 框架解决方案的部署选项。

备用部署选项

还有一种部署解决方案的另一种方法，例如，允许你仅向租户中的一个特定团队提供解决方案。

以正常方式生成SharePoint 框架解决方案：
```
gulp bundle --ship
gulp package-solution --ship
```
在项目文件夹中找到 ./teams 文件夹：
按照 Microsoft Teams SharePoint 框架解决方案的部署选项中所述，将 Microsoft Teams 应用包添加到 ./teams 文件夹。
将解决方案添加到应用目录，并确保在选择“部署”之前选择“使此解决方案可供组织中的所有站点使用”选项。

在 Teams 中旁加载外部应用

通过在应用启动器中选择 “Teams ”，移动到 Microsoft Teams 实例：
选择要用于测试该功能的团队，然后从...菜单中选择“管理团队”：
移动到“ 应用 ”选项卡。
从右下角选择 “上传自定义应用 ”。

注意

如果此设置不可用，则在使用的租户中未启用旁加载。再次检查租户管理员 UI 中的设置。
上传之前从新创建的解决方案下的 ./teams 文件夹中创建的 Microsoft Teams 应用清单文件，并确保它在应用列表中正确可见。请注意自定义映像的可见方式，以及解决方案的说明：
移动到团队中上传解决方案的频道。在下图中，请注意我们已激活 Team 中的常规频道
选择 +，在频道上添加一个新选项卡。
在列表中选择名为 “MyFirstTeamTab” 的自定义选项卡：
请注意，如何使用 Web 部件上公开的属性自定义选项卡实例。选择“ 保存”：

检测 Web 部件是否在 Teams 上下文中

Web 部件中的页面上下文包含对 Teams JavaScript SDK 的引用，以便在 Web 部件呈现为选项卡时轻松访问 Teams 上下文。

this.context.sdks.microsoftTeams.teamsJs.app.getContext()

注意

有关 Microsoft Teams 选项卡上下文的详细信息，请参阅 Microsoft Teams 开发文档。

重要

随着时间的推移，使用 SPFx API 获取 Microsoft Teams 上下文的过程发生了几次变化。例如，你可能熟悉将返回 Microsoft Teams 上下文的以下属性：

this.context.microsoftTeams属性在 SharePoint 框架 v1.10 版本中已弃用。
this.context.sdks.microsoftTeams属性在 SharePoint 框架 v1.16 版本中已弃用。

要使用的 Teams JavaScript 客户端 SDK 版本？

SharePoint 框架在上下文的 API 中使用 sdks.microsoftTeams.teamsJs.app.getContext() 方法提供对 Teams JavaScript 客户端 SDK 实例和上下文的访问权限。

使用此 API 可确保加载和初始化受支持的 Teams JavaScript 客户端 SDK 版本。

需要记住的一些详细信息：

不支持安装和初始化 Teams JavaScript 客户端 SDK 的自定义版本。这适用于任何 SPFx 组件，包括 Web 部件、扩展、自适应卡和库。
尽管 Teams JavaScript 客户端 SDK 类型与解决方案中使用的 SPFx 版本相关联，但加载到租户的实际版本可能有所不同。我们保证我们的向后兼容性。例如，使用 SPFx 1.14 构建的解决方案将具有 Teams JavaScript 客户端 SDK v1.10.0 中的类型，而 SPFx v1.15.2 将具有来自 Teams JavaScript 客户端 SDK v1.12.1 的类型，但 Teams JavaScript 客户端的实际加载版本可以是 v2.1.0。