使用SharePoint 框架扩展 Outlook 和 Office

SharePoint 框架 (SPFx) v1.16 版本添加了对 Microsoft Teams JavaScript 客户端 SDK v2 的支持。 除了 Microsoft Teams 之外，Microsoft Teams JavaScript 客户端 SDK v2 还引入了使 Teams 应用能够在 Office 的 Outlook 中运行的功能。

通过 SPFx v1.16 中的这一改进，开发人员现在可以使用 SPFx 创建适用于 Outlook 和 Office 的应用，并利用 现有的 Microsoft Teams 应用创建支持。

重要

在 Outlook 和 Office 中运行 Microsoft Teams 应用的功能目前处于测试阶段，预计在 2023 年上半年提供。

重要

用户成功所需的基本信息

若要在 Outlook 和 Office 中使用 Microsoft Teams 应用（包括使用 SPFx 创建的应用）进行测试，必须为 目标版本配置 Microsoft 365 租户的发布首选项。 有关更改组织的发布首选项的详细信息，请参阅 设置标准或目标发布选项。

租户的发布首选项需要 5 个工作日才能生效。 换句话说，将租户从 标准发布 跟踪更改为当月 5 日 的目标发布 跟踪，你将无法在 Outlook 或 Office 中使用 SPFx 测试创建的 Microsoft Teams 应用，直到该月 11 日。

创建适用于 Outlook 和 Office 的 Microsoft Teams 应用

若要使用 SPFx for Outlook 和 Office 创建新的 Microsoft Teams 应用，请先使用适用于 SharePoint v1.16 或更高版本的 Yeoman 生成器创建新的 SPFx 项目，就像创建新的 Web 部件一样。 有关详细信息，请参阅 生成第一个 SharePoint 客户端 Web 部件。

Yeoman SharePoint 生成器将提示你一系列问题。 在回答这些问题时，请遵循创建新的 SPFx Web 部件的相同指南。

创建项目后，更新 Web 部件的 supportedHosts 属性以指示可以使用的位置。 例如，将 和/或 TeamsPersonalApp 添加到 TeamsTabsupportedHosts./config/package-solution.json 文件中的 属性。 有关详细信息，请参阅使用 SharePoint 框架 生成 Microsoft Teams 选项卡。

确定应用的当前运行时主机

出于各种原因，应用程序可能需要确定当前运行的位置。 例如，如果用户在 SharePoint、Microsoft Teams、Outlook 或其他 Office 客户端中运行，是否应看到一种体验？

在 Web 部件的 context 类和 Microsoft Teams JavaScript 客户端上使用 SPFx 的 属性来确定托管客户端。 app.host.name Teams JavaScript 客户端上的 属性包含主机的名称（如果是 Microsoft Teams、Outlook 或 Office）。 如果 Microsoft Teams 上下文对象为 undefined，则 Web 部件在 SharePoint 中运行。

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

创建 Microsoft Teams 应用清单 & 包

虽然 SharePoint Online 应用程序目录的“ 同步到 Teams ”按钮可以自动创建 Microsoft Teams 应用程序清单、应用包并将其安装在 Microsoft Teams 应用商店中，但这目前不支持所需的 Microsoft Teams 应用程序清单文件格式。 Teams 应用清单文件必须是 v1.13 或更高版本

另一个选项是自行手动创建应用程序清单和应用程序包，并将其包含在上传到应用程序目录的 SharePoint 包中。 在应用程序目录中选择“ 同步到 Teams ”按钮时，SharePoint Online 将使用你创建并包含在 SharePoint 包中的 Teams 应用包。

注意

有关手动创建 Microsoft Teams 应用清单和应用包的详细信息，请参阅 Microsoft Teams SharePoint 框架解决方案的部署选项

创建 Microsoft Teams 应用清单

第一步是创建 Microsoft Teams 应用清单。

1. 在 SPFx 项目中创建以下文件： ./teams/manifest.json。
2. 按照 Microsoft Teams：适用于 Teams 的应用清单架构和SharePoint 框架：Microsoft Teams SharePoint 框架解决方案的部署选项中的指南创建新的应用清单文件。
3. 请特别注意 manifest.json 文件中的以下属性：

   • manifestVersion：这必须设置为 1.13 或更高版本

   • staticTabs 和/或 configurableTabs：验证是否遵循有关将 SPFx Web 部件用作 Microsoft Teams 选项卡的指导。

     例如， contentUrl 属性以及引用 SPFx 组件的任何其他属性都应使用动态令牌 {teamSiteDomain}、 &{teamSitePath}{locale}。 它还应引用 SPFx 的组件 ID。

     提示

     有关这些属性的详细信息，请参阅SharePoint 框架：Microsoft Teams SharePoint 框架解决方案的部署选项，特别是动态引用基础 SharePoint 网站 URL 上的部分。

注意

若要详细了解 Microsoft Teams 应用清单文件，请参阅 Microsoft Teams：Teams 的应用清单架构。

创建 Microsoft Teams 应用包

创建 Microsoft Teams 应用清单后，需要手动创建应用包。 这将包含在 SharePoint 包中， (*.sppkg) 文件，该文件将上传到 SharePoint 租户的应用程序目录。

1. 压缩项目中 ./teams 文件夹的内容。
2. 将 ZIP 包重命名为 TeamsSPFxApp.zip。

重要

Microsoft Teams 应用包必须 TeamsSPFxApp.zip 命名并保存在 ./teams 文件夹中，此选项才能使用租户应用目录中的“ 同步到 Teams ”按钮。

部署基于 SPFx 的 Microsoft Teams 应用

创建应用包后，下一步是部署并安装它。

将应用部署到租户的应用目录。

然后，选择应用，从功能区中选择“ 文件 ”选项卡，然后选择“ 同步到 Teams ”按钮，将应用包部署到租户的 Microsoft Teams 应用商店。

注意

有关将 SharePoint 包打包&到 Microsoft Teams App Store的详细信息，请参阅SharePoint 框架：Microsoft Teams SharePoint 框架解决方案的部署选项。

将应用程序部署到 SharePoint 后，可以将其作为 Web 部件添加到 SharePoint 网站中的页面：

该应用还可以安装在 Microsoft Teams 中。 登录后，选择左侧垂直导航中的 “应用” 选项。

请注意，你的应用在 组织的“生成 ”部分下列出：

安装应用后，它将在左侧垂直导航中显示为固定的应用：

可以按照与在 Microsoft Teams 中执行操作相同的过程在 Outlook 中安装应用。

提示

有关详细信息，请参阅 React Teams 主管仪表板示例，了解使用 SPFx 创建适用于 Outlook 和 Office 的 Microsoft Teams 应用的工作示例。