练习 - 生成 Microsoft Teams 选项卡应用

  • 10 分钟

在本单元中，你将使用 Teams Toolkit for Visual Studio Code 扩展为 Microsoft Teams 创建选项卡应用。

注意

本模块中的练习使用 Teams 工具包 v5.0.0。

创建 Teams 选项卡应用

  1. 打开 Visual Studio Code。

  2. 在边栏中，选择 “Microsoft Teams ”图标以打开 “TEAMS 工具包” 面板。

  3. 选择“ 创建新应用”，然后选择“ Tab”。

    显示用于在 Visual Studio Code 中创建新 Teams 应用的选择的屏幕截图。

  4. 从可用选项列表中选择 “基本选项卡 ”。

    显示 Visual Studio Code 中应用选项卡类型的选择的屏幕截图。

  5. 对于编程语言，请选择“ JavaScript”。

  6. 在 “工作区文件夹 ”菜单上，选择“ 默认文件夹”。 Teams 工具包会将项目搭建到此文件夹。

  7. 对于 “应用程序名称”，输入 CustomerTicketingTool。

    显示用于在 Visual Studio Code 中输入应用程序名称的框的屏幕截图。

    当所有文件夹和文件成功搭建基架时，将显示通知。

成功搭建项目基架后，Visual Studio Code 的新实例将打开到新项目。

显示已成功搭建基架的项目中的文件和文件夹的屏幕截图。

在 “资源管理器” 面板中， src 文件夹包含应用的源代码。 src 文件夹下的所有文件夹都特定于浏览器代码，并充当前端应用的入口点。 src 文件夹外部的文件与服务器相关，例如机器人。

测试和调试 Teams 选项卡应用

  1. 在 Visual Studio Code 中，选择 Microsoft Teams 图标以打开 TEAMS 工具包 面板。

    显示 Visual Studio Code 中打开的 Teams 工具包扩展的屏幕截图。

    此处有多个部分。 若要调试选项卡，你将重点介绍 “帐户 ”和“ 环境 ”部分。

  2. 在 “帐户 ”部分中，选择“ 登录到 Azure”。 在打开的对话框中，选择“ 登录 ”按钮并输入 Microsoft 365 凭据。

    Teams 工具包需要具有全局管理员权限的 Microsoft 365 工作或学校帐户。

  3. 使用以下方法之一通过附加的调试器开始运行应用：

    • 按 F5 键。
    • 在 Visual Studio Code 中，选择 “运行>开始调试”。
    • 在 Teams 工具包的“ 环境 ”部分中，打开 本地 文件夹，然后选择所选的浏览器。

  4. Visual Studio Code 执行一些检查后，在“ 控制台 ”选项卡上可以看到操作后，将打开一个新的浏览器窗口。 在 “CustomerTicketingTool ”对话框中，选择“ 添加 ”按钮以在 Teams 中安装应用预览版。

    显示用于将应用添加到 Microsoft Teams 的按钮的屏幕截图。

    CustomerTicketingTool 应用现在可在边栏上查看。 该应用预配置了两个选项卡： “个人”选项卡 和“ 关于”。

    显示成功创建个人选项卡的屏幕截图。

你已成功将个人选项卡添加到 Teams。

“自定义 Teams”选项卡

现在，你可以自定义个人选项卡上的文本。

  1. 打开 src>views 文件夹，然后打开 hello.html 文件。
  2. 搜索“Hello， World”文本并将其更改为“恭喜”。

显示用于更改选项卡文本的文件的屏幕截图。

若要查看 Teams 上的更改，请返回到运行调试器会话的浏览器。 无需刷新浏览器来查看对代码所做的更改。 “个人”选项卡上的文本现在显示“恭喜”。

显示个人选项卡上已更改文本的屏幕截图。

适用于 Visual Studio Code 的 Teams 工具包提供热重载功能，该功能在应用仍在运行时应用更改。