SharePoint 框架 (SPFx) v1.8 版本引入了使用 SPFx Web 部件实现 Microsoft Teams 选项卡的功能。 使用 SharePoint 框架 可以简化 Microsoft Teams 应用开发，如使用 SharePoint 框架 生成 Microsoft Teams 中所述。
开发人员可以使用用于创建自定义选项卡的相同技术为 Microsoft Teams 会议创建应用。 本教程介绍如何使用 SPFx Web 部件实现自定义 Microsoft Teams 会议应用。
Microsoft Teams 会议应用必须支持 群聊 范围内的可配置选项卡。 这将启用 会议前 和 会后 聊天。 有关其他要求，请参阅以下文档： 为 Teams 会议创建应用：先决条件和注意事项
重要
本教程需要 SPFx v1.11 或更高版本。
创建 Microsoft Teams 选项卡项目
在常用位置上新建项目目录：
md teams-meeting-app转到项目目录：
cd teams-meeting-app通过运行 Yeoman SharePoint 框架生成器创建新的解决方案：
yo @microsoft/sharepoint出现提示时，请输入以下值（为下面省略的所有提示选择默认选项）：
- 解决方案名称是什么？：teams-meeting-app
- 是否要允许租户管理员选择能够立即将解决方案部署到所有网站的选项而无需运行任何网站中的部署或添加应用程序功能?：是
- 要创建哪种类型的客户端组件?：Web 部件
- Web 部件名称是什么？：MyFirstTeamsMeetingApp
- Web 部件说明是什么？：我的第一个 Microsoft Teams 会议应用
- 要使用哪种框架?：没有 JavaScript Web 框架
此时，Yeoman 会为项目创建文件夹 & 文件，然后安装所需的依赖项。
接下来，键入以下命令，在 Visual Studio Code 中打开 Web 部件项目：
code .
更新 Web 部件清单，使其可用于 Microsoft Teams
找到将用作会议应用解决方案选项卡的 Web 部件的 ./src/webparts/**/manifest.json 文件。 supportedHosts找到要包含 "TeamsTab"的属性：
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "..",
"alias": "MyFirstTeamsMeetingAppWebPart",
"componentType": "WebPart",
"version": "*",
//...
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
//...
}
更新代码以了解 Microsoft Teams 上下文
打开需要编辑的 src\webparts\helloWorld\MyFirstTeamsTabWebPart.ts，以便解决方案了解 Microsoft Teams 上下文（如果它被用作选项卡的话）。
更新
render()的方法如下所示。如果代码在 Microsoft Teams 中作为选项卡或在 SharePoint 中作为 Web 部件呈现，请注意我们是如何呈现不同相关内容的。 我们可以通过检查
this.context.sdks.microsoftTeams属性来检测解决方案是否由 Microsoft Teams 托管。public render(): void { let title: string = 'ERR: not in Microsoft Teams'; let subTitle: string = 'ERR: not in Microsoft Teams'; if (this.context.sdks.microsoftTeams) { if (this.context.sdks.microsoftTeams.context.meetingId) { title = "Welcome to Microsoft Teams!"; subTitle = "We are in the context of following meeting: " + this.context.sdks.microsoftTeams.context.meetingId; } else { title = "Welcome to Microsoft Teams!"; subTitle = "We are in the context of following team: " + this.context.sdks.microsoftTeams.context.teamName; } } this.domElement.innerHTML = ` <div class="${ styles.myFirstTeamsMeetingApp }"> <div class="${ styles.container }"> <div class="${ styles.row }"> <div class="${ styles.column }"> <span class="${ styles.title }">${title}</span> <p class="${ styles.subTitle }">${subTitle}</p> </div> </div> </div> </div>`; }
准备 Microsoft Teams 应用进行部署
在 Microsoft Teams 应用中使用 SPFx 解决方案时，必须将其部署到 SharePoint Online 和 Microsoft Teams。 有关部署选项的详细信息，请参阅 Microsoft Teams SharePoint 框架解决方案的部署选项。
会议应用需要 Microsoft Teams 应用程序清单文件中的详细信息，但不是由 SharePoint Online 自动创建的。 因此，必须使用 开发人员提供的 Microsoft Teams 应用清单 & 包 选项。
这意味着需要创建应用清单文件和应用包文件。
创建 Microsoft Teams 应用清单
创建新文件 ./teams/manifest.json。
将以下 JSON 添加到 文件：
{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"packageName": "{{SPFX_PACKAGE_NAME}}",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "1.0",
"developer": { .. },
"name": {
"short": "{{SPFX_COMPONENT_NAME}}"
},
"description": {
"short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
"full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
},
"icons": {
"outline": "{{SPFX_COMPONENT_ID}}_outline.png",
"color": "{{SPFX_COMPONENT_ID}}_color.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
"canUpdateConfiguration": false,
"scopes": [
"team",
"groupchat"
],
"context": [
"channelTab",
"privateChatTab",
"meetingSidePanel",
"meetingDetailsTab",
"meetingChatTab"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"resourceseng.blob.core.windows.net"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
创建基本 Teams 应用清单后，需要对其进行以下更改：
- 在 JSON 中查找值
{{SPFX_COMPONENT_*}}...需要更新这些值。 将 的{{SPFX_COMPONENT_ID}}多个实例设置为组件的 ID。 这在id./src/webparts/**/manifest.json 文件中的 属性中找到。 - 将
packageName属性替换为 Teams 应用的名称。 - 将
developer对象替换为 ./config/package-solution.json 文件中设置的相同对象和值。 - 将
name&description对象替换为实际值表示应用的名称和说明。
注意
有关 Microsoft Teams 应用清单中的属性的信息，请参阅 Microsoft Teams 的清单架构。
重要
不要替换 {teamSiteDomain} 应用清单文件中的字符串。 Microsoft Teams 在运行时将此占位符替换为租户的 SharePoint Online URL。
创建 Microsoft Teams 应用包
若要使 SPFx 解决方案在 Microsoft Teams 中可用，必须将其打包 & 部署到 SharePoint Online。
通过压缩 ./teams 文件夹的内容，创建名为 TeamsSPFxApp.zip 的 Microsoft Teams 应用包。
重要
不要压缩文件夹，而是压缩文件夹的内容。 如果压缩文件夹，它将在生成的 ZIP 文件中创建一个顶级子文件夹，该文件不是 Microsoft Teams 的有效应用包。
将 TeamsSPFxApp.zip 保存到 SPFx 解决方案的 ./src/teams 文件夹中。
打包并部署到 SharePoint Online
执行下列命令来构建捆绑解决方案。 这会将动态标签用作资产的主机 URL，从而执行项目的发布版本。
gulp bundle --ship执行下列任务来打包解决方案。 这会创建更新的 ./sharepoint/solution/*.sppkg 包。
gulp package-solution --ship接下来，将生成的包部署到租户应用程序目录。
转到租户的 SharePoint 应用程序目录。
将 ./sharepoint/solution/*.sppkg 上传或拖放到租户的应用程序目录。
这会部署客户端解决方案包。
确保选中“ 使此解决方案可用于组织中的所有站点 ”选项，以便 Microsoft Teams 可以使用 Web 部件。
选择“部署”。
此时，解决方案将部署到 SharePoint Online，并可供所有 SharePoint Online 网站使用。
将会议应用发布到 Microsoft Teams 应用商店
若要使会议应用在 Microsoft Teams 中可用，需要将解决方案与团队同步。
注意
在测试阶段，可以将会议应用旁加载到 Microsoft Teams，而不是将其部署到组织的应用商店。 为此，可以跳过此部分并跳转到 “测试会议应用 ”部分。
在 SharePoint 租户应用程序目录中选择包，然后在“文件”选项卡的功能区中选择“同步到 Teams”按钮。
SharePoint Online 将检测 *.sppkg 包中的TeamsSPFxApp.zip文件，并将其部署到 Microsoft Teams 应用商店，而不是自动创建应用程序清单和应用程序包。
确认你可以在右上角看到状态消息。
测试会议应用
最后一步是在 Microsoft Teams 中测试会议应用。 为此，你将创建一个不是频道会议并且至少有一个人受邀参加的会议：
打开 Microsoft Teams 桌面客户端。
使用左侧应用栏中的 “日历” 应用创建新会议。
邀请某人参加会议。
保存会议。
在 “日历” 应用中，打开你创建的测试会议。
选择 + 现有选项卡右侧的“ (加) ”按钮。
选择自定义会议应用
将应用安装到会议中后，当你返回到会议详细信息页时，你将看到该应用作为一个新选项卡。选项卡将在会议前/会议后体验中加载，如以下屏幕截图所示：
重要
目前，基于 SPFx 的 Teams 会议应用的会议内体验不起作用。 在会议期间，如果选择应用程序，会议应用程序将在选项卡中加载，但呈现 SharePoint Online 错误页面。
目前，由于 Microsoft Teams 中的限制将在 2021 年上半年解决。