通过


新建 Teams 应用

了解如何使用 Visual Studio Code 和 Microsoft 365 代理工具包创建Microsoft Teams 应用。 本指南将指导你完成生成基本 Teams 应用、浏览其目录结构以及利用可用模板的过程。 无论是从简单的“Hello World”应用开始、构建应用以自动执行任务,还是跨 Microsoft 365 扩展 Teams 功能,本文都提供了帮助你入门的说明。

可以创建以下类型的 Teams 应用:

应用类型 定义
基本 Teams 应用 基本 Teams 应用包括 Teams 选项卡、机器人或消息扩展应用,你可以根据自己的要求创建和自定义这些应用。
Office 加载项 可以在 Outlook 和 Office.com 上安装和运行此组加载项。

使用 Visual Studio Code 创建新的 Teams 应用

对于所有类型的应用,创建新的 Teams 应用的过程都类似。 若要创建基本的 Teams 应用,请执行以下操作:

  1. 打开 Visual Studio Code

  2. 选择 “Microsoft 365 代理工具包>”“新建代理/应用> ”,选择“ Teams 代理和应用”。

    屏幕截图显示用于在代理工具包边栏中创建新代理或应用的选项。

  3. 选择“ 其他 Teams 功能”。

    屏幕截图显示了用于选择其他 Teams 功能的选项。

  4. 在此示例中,选择“ Tab” 作为应用功能。

    屏幕截图显示了用于选择要生成的应用功能的选项。

  5. 选择“ 默认文件夹 ”,将项目根文件夹存储在默认位置。

    屏幕截图显示用于选择项目工作区的默认位置的选项。

    若要更改默认位置,请执行以下步骤:

    1. 选择“ 浏览”。

    2. 选择项目工作区的位置。

      选择的文件夹是项目工作区的位置。

  6. 输入合适的名称(如 helloworld)作为应用程序名称。 确保仅使用字母数字字符。 按 Enter 键。

    屏幕截图显示了用于输入应用名称的字段。

    Teams 选项卡应用工作区在几秒钟内创建。

    屏幕截图显示已创建项目工作区。

不同应用类型的目录结构

代理工具包提供用于生成应用的所有组件。 创建项目工作区后,可以在 “资源管理器” 部分下查看项目文件夹和文件。


基本 Teams 应用的目录结构

以下示例显示了一个基本的 Teams 选项卡应用目录结构:

文件夹名 目录
.vscode 用于生成和调试 Teams 应用的 VS Code 设置。
appPackage 应用清单 (以前称为 Teams 应用清单) Teams 用于识别 Teams 应用的文件和图标文件。
env 存储不同的环境参数。
infra bicep Azure模板文件。 用于将 Teams 应用部署到Azure。
src 选项卡功能的源代码,包括前端应用、UI 组件和隐私声明、使用条款、
src/app.js 网站的应用程序入口点和 express 处理程序。
src/views/hello.html 绑定到选项卡终结点的 HTML 模板。
src/static Web 服务器可以提供静态资产,例如 CSS 和 JavaScript 文件。
m365agents.yml 此配置文件定义用于预配、部署和发布生命周期的 Agents Toolkit 行为。 可以自定义此文件以更改代理工具包在每个生命周期中的行为。
m365agents.local.yml 这将使用启用本地执行和调试的操作替代m365agents.yml。

注意

如果你有机器人或邮件扩展应用,则会将相关文件夹添加到目录结构中。

若要详细了解不同类型的基本 Teams 应用的目录结构,请参阅下表:

应用类型 链接
对于选项卡应用 使用 JavaScript 生成第一个选项卡应用
对于机器人应用 使用 JavaScript 生成第一个机器人应用
对于消息扩展应用 使用 JavaScript 生成第一个消息传递扩展应用

有关尝试生成应用的更多分步指南,请参阅 教程

另请参阅