创建表格

2025-06-10

聊天、频道或会议中的选项卡的行为更类似于应用，因为每个应用只能将一个选项卡固定到左窗格，以便于访问。

重要

我们在 Visual Studio Code 中引入了 Microsoft 365 Agents Toolkit (以前称为 Teams 工具包) 扩展。此版本提供许多新的应用开发功能。建议使用代理工具包 v5 生成 Teams 应用。

确保已满足生成选项卡的所有先决条件。

注意

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

使用 JavaScript 创建选项卡

按照分步指南使用 JavaScript 生成选项卡应用。

我遇到了问题

向选项卡添加内容页

创建内容页并更新选项卡应用程序的现有文件：

使用以下标记在 Visual Studio Code 中创建一个新的 personal.html 文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>

将 personal.html 保存在应用程序公用文件夹中的以下位置：
```
./src/public/<yourDefaultTabNameTab>/personal.html
```
从 Visual Studio Code 中的以下位置打开manifest.json：
```
 ./src/manifest/manifest.json
```
将以下内容添加到空 staticTabs 数组 (staticTabs":[]) 并添加以下 JSON 对象：
```
{
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "scopes": ["personal"]
}
```
重要

路径组件 yourDefaultTabNameTab 是在 默认选项卡名称 的生成器中输入的值以及 Tab 一词。

例如：DefaultTabName 为 MyTab，然后为 /MyTabTab/
使用实际的选项卡名称更新 contentURL 路径组件 yourDefaultTabNameTab。
保存更新的 manifest.json 文件。
从以下路径打开Visual Studio Code中的Tab.ts，以在 iFrame 中提供内容页：
```
./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
```

将以下内容添加到 iFrame 修饰器列表：

 @PreventIframe("/<yourDefaultTabName Tab>/personal.html")

保存更新的文件。选项卡代码已经完成。

我遇到了问题

创建应用包

必须有一个应用包才能在 Teams 中生成和运行应用程序。应用包是通过验证 manifest.json 文件并在 ./package 目录中生成压缩文件夹的 gulp 任务创建的。在命令提示符处，使用命令 gulp manifest。

构建并运行应用程序

构建应用程序

在命令提示符处输入以下命令，将解决方案转译到 ./dist 文件夹中：

gulp build

运行应用程序

在命令提示符下，输入以下命令以启动本地 Web 服务器：
```
gulp serve
```
在浏览器中输入 http://localhost:3007/<yourDefaultAppNameTab>/ 以查看应用程序主页。
浏览 http://localhost:3007/<yourDefaultAppNameTab>/personal.html，查看选项卡。

我遇到了问题

建立到选项卡的安全隧道

在命令提示符处，退出 localhost 并输入以下命令，以建立到选项卡的安全隧道：

gulp ngrok-serve

通过 ngrok 将选项卡上传到 Microsoft Teams 并成功保存后，可以在 Teams 中查看它，直到隧道会话结束。

将应用程序上传到 Teams

转到 Teams，然后选择“ 应用 ”。
选择“ 管理应用>”“上传应用>上传自定义应用”。
转到项目目录，浏览到 ./package 文件夹，选择压缩文件夹，然后选择“ 打开 ”。
在对话框中选择“ 添加 ”。选项卡已上传到 Teams。
在 Teams 的左窗格中，选择省略号 ●●● ，然后选择已上传的应用以查看选项卡。

选项卡已成功创建并添加到 Teams 中。还可以在 Teams 中对选项卡进行重新排序。

我遇到了问题

使用 ASP.NET Core 创建选项卡

在命令提示符处，为选项卡项目创建新目录。
使用以下命令将示例存储库克隆到新目录中，也可以下载源代码并提取文件：
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

下面是创建选项卡的步骤：

使用选项卡生成应用程序
更新并运行应用程序
建立到选项卡的安全隧道
使用开发人员门户更新应用包
在 Teams 中预览应用

使用选项卡生成应用程序

打开 Visual Studio，然后选择“ 打开项目或解决方案 ”。
转到 Microsoft-Teams-Samples>samples>tab-personal>razor-csharp 文件夹并打开 PersonalTab.sln。
在 Visual Studio 中，选择 F5 或从应用程序的“调试”菜单中选择“开始调试”，以验证应用程序是否已正确加载。在浏览器中，转到以下 URL：
- <http://localhost:3978/>
- <http://localhost:3978/personalTab>
- <http://localhost:3978/privacy>
- <http://localhost:3978/tou>

查看源代码

Startup.cs

此项目是从 ASP.NET Core 3.1 Web 应用程序空模板创建的，在设置时选中了“高级 - 配置 HTTPS”复选框。 MVC 服务通过依赖注入框架 ConfigureServices() 的方法注册。此外，默认情况下，空模板不支持提供静态内容，因此使用以下代码将静态文件中间件添加到 Configure() 方法：

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

wwwroot 文件夹

在 ASP.NET Core 中，Web 根文件夹是应用程序查找静态文件的位置。

Index.cshtml

ASP.NET Core 将名为“索引”的文件视为网站的默认或主页。当浏览器 URL 指向站点的根目录时， Index.cshtml 将显示为应用程序的主页。

AppManifest 文件夹

此文件夹包含以下必需的应用包文件：

一个全色图标，尺寸为 192 x 192 像素。
一个透明轮廓图标，尺寸为 32 x 32 像素。
一个 manifest.json 指定应用属性的文件。

这些文件必须压缩在应用包中，以便将选项卡上传到 Teams。 Teams 加载 contentUrl 清单中指定的，将其 <嵌入 iframe> 中，并在选项卡中呈现它。

.csproj

在 Visual Studio 解决方案资源管理器中，右键单击项目，然后选择“ 编辑项目文件 ”。在文件末尾，可以看到以下代码，用于在应用程序构建时创建和更新压缩文件夹：

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

我遇到了问题

更新并运行应用程序

打开 Visual Studio 解决方案资源管理器，转到“ 共享 > 页面 ”文件夹，打开 _Layout.cshtml 并将以下内容添加到 <head> 标记部分：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

在 Visual Studio 解决方案资源管理器中，从 Pages 文件夹打开 PersonalTab.cshtml 并添加microsoftTeams.app.initialize()<script>标记。
选择“保存”。
在 Visual Studio 中，选择 F5 或从应用程序的“ 调试 ”菜单中选择“ 开始调试 ”。

我遇到了问题

建立到选项卡的安全隧道

在项目目录根目录中的命令提示符下，运行以下命令，建立到选项卡的安全隧道：

ngrok http 3978 --host-header=localhost

使用“开发人员门户”更新应用包

转到“ 开发人员门户 ”。
打开“ 应用 ”并选择“ 导入引用 ”。
应用包文件名为 tab.zip ，且在路径中 /bin/Debug/netcoreapp3.1/tab.zip 可用。
在“开发人员门户”中选择 tab.zip 并将其打开。
在“基本信息”部分创建并填充默认应用 ID。
在“说明”中添加应用的短和长说明。
在“开发人员信息”中，添加所需详细信息，并在网站 (必须是有效的 HTTPS URL) 中提供 ngrok HTTPS URL。
在 “应用 URL”中，将“隐私策略”更新为 https://<yourngrokurl>/privacyhttps://<yourngrokurl>/tou 和“使用条款”，然后选择“ 保存”。
在“应用功能”中，选择“个人应用>”“创建你的第一个个人应用”选项卡，然后输入名称并使用更新内容 URLhttps://<yourngrokurl>/personalTab。将“网站 URL”字段留空，从下拉列表中选择“ 上下文 ”作为“个人选项卡”，然后选择“ 确认”。
选择“保存”。
在“域”部分中，选项卡中的域必须包含没有 HTTPS 前缀 <yourngrokurl>.ngrok.io 的 ngrok URL。

我遇到了问题

在 Teams 中预览应用

从开发人员门户工具栏中选择“ 在 Teams 中预览 ”，开发人员门户会通知你自定义应用已成功上传。应用的“ 添加 ”页将显示在 Teams 中。
选择“ 添加 ”以加载 Teams 中的选项卡。选项卡此时在 Teams 中可用。

选项卡已成功创建并添加到 Teams 中。还可以在 Teams 中对选项卡进行重新排序。

使用 ASP.NET Core MVC 创建选项卡

在命令提示符处，为选项卡项目创建新目录。
使用以下命令将示例存储库克隆到新目录中，也可以下载源代码并提取文件：
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

下面是创建选项卡的步骤：

使用选项卡生成应用程序
更新和运行应用程序
建立到选项卡的安全隧道
使用开发人员门户更新应用包
在 Teams 中预览应用

使用选项卡生成应用程序

打开 Visual Studio，然后选择“ 打开项目或解决方案 ”。
转到 Microsoft-Teams-Samples>samples>tab-personal>mvc-csharp 文件夹，并在 Visual Studio 中打开 PersonalTabMVC.sln。
在 Visual Studio 中，选择 F5 或从应用程序的“调试”菜单中选择“开始调试”，以验证应用程序是否已正确加载。在浏览器中，转到以下 URL：
- <http://localhost:3978>
- <http://localhost:3978/personalTab>
- <http://localhost:3978/privacy>
- <http://localhost:3978/tou>

查看源代码

Startup.cs

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

wwwroot 文件夹

在 ASP.NET Core 中，Web 根文件夹是应用程序查找静态文件的位置。

AppManifest 文件夹

此文件夹包含以下必需的应用包文件：

一个全色图标，尺寸为 192 x 192 像素。
一个透明轮廓图标，尺寸为 32 x 32 像素。
一个 manifest.json 指定应用属性的文件。

这些文件必须压缩在应用包中，以便将选项卡上传到 Teams。 Teams 加载 contentUrl 清单中指定的，将其嵌入 iFrame 中，并将其呈现在选项卡中。

.csproj

在 Visual Studio 解决方案资源管理器中，右键单击项目，然后选择“编辑项目文件”。在文件末尾，会看到以下代码，用于在应用程序构建时创建和更新压缩文件夹：

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

模型

当用户在 PersonalTab 视图中选择按钮时，PersonalTab.cs 会显示从 PersonalTabController 调用的消息对象和方法。

视图

这些视图是 ASP.NET Core MVC 中的不同视图：

主页：ASP.NET Core 将名为“ 索引 ”的文件视为网站的默认或主页。当浏览器 URL 指向站点的根目录时， Index.cshtml 将显示为应用程序的主页。
共享：部分视图标记 _Layout.cshtml 包含应用程序的整体页面结构和共享的视觉元素。它还引用 Teams 库。

控制器

控制器使用该 ViewBag 属性动态地将值传输到“视图”。

我遇到了问题

更新并运行应用程序

打开 Visual Studio 解决方案资源管理器，转到 “ 视图 ”>“ 共享 ”文件夹，打开 _Layout.cshtml，并将以下内容添加到 <head> 标记部分：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

在 Visual Studio 解决方案资源管理器中，从 Views>PersonalTab 文件夹打开 PersonalTab.cshtml，并在microsoftTeams.app.initialize()标记中添加。<script>
选择“保存”。
在 Visual Studio 中，选择 F5 或从应用程序的“ 调试 ”菜单中选择“ 开始调试 ”。

我遇到了问题

建立到选项卡的安全隧道

在项目目录根目录中的命令提示符下，运行以下命令，建立到选项卡的安全隧道：

ngrok http 3978 --host-header=localhost

使用“开发人员门户”更新应用包

转到“ 开发人员门户 ”。
打开“ 应用 ”并选择“ 导入引用 ”。
应用包的名称是 tab.zip。它可在以下路径中使用：
```
/bin/Debug/netcoreapp3.1/tab.zip
```
选择 tab.zip 并在开发人员门户中将其打开。
在“基本信息”部分创建并填充默认应用 ID。
在“说明”中添加应用的短和长说明。
在 “开发人员信息”中，添加所需的详细信息，并在 “网站 (必须是有效的 HTTPS URL) 提供 ngrok HTTPS URL。
在 “应用 URL”中，将“隐私策略”更新为 https://<yourngrokurl>/privacyhttps://<yourngrokurl>/tou 和“使用条款”，然后选择“ 保存”。
在“应用功能”中，选择“个人应用>”“创建你的第一个个人应用”选项卡，然后输入名称并使用更新内容 URLhttps://<yourngrokurl>/personalTab。将“网站 URL”字段留空，从下拉列表中选择“ 上下文 ”作为“个人选项卡”，然后选择“ 确认”。
选择“保存”。
在“域”部分中，选项卡中的域必须包含没有 HTTPS 前缀 <yourngrokurl>.ngrok.io 的 ngrok URL。

我遇到了问题

在 Teams 中预览应用

从开发人员门户工具栏中选择“ 在 Teams 中预览 ”，开发人员门户会通知你自定义应用已成功上传。应用的“ 添加 ”页将显示在 Teams 中。
选择“ 添加 ”以加载 Teams 上的选项卡。选项卡此时在 Teams 中可用。

选项卡已成功创建并添加到 Teams 中。还可以在 Teams 中对选项卡进行重新排序。

Blazor 允许使用 C# 而不是 JavaScript 生成交互式 Web UI。可以使用 Blazor 和最新版本的 Visual Studio 创建选项卡应用和机器人应用。

Blazor 应用的屏幕截图，显示分步 Blazor 指南成功完成后选项卡、机器人和消息扩展输出。

注意

代理工具包不支持消息扩展功能。

下面是生成和部署应用所需的工具列表。

	安装	用于使用...
Required
	Visual Studio 版本 17.2.0 预览版 2.1	选择Visual Studio Enterprise 2022 预览版 (版本 17.2.0 预览版 2.1) 。
	Microsoft Teams	Microsoft Teams，在一个位置通过聊天、会议和通话应用与你合作的每个人进行协作。
	Microsoft Edge（推荐）或 Google Chrome	包含开发人员工具的浏览器。

准备开发环境

安装所需的工具后，设置开发环境。

安装代理工具包

代理工具包使用工具为应用预配和部署云资源、发布到 Teams 应用商店等，帮助简化开发过程。可以将代理工具包与 Visual Studio 配合使用，或用作代理工具包命令行接口。

最新版本的 Visual Studio
命令行

可以使用最新版本的 Visual Studio 在 .NET 中使用 Blazor Server 开发 Teams 应用。

若要安装 Agents Toolkit 扩展，请执行以下作：

下载最新版本的 Visual Studio。
从下载文件夹打开 Visual Studio 安装程序文件 (.exe) 。
在“Visual Studio 安装程序”页中选择“继续”以配置安装。
在“ 工作负荷”下，选择“ ASP.NET 和 Web 开发”。
在 “安装详细信息”下，选择“ Microsoft 365 代理工具包”。
选择“安装”。

Visual Studio 在几分钟内安装完毕。

我遇到了问题

若要安装 Microsoft 365 代理工具包 CLI (以前称为 TeamsFx CLI) ，请使用 npm 包管理器：

npm install -g @microsoft/teamsfx-cli

根据配置，可能需要使用 sudo 来安装 CLI：

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

这种情况在 Linux 和 macOS 系统上更为常见。

确保将 npm 全局缓存添加到 PATH。此步骤通常作为 Node.js 安装程序的一部分完成。

可以将 CLI 与 atk' command. Verify that the command is working by running atk -h'配合使用。

警告

在 PowerShell 终端中运行 TeamsFx 之前，必须为 PowerShell 启用远程签名的执行策略。

我遇到了问题

设置 Teams 开发租户

租户类似于 Teams 中组织的空间或容器，可在其中聊天、共享文件和运行会议。此空间也是上传和测试自定义应用的位置。让我们验证是否已准备好使用租户进行开发。

启用自定义应用上传

创建应用后，必须在 Teams 中加载应用，而无需分发它。此过程称为自定义应用上传。登录到 Microsoft 365 帐户以查看此选项。

是否已拥有租户和管理员访问权限？我们来检查，如果你真的这样做了！

若要验证是否可以在 Teams 中上传自定义应用，请执行以下作：

在 Teams 客户端中，选择“ 应用”。
选择“管理应用”。
选择 “上传应用”。如果看到 “上传自定义应用 ”选项，则自定义应用上传已启用。

注意

如果找不到上传自定义应用的选项，请与 Teams 管理员联系。

创建免费的 Teams 开发人员租户 (可选)

如果没有 Teams 开发人员帐户，可以免费获取它。加入 Microsoft 365 开发人员计划！

转到 Microsoft 365 开发人员计划。
选择“ 立即加入 ”，然后按照屏幕上的说明进行作。
在欢迎屏幕中，选择“ 设置 E5 订阅”。
设置管理员帐户。完成后，将显示以下屏幕。
使用刚刚设置的管理员帐户登录到 Teams。验证是否已在 Teams 中 “上传自定义应用 ”选项。

获取免费的 Azure 帐户

如果要在 Azure 中托管应用或访问资源，则必须拥有 Azure 订阅。在开始之前创建一个免费帐户。

现在，你已获得所有工具并设置帐户。接下来，让我们设置开发环境并开始生成！

为选项卡应用创建项目工作区

通过创建第一个应用开始 Teams 应用开发。此应用使用选项卡功能。

Blazor 应用的屏幕截图，显示分步 Blazor 指南成功完成后选项卡应用的最终输出。

本教程将指导你完成使用 .NET/Blazor 创建、运行和部署第一个 Teams 应用的步骤。

在本页中，你将了解：

如何使用 Agents Toolkit 设置新的选项卡项目
关于应用的目录结构

创建选项卡项目

使用代理工具包创建第一个选项卡项目。该工具包将引导你完成一系列页面，以创建和配置 Teams 应用项目：

创建新项目 页：可以选择项目类型。
配置新项目 页：可以输入项目详细信息。
创建新的 Teams 应用程序 页：可以选择 Teams 应用功能。

创建选项卡项目工作区

打开最新版本的 Visual Studio。
选择 “创建新项目”。

此时会显示 “创建新项目 ”页。
选择项目类型和详细信息：
1. 从模板下拉列表中搜索 Microsoft 365 。
2. 选择 “Microsoft 365 代理 ”作为模板。
3. 选择 下一步。
  
  此时会显示 “配置新项目 ”页。
配置新项目详细信息：
1. 为项目输入合适的名称。
  
  注意
  
  可以注意到，输入的项目名称也会自动填充为 解决方案名称 。如果需要，可以更改解决方案名称，而不会影响项目名称。
2. 选择要在其中创建项目工作区的文件夹路径。
3. 如果需要，请输入其他解决方案名称。
4. 如果需要，请检查选项以将项目和解决方案保存在同一文件夹中。在本教程中，不需要此选项。
5. 选择“创建”。
  
  此时会显示 “创建新的 Teams 应用程序 ”页。
选择 Teams 应用功能：
1. 选择 “选项卡” 作为应用的功能。
2. 选择“创建”。
Teams 选项卡应用在几秒钟内创建。

快速回顾如何创建 Teams 选项卡应用。
观看此简短回顾，了解如何创建 Teams 选项卡应用。

我遇到了问题

了解 Teams 选项卡应用的源代码

创建项目后，你已拥有用于生成基本选项卡应用的组件。可以在 Visual Studio 的“解决方案资源管理器”窗格中查看项目目录结构。

解决方案资源管理器的屏幕截图，其中显示了用于生成基本个人应用的组件。

Agents Toolkit 根据所选功能为项目创建基架。在其他文件中，Agents Toolkit 维护：

文件夹名	目录
应用图标	应用图标在 `color.png` 和 `outline.png`中存储为 PNG 文件。
`manifest.json`	用于通过 Teams 开发人员门户发布的应用清单存储在中 `Properties/manifest.json`。
`BackendController.cs`	中 `Controllers/BackendController.cs` 提供了一个后端控制器来帮助进行身份验证。
`Pages/Tab.razor`	用于通过 Teams 开发人员门户发布的应用清单存储在中 `Properties/manifest.json`。
`TeamsFx.cs` 和 `JS/src/index.js`	该内容用于初始化与 Teams 主机的通信。

可以通过向应用程序添加其他 ASP.NET Core控制器来添加后端功能。

生成并运行第一个 Teams 选项卡应用

使用代理工具包设置项目工作区后，生成选项卡项目。

若要生成并运行应用，请执行以下作：

选择 “项目>Microsoft 365 代理工具包>”，选择“Microsoft 365 帐户”。
选择Microsoft 365 帐户或 添加帐户 以登录。
选择 “调试>”“开始调试 ”或选择 “F5 ”以在调试模式下运行应用。
了解在调试器中本地运行应用时会发生什么情况。

选择 F5 时，代理工具包：
1. 向 Microsoft Entra ID 注册应用程序。
2. 注册应用程序以在 Teams 中上传。
3. 启动本地运行的应用程序后端。
4. 启动本地托管的应用程序前端。
5. 在 Web 浏览器中启动 Teams，命令指示 Teams 上传自定义应用， (应用程序清单) 注册 URL。
如果需要，请安装自签名 SSL 证书进行本地调试。

Teams 在 Web 浏览器中加载。
选择“添加”。
选择“ 打开 ”以在个人范围内打开应用。

恭喜，你的第一个选项卡应用正在本地环境中运行！
浏览页面以查看用户详细信息。
选择“ 授权 ”以允许你的应用使用 Microsoft Graph 检索用户详细信息。

应用请求授予用于显示用户详细信息的权限。
选择“ 接受 ”以允许应用访问用户详细信息。

你的照片和详细信息将显示在 “个人”选项卡中。

可以执行常规调试活动，例如设置断点，就像它是任何其他 Web 应用程序一样。该应用支持热重新加载。如果更改项目中的任何文件，页面将重新加载。

了解如何排查应用未在本地运行的问题。

若要在 Teams 中运行应用，需要一个允许上传自定义应用的 Microsoft 365 开发帐户。可以在先决条件部分了解详细信息。
在 Visual Studio 中停止调试。

我遇到了问题

预览你的第一个 Teams 选项卡应用

你已了解如何使用选项卡功能创建、生成和运行 Teams 应用。以下最后步骤是在 Azure 上部署应用，并在 Teams 中预览，请按照以下步骤作：

在云中预配选项卡应用
将选项卡应用部署到云
在 Teams 中预览选项卡应用

让我们使用代理工具包在 Azure 上部署具有选项卡功能的第一个应用。

在云中预配选项卡应用

在云中选择“项目>Microsoft 365 代理工具包>预配”。
在“ 预配 ”对话框中输入订阅和资源组详细信息：
1. 从“订阅名称”下拉列表中选择 订阅名称 。
2. 从“资源组”下拉列表中选择 资源组 ，或选择“ 新建 ”以添加为应用生成的资源组。
3. 如果创建了新资源组，请选择 “区域”。
4. 选择“ 预配”。
显示预配警告。
选择“ 预配”。

资源组在云中预配需要几分钟时间。
预配完成后，选择“ 确定”。
选择“查看预配的资源”以查看Azure 门户。
在登录提示符下登录到 Azure 门户帐户。

此时会显示你的 app-dev-rg。

资源在Azure 门户中预配！

我遇到了问题

将选项卡应用部署到云

选择 “项目>Microsoft 365 代理工具包>部署到云”。
选择“确定”。

选项卡应用已成功部署到云！

在 Teams 中预览选项卡应用

在Teams 中选择“项目>Microsoft 365 代理工具包>预览版”。

Teams 在 Web 浏览器中加载。
选择“添加”。
选择“ 打开 ”以在个人范围内打开应用。

恭喜，你的第一个选项卡应用正在 Azure 环境中运行！

浏览页面以查看用户详细信息。
选择“ 授权 ”以允许你的应用使用 Microsoft Graph 检索用户详细信息。

应用请求授予用于显示用户详细信息的权限。
选择“ 接受 ”以允许应用访问用户详细信息。

你的照片和详细信息将显示在 “个人”选项卡中。

我遇到了问题

恭喜

你已完成使用 Blazor 生成选项卡应用的教程。

重新排序选项卡

从清单版本 1.7 开始，开发人员可以重新排列其个人应用中的所有选项卡。可以移动 机器人聊天 选项卡，该选项卡始终默认为个人应用选项卡标题中的第一个位置。声明了两个保留选项卡 entityId 关键字，即“ 对话 ”和“ 相关内容 ”。

如果创建具有个人范围的机器人，则默认显示在个人应用的第一个选项卡位置。如果要将其移动到另一个位置，则必须使用保留的关键字“ 对话 ”将静态选项卡对象添加到清单。对话选项卡显示在 Web 和桌面上，具体取决于在数组中添加staticTabs对话选项卡的位置。


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

注意

在移动版中，选项卡按中的 staticTabs定义重新排序。

此属性还可用于设置应用的默认登陆功能。可以将应用配置为默认情况下以选项卡或机器人的形式打开。有关详细信息，请参阅配置默认登陆功能。

将静态选项卡扩展到群组聊天、频道和会议

注意

若要将静态选项卡扩展到群组聊天、频道和会议，请使用应用清单 v1.16 或更高版本。

可以将静态选项卡扩展到群组聊天、频道和会议。你可以构建行为更类似于应用的选项卡，而不是固定应用内容，因为每个应用只能固定一个选项卡，例如，固定单个 YouTube 应用选项卡。

若要将静态选项卡扩展到群组聊天、频道和会议，请使用属性中的 staticTabs 和 context 参数更新应用清单scopes。在清单中声明多个静态选项卡并在通道范围内添加应用时，只会显示清单中列出的第一个选项卡。

下面是应用清单的示例，其中定义了在 Teams 中的所有范围和上下文中有效的静态选项卡：

"staticTabs": [ 
  { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal", 
       "groupChat", 
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
],

如果未在应用清单中定义上下文，则默认情况下，Teams 会考虑以下上下文：

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

启用个人选项卡应用以调用扩展性

可以创建与公用电话交换网集成的个人范围应用， (PSTN) 和 Teams 到 Teams 呼叫。使用正确的范围和上下文来构建利用选项卡类型、静态范围、个人上下文和会议侧面板的应用。

有关详细信息，请参阅用于调用的生成选项卡。

在聊天或会议中自定义静态选项卡

若要在聊天、频道或会议中自定义静态选项卡体验，可以使用选项卡中的 setConfig API 更新 contentUrl 和 websiteUrl。下面是一个示例：

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

只有 contentUrl 和 websiteUrl 更改才支持 setConfig，静态选项卡不能更改其他属性。

脱机选项卡

注意

Android 设备的 Teams 仅支持具有脱机功能的个人选项卡。

可以创建一个可在没有 Internet 连接的情况下在 Teams 中工作的个人选项卡。脱机选项卡有利于在网络覆盖较差或无网络覆盖地区工作的用户，例如现场代理或一线工作人员。用户可以在脱机选项卡中执行以下任务：

通过可包含图像和视频的表单记录数据。
查看以前提交的请求、事件或表单的详细信息。

当用户的设备重新连接到 Internet 时，选项卡会自动将本地存储的数据与 Azure Blob 存储同步。此作可确保在中央存储中更新用户所做的所有脱机更改，从而在整个组织内保持数据一致性。

显示脱机选项卡在 Teams 移动客户端中的工作原理的图形。

生成脱机选项卡

在开始生成脱机选项卡之前，请确保满足生成个人选项卡的先决条件。

创建 Azure Blob 存储。请确保记下帐户和容器名称以供以后使用。
克隆 Microsoft Teams 示例存储库。
在克隆的存储库中，转到示例>选项卡支持脱机>nodejs，并在 Visual Studio Code 中打开文件夹。
在“资源管理器”下，转到服务器>blobStoreOperations.js，并将和 {{ container-Name }} 替换为 {{ account-Name }} Azure Blob 存储帐户和容器的值。
选择 F5 键以调试应用。生成完成后，Teams 将在浏览器窗口中打开。
如果出现提示，请使用 Microsoft 365 帐户登录。
打开对话框时选择“ 添加 ”，以便将选项卡应用添加到 Teams。

恭喜！已成功创建具有脱机功能的 Teams 选项卡。

我遇到了问题

Teams 移动版中选项卡的最佳做法

若要了解如何在 Teams Android 和 iOS 客户端中优化选项卡的性能，请参阅 Teams 移动版的最佳做法。

代码示例

示例名称	Description	.NET	Node.js	清单
选项卡个人	此示例演示了如何使用 ASP.NET Core MVC 来增强用户交互，为 Microsoft Teams 开发自定义个人选项卡。	View	View	View
脱机个人选项卡	此示例应用演示了一个 CRUD 应用程序，该应用程序在 Microsoft Teams 中脱机运行，允许用户在没有 Internet 连接的情况下管理数据，并在重新连接时自动与 Blob 存储同步。	不适用	View	View

后续步骤

创建频道或组选项卡

通过

创建表格

使用 JavaScript 创建选项卡

向选项卡添加内容页

创建应用包

构建并运行应用程序

构建应用程序

运行应用程序

建立到选项卡的安全隧道

将应用程序上传到 Teams

使用 ASP.NET Core 创建选项卡

使用选项卡生成应用程序

Startup.cs

wwwroot 文件夹

Index.cshtml

AppManifest 文件夹

.csproj

更新并运行应用程序

建立到选项卡的安全隧道

使用“开发人员门户”更新应用包

在 Teams 中预览应用

使用 ASP.NET Core MVC 创建选项卡

使用选项卡生成应用程序

Startup.cs

wwwroot 文件夹

AppManifest 文件夹

.csproj

模型

视图

控制器

更新并运行应用程序

建立到选项卡的安全隧道

使用“开发人员门户”更新应用包

在 Teams 中预览应用

准备开发环境

安装代理工具包

设置 Teams 开发租户

启用自定义应用上传

创建免费的 Teams 开发人员租户 (可选)

获取免费的 Azure 帐户

为选项卡应用创建项目工作区

创建选项卡项目

了解 Teams 选项卡应用的源代码

生成并运行第一个 Teams 选项卡应用

预览你的第一个 Teams 选项卡应用

在云中预配选项卡应用

将选项卡应用部署到云

在 Teams 中预览选项卡应用

恭喜

重新排序选项卡

将静态选项卡扩展到群组聊天、频道和会议

启用个人选项卡应用以调用扩展性

在聊天或会议中自定义静态选项卡

脱机选项卡

生成脱机选项卡

Teams 移动版中选项卡的最佳做法

代码示例

后续步骤

另请参阅

其他资源