通过

使用 Teams 工具包创建 Office 外接程序项目

  • 项目

开发 Teams 应用的主要工具是 Teams 工具包。 可以使用 Teams 工具包创建 Office 加载项。

使用 Teams 工具包创建的外接程序使用 Microsoft 365 的统一清单。

注意

Microsoft 365 的统一清单可用于生产 Outlook 加载项。它仅作为 Excel、PowerPoint 和 Word 加载项的预览版提供。

提示

还有另一个Visual Studio Code扩展，用于创建使用仅加载项清单的 Office 外接程序。 请参阅使用 Office 外接程序开发工具包创建 office 外接程序项目，以Visual Studio Code。

注意

在连接到 Microsoft 365 订阅版本 2304 (内部版本 16320.000000) 或更高版本的 Office web 版、新的 Outlook 和 Office on Windows 中，直接支持使用 Microsoft 365 统一清单的 Office 加载项。

当包含统一清单的应用包部署在 AppSource 或 Microsoft 365 管理 中心时，将从统一清单生成并存储仅外接程序清单。 此仅外接程序清单允许在不直接支持统一清单的平台上安装外接程序，包括 Mac 上的 Office、移动版 Office、Windows 上早于 2304 (内部版本 16320.00000) 的 Office 订阅版本，以及 Windows 上的 Office 永久版本。

按照安装 Teams 工具包中所述，将最新版本的 Teams 工具包安装到 Visual Studio Code。

重要

可以使用最新发布的 Teams 工具包版本创建 Outlook 加载项。 若要为 Excel、PowerPoint 或 Word 创建加载项，请安装预发行版，如安装预发行版中所述。 该工具包创建使用 Microsoft 365 统一清单的项目。 Excel、PowerPoint 和 Word 中对此清单的支持仅为预览版。

创建 Office 加载项项目

  1. 打开Visual Studio Code并选择活动栏中的“Teams 工具包”图标。

    Teams 工具包图标。

  2. 选择“ 创建新应用”。

  3. 此时会打开 “新建项目 ”下拉菜单。 列出的选项因 Teams 工具包版本而异。 选择 “Office 加载项”。

    “新建项目”下拉菜单中的选项。最后一个选项称为“Office 加载项”。

  4. 此时会打开 “使用 Office 加载项的应用功能 ”下拉菜单。 列出的选项因 Teams 工具包版本而异。 选择 “任务窗格”。

    “使用 Office 加载项的应用功能”下拉菜单中的选项。已选择“任务窗格”选项。

  5. 如果要创建 Outlook 加载项，工具包会显示 “编程语言 ”下拉菜单。 选择 “TypeScript ”或“ JavaScript”。 (对于 Excel、PowerPoint 和Word加载项，始终创建 TypeScript 项目。)

  6. 如果要创建 Outlook 加载项，工具包会显示 框架 下拉菜单。 选择“默认”或“React”。 (对于 Excel、PowerPoint 和 Word 加载项，始终创建默认项目。)

  7. 在打开的“ 工作区文件夹 ”对话框中，选择要在其中创建项目的文件夹。

  8. 提示时，为项目 (指定一个名称，) 没有空格。 Teams 工具包将使用基本文件和基架创建项目。 然后在第二个Visual Studio Code窗口中打开项目。 关闭原始Visual Studio Code窗口。

    注意

    生成的项目配置为可在 Excel、Outlook、PowerPoint 和 Word 上安装。 可以根据需要编辑清单和源文件，以更改支持的 Office 应用程序。

  9. 在Visual Studio Code终端导航到项目的根目录并运行 npm install。

  10. 安装完成后，验证是否可以从Visual Studio Code旁加载加载项。 旁加载的步骤因要测试加载项的 Office 应用程序而异。

Excel、PowerPoint 或 Word 中的旁加载

注意

本部分仅适用于在 Windows 计算机上开发加载项时。 如果你在 Mac 上工作，可以通过让 Microsoft 365 管理员在 Microsoft 365 管理 中心将外接程序部署为集成应用来测试加载项。

  1. 选择“查看 | Visual Studio Code中的运行”。 在 “运行和调试 ”下拉菜单中，选择以下选项之一：

    • Excel Desktop (Edge Chromium)
    • PowerPoint Desktop (Edge Chromium)
    • Word桌面 (Edge Chromium)

  2. 按 F5。 项目生成并打开节点开发服务器窗口。 此过程可能需要几分钟时间。 最终，所选 Office 应用程序的桌面版本将打开。

    注意

    如果这是您首次 (或一个多月) 首次旁加载 Office 加载项，则系统可能会提示删除旧证书和/或安装新证书。 同意这两个提示。

  3. “开始”功能区上将显示一个包含两个按钮的 Contoso 外接程序选项卡。 使用一个按钮在打开的 Office 文档中执行作。 使用另一个打开加载项的任务窗格。

    注意

    无论选择哪个按钮，都会显示 WebView 在加载时停止 提示。 选择“确定”。

  4. 若要停止调试并卸载加载项，请选择“在Visual Studio Code中运行 | 停止调试”。

Outlook 中的旁加载

  1. 确保你在 Microsoft 365 开发人员租户中的帐户也是桌面 Outlook 中的电子邮件帐户。 如果不是，请按照将 电子邮件帐户添加到 Outlook 中的指南进行作。

  2. 关闭 Outlook 桌面版。

  3. 在 Visual Studio Code 中，打开 Teams 工具包。

  4. 在 “帐户 ”部分中，验证是否已登录到 Microsoft 365。

  5. 选择“查看 | Visual Studio Code中的运行”。 在“运行和调试”下拉菜单中，选择“Outlook 桌面 (Edge Chromium) ”选项，然后按 F5。 项目生成并打开节点开发服务器窗口。 此过程可能需要几分钟时间，然后 Outlook 桌面将打开。

    注意

    如果这是您首次 (或一个多月) 首次旁加载 Office 加载项，则系统可能会提示删除旧证书和/或安装新证书。 同意这两个提示。

  6. 打开 Microsoft 365 帐户标识的收件箱并打开任何邮件。 如果在“主页”功能区 (或“邮件”功能区中打开了邮件，则“Contoso 外接程序”选项卡将在其自己的窗口中打开) ，

  7. 单击“ 显示任务窗格 ”按钮，任务窗格随即打开。 单击“ 执行作 ”按钮，邮件顶部附近会显示一条小通知。

    注意

    无论选择哪个按钮，都会显示 WebView 在加载时停止 提示。 选择“确定”。

  8. 若要停止调试并卸载加载项，请选择“在Visual Studio Code中运行 | 停止调试”。

开发项目

现在可以更改和开发项目。 在 Office 外接程序文档中的指南根据使用的清单类型进行分支的位置，请务必遵循统一清单的指南。