了解如何使用 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 应用,请执行以下操作:
打开 Visual Studio Code。
选择 “Microsoft 365 代理工具包>”“新建代理/应用> ”,选择“ Teams 代理和应用”。
选择“ 其他 Teams 功能”。
在此示例中,选择“ Tab” 作为应用功能。
选择“ 默认文件夹 ”,将项目根文件夹存储在默认位置。
若要更改默认位置,请执行以下步骤:
选择“ 浏览”。
选择项目工作区的位置。
选择的文件夹是项目工作区的位置。
输入合适的名称(如 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 生成第一个消息传递扩展应用 |
有关尝试生成应用的更多分步指南,请参阅 教程。