使用 SPFx 生成你的第一个应用
SharePoint 框架 (SPFx) 是一种开发模型，用于为 Microsoft Teams 和 SharePoint 构建客户端解决方案。 SPFx Teams 应用托管在 Microsoft 365 上。 它为开发和托管客户端 SPFx 解决方案提供完全支持。 可以将SharePoint 框架解决方案与：
- SharePoint 数据和扩展 Microsoft Teams。
- 使用Microsoft Entra ID保护的业务 API。
对于本教程，请通过生成具有选项卡功能的第一个应用，使用 SPFx 启动 Microsoft Teams 应用开发。
注意
目前，Teams 工具包仅提供具有Visual Studio Code和SharePoint 框架的 Teams 应用中的 Tab 功能。 机器人和消息扩展功能不可用。
先决条件
下面是生成和部署应用所需的工具列表。
| 安装 | 用于使用... | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript 或 TypeScript，生成环境。 使用最新版本。 | |
| Teams 工具包 | Microsoft Visual Studio Code扩展，用于为应用创建项目基架。 使用 Teams 工具包 v5。 | |
| Node.js | 后端 JavaScript 运行时环境。 有关详细信息，请参阅 项目类型的Node.js 版本兼容性表。 | |
| Microsoft Edge（推荐）或 Google Chrome | 包含开发人员工具的浏览器。 | |
| 可选 | ||
| Microsoft Graph 浏览器 | Microsoft Graph 资源管理器是一种基于浏览器的工具，可用于从 Microsoft Graph 数据运行查询。 | |
| Teams 开发人员门户 | 基于 Web 的门户，用于配置、管理和分发 Teams 应用，包括到组织或 Microsoft Teams 应用商店。 |
提示
如果你使用 Microsoft Graph 数据，则应了解 Microsoft Graph 资源管理器并将其加入书签。 使用此基于浏览器的工具可以在应用外部查询 Microsoft Graph。
准备开发环境
安装所需的工具后，设置开发环境。
安装 Teams 工具包
Microsoft Teams 工具包通过为应用预配和部署云资源以及发布到 Teams 应用商店的工具，帮助简化开发过程。
可以将 Teams 工具包与Visual Studio Code或名为 TeamsFx CLI 的命令行界面配合使用。
打开Visual Studio Code并选择“扩展 (Ctrl+Shift+X”或“查看>扩展) ”。
在搜索框中，输入 Teams 工具包。
选择“安装”。
Teams 工具包
图标显示在Visual Studio Code活动栏中。
还可以从 Visual Studio Code 市场安装 Teams 工具包。
设置 Teams 开发租户
租户是 Teams 中组织的空间或容器，可在其中聊天、共享文件和运行会议。 此空间也是上传和测试应用的位置。 让我们验证是否已准备好使用租户进行开发。
检查上传应用选项
创建自定义应用后，必须使用“上传自定义应用”选项将 应用上传到 Teams。 如果启用此选项，请登录到 Microsoft 365 帐户以检查。
以下步骤可帮助你验证是否可以在 Teams 中上传应用：
在 Teams 客户端中，选择“ 应用” 图标。
选择“管理应用”。
选择 “上传应用”。
查找“ 上传自定义应用”选项。 如果选项可见，则可以上传自定义应用。
注意
如果找不到上传自定义应用的选项，请与 Teams 管理员联系。
创建免费的 Teams 开发人员租户 (可选)
如果没有 Teams 开发人员帐户，请加入 Microsoft 365 开发人员计划。
选择“ 立即加入 ”，然后按照屏幕上的说明进行操作。
在欢迎屏幕中，选择“ 设置 E5 订阅”。
设置管理员帐户。 完成后，将显示以下屏幕：
使用刚刚设置的管理员帐户登录到 Teams。 验证在 Teams 中是否具有 “上传自定义应用 ”选项。
SharePoint 集合网站管理员帐户
确保拥有 SharePoint 网站集的管理员帐户。 部署时需要此帐户进行托管。 如果你使用的是 Microsoft 365 开发人员计划租户，则可以使用当时创建的管理员帐户。
现在，你已获得所有工具并设置帐户。 接下来，让我们设置开发环境并开始生成！
为选项卡应用创建项目工作区
本教程指导你完成使用 SharePoint 框架 SPFx 创建、生成和部署 Teams 应用的步骤。 此应用将具有选项卡功能。
在本教程中，你将了解：
重要
在开始创建项目工作区之前，请确保未登录到任何 Microsoft 365 或 Azure 帐户。
创建项目
如果先决条件已到位，让我们开始吧！
打开 Visual Studio Code。
选择“Visual Studio Code活动栏中的 Teams 工具包
”图标。选择“ 创建新应用”。
选择 “选项卡”。
选择“ SPFx”。
选择“ 创建新的 SPFx 解决方案”。
选择用于 基架的选项。
在“框架”部分选择“React”。
选择 Enter 接受默认 Web 部件名称。
通过选择所需的文件夹，选择 工作区 文件夹。
为应用输入合适的 应用程序名称 。 按 Enter 键。
创建应用后，Teams 工具包会显示以下消息：
选择“ 本地调试” 以预览项目。
Teams 工具包调用 Yeoman CLI 来搭建 Teams 应用的基架，并在过程中安装所需的依赖项。
搭建基架需要几分钟时间。
快速回顾如何创建 Teams 应用。
浏览源代码
创建项目后，你将拥有用于生成基本个人应用的组件。 可以在 Visual Studio Code 的“资源管理器”区域中查看项目目录和文件。
工具包在选项卡功能的项目目录中为你创建基架。
在此目录中的其他项中，Teams 工具包包含：
- appPackage：包含应用图标
color.png和outline.png。 manifest.local.json：包含用于本地调试的应用清单。manifest.json：包含用于发布到 Teams 开发人员门户的应用清单。.vscode/Settings.json：创建项目时选择的设置。
选择 SPFx Web 部件项目时，以下文件与 UI 相关：
SPFx/src/webparts/{webpart}：包含 SPFx Web 部件。.vscode/launch.json：描述调试面板中提供的调试配置。
生成选项卡应用
使用 Teams 工具包设置项目工作区后，生成选项卡项目。 你需要登录到 Microsoft 365 帐户。
在本页中，你将了解如何 生成和运行第一个应用。
登录到 Microsoft 365 帐户
使用 Microsoft 365 帐户登录到 Teams。 如果你使用的是 Microsoft 365 开发人员计划租户，则注册时设置的管理员帐户是你的 Microsoft 365 帐户。
打开 Visual Studio Code。
选择边栏中的“Teams 工具包”
图标。选择“ 登录到 M365”。
此时会打开默认 Web 浏览器，以便登录帐户。
使用凭据登录到 Microsoft 365 帐户。
出现提示时关闭浏览器，并返回到Visual Studio Code。
返回到 Visual Studio Code 内的 Teams 工具包。
边栏的 “帐户 ”部分显示你的 Microsoft 365 帐户名称。
现在，你已准备好生成应用并在本地运行它！
在 Visual Studio Code 本地生成和运行应用
若要在本地构建和运行应用，请执行：
从Visual Studio Code边栏中选择“运行和调试”
图标。选择以下选项之一来运行和调试应用。
Teams 工作台 (Edge)
Teams 工作台 (Chrome)
选择播放按钮或选择 F5 键以开始调试。
注意
首次运行应用时，将下载所有依赖项并生成应用。 生成完成后，浏览器窗口会自动打开并加载 SharePoint Workbench。 此过程可能需要几分钟才能完成。
如果需要，工具包可能会提示你安装本地证书。 此证书允许 Teams 从
https://localhost。出现以下对话框时，选择“ 是 ”：
Teams Web 客户端将在浏览器窗口中打开。
当系统提示将自定义应用上传到本地计算机上的 Teams 时，选择“ 添加 ”。
如果系统要求切换到 Teams 桌面，请选择 Web 应用版本。 可以在标准 Web 开发环境中查看 HTML、CSS 和 JavaScript 代码。
如果在 Teams 中上传自定义应用之前，系统提示你加载调试脚本，请选择“ 加载调试脚本”。
恭喜，你的第一个应用正在 Teams 上运行！
你的应用现在应正在运行。 可以将应用调试为任何其他 SPFx Web 部件 (例如设置断点) 。
提示
尝试在 的呈现方法 SPFx/src/webparts/{webpart}/{webpart}.ts 中放置断点并重新加载浏览器窗口。 Visual Studio Code将在代码中的断点上停止。
了解使用 Local Workbench 调试应用时会发生什么情况。
本地工作台是在 Visual Studio Code 中运行和调试应用的默认选项。 对于本教程，建议选择使用 Teams 工作台调试应用，但可以选择“本地工作台”来浏览 Web 部件布局。
注意
此界面仅用于探索 Web 部件在移动设备或平板电脑中的显示方式。 你需要编写代码以将它们包含在应用中，然后部署它来查看它们。
若要使用本地工作台浏览 Web 部件布局，请执行以下操作：
选择“ 本地工作台”，然后选择 “F5 ”以运行和调试应用。
SharePoint Web 部件 Workbench 将在浏览器中打开，以便添加、编辑和删除 Web 部件。
选择 第一列 + 图标中的“添加 Web 部件 ”以添加 Web 部件。
从菜单中选择 Web 部件。
选择 “添加新分区 + 图标”，为 Web 部件选择列布局。
使用此接口可以尝试 Web 部件的不同布局：
- 查看布局的 Web 部件数据 。
- 尝试在不同的布局、文本、颜色等之间进行更改。
- 使用 “预览 ”按钮查看 Web 部件。
- 在不同的 移动设备 或 平板电脑 设备中查看 Web 部件布局。
- 保存或放弃布局中的任何更改，以继续尝试可能的布局。
准备就绪后，关闭浏览器窗口以停止本地工作台调试。
部署第一个 Teams 应用
你已了解如何使用 Tab 功能创建、生成和运行 Teams 应用。 最后一步是部署应用。
让我们使用 Teams 工具包在 SharePoint 上部署第一个具有 Tab 功能的应用程序。
在本页中，你将了解如何：
将应用部署到 SharePoint
确保部署中存在 SharePoint 应用程序目录。 如果不存在， 请创建一个。 创建应用目录最多可能需要 15 分钟。
打开 Visual Studio Code。
通过选择 Teams 图标，从边栏中选择 Teams 工具包。
在“生命周期”下选择“预配”。
工具包更新右下角的进度。 几秒钟后，可以看到以下通知：
预配完成后，选择“生命周期”下的“部署”。
应用程序包已生成并上传到 SharePoint 网站。 Teams 工具包显示一条消息，其中包含保存应用包的本地路径。
生成包后，Teams 工具包会显示一条消息，其中包含已上传应用包的 SharePoint 网站的 URL。
可以发布到 Teams，也可以选择 SharePoint 网站。
- 发布到 Teams (#publish-to-teams)
- 选择 SharePoint 网站的链接 (#select-the-sharepoint-site)
发布到 Teams
选择 “发布到 Teams”。
选择“管理员门户”。
选择“ 管理应用” ，然后在搜索部分中搜索你的应用以选择你的应用。
选择“ 发布 ”以在 Teams 中发布应用。
打开 Teams 应用程序 (或在) 登录
https://teams.microsoft.com。选择边栏上的三点，然后选择“ 所有应用”。
应用显示在 为组织生成的“应用” 类别中。 可以从该处添加应用。
选择你的应用，然后选择“ 添加”。
祝贺你！ 你的应用现已添加到 Teams。
选择 SharePoint 网站的链接
选择 SharePoint 网站的链接。
SharePoint 网站随即打开“应用”主页。 按照过程在 SharePoint 上 分发应用程序 。
在 SharePoint 上分发应用程序包
可以在 SharePoint 网站中找到上传的应用程序包。 若要分发应用并将其同步到 Teams，请执行以下操作：
选择 “分发 SharePoint 应用”。
此时会打开“SharePoint 应用程序”主页。 此页中列出了你的应用。
选择“ 文件 ”选项卡。
选择部署的包，然后选择“ 同步到 Teams”。
注意
同步到 Teams 过程可能需要几分钟时间。 你将在浏览器中看到一条消息，指示应用已成功同步到 Teams。
打开 Teams 应用程序 (或在) 登录
https://teams.microsoft.com。选择边栏上的三点，然后选择“ 所有应用”。
该应用将放置在 为组织生成的“应用” 类别中。 可以从该处添加应用。
选择你的应用，然后选择“ 添加”。
祝贺你！ 你的应用现已添加到 Teams。
你有关于此部分的问题？ 如果有，请向我们提供反馈，以便我们对此部分作出改进。
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈