生成首个 PowerPoint 任务加载项

  • 项目

本文将逐步介绍如何生成 PowerPoint 任务窗格加载项。

创建加载项

可以使用适用于 Office 加载项的 Yeoman 生成器或 Visual Studio 创建 Office 加载项。 Yeoman 生成器将创建一个可通过 Visual Studio Code 或任何其他编辑器管理的 Node.js 项目，而 Visual Studio 将创建一个 Visual Studio 解决方案。 选择适合于想要使用的方法的选项卡，然后按照说明创建加载项并在本地测试。

先决条件

注意

如果不熟悉 Node.js 或 npm，请首先设置开发环境。

  • Node.js（最新LTS 版本）。

  • 最新版本的 Yeoman 和适用于 Office 加载项的 Yeoman 生成器。若要全局安装这些工具，请从命令提示符处运行以下命令。

    npm install -g yo generator-office

    注意

    即便先前已安装了 Yeoman 生成器，我们还是建议你通过 npm 将包更新为最新版本。

创建加载项项目

运行以下命令，使用 Yeoman 生成器创建加载项项目。

yo office

注意

运行该yo office命令时，可能会收到有关 Yeoman 和 Office 加载项 CLI 工具的数据收集策略的提示。 根据你的需要，使用提供的信息来响应提示。

出现提示时，请提供以下信息以创建加载项项目。

  • 选择项目类型：Office Add-in Task Pane project
  • 选择脚本类型：Javascript
  • 要为外接程序命名什么名称？My Office Add-in
  • 你希望支持哪个 Office 客户端应用程序？PowerPoint

显示命令行界面中 Yeoman 生成器的提示和回答的屏幕截图。

完成此向导后，生成器会创建项目，并安装支持的 Node 组件。

提示

创建加载项项目后，可忽略 Yeoman 生成器提供的后续步骤指南。 本文中的分步说明提供了完成本教程所需的全部指南。

浏览项目

使用 Yeoman 生成器创建的加载项项目包含适合于基础任务窗格加载项的示例代码。 如果想要浏览加载项项目的组件，请在代码编辑器中打开项目并检查下面列出的文件。 准备好试用加载项时，请转至下一部分。

  • 项目根目录中的 ./manifest.xml 文件定义加载项的设置和功能。 有关 manifest.xml 文件的详细信息，请参阅 Office 外接程序 XML 清单。
  • ./src/taskpane/taskpane.html 文件包含组成任务窗格的 HTML。
  • ./src/taskpane/taskpane.css 文件包含应用于任务窗格中的内容的 CSS。
  • ./src/taskpane/taskpane.js 文件包含用于加快任务窗格与 Office 客户端应用程序之间的交互的 Office JavaScript API 代码。

试用

  1. 导航到项目的根文件夹。

    cd "My Office Add-in"

  2. 完成以下步骤，以启动本地 Web 服务器并旁加载你的加载项。

    注意

    Office 加载项应使用 HTTPS，而不是 HTTP（即便是在开发时也是如此）。 如果系统在运行以下命令之一后提示你安装证书，请接受提示以安装 Yeoman 生成器提供的证书。 你可能还必须以管理员身份运行命令提示符或终端才能进行更改。

    提示

    如果在 Mac 上测试加载项，请先运行以下命令，然后再继续。 运行此命令时，本地 Web 服务器将启动。

    npm run dev-server

    • 若要在 PowerPoint 中测试加载项，请在项目的根目录中运行以下命令。 这将启动本地的 Web 服务器（如果尚未运行的话），并使用加载的加载项打开 PowerPoint。

      npm start

    • 若要在浏览器版 PowerPoint 中测试加载项，请在项目的根目录中运行以下命令。 运行此命令时，本地 Web 服务器将启动。 将“{url}”替换为 OneDrive 或你有权访问的 SharePoint 库上的 PowerPoint 文档的 URL。

      npm run start:web -- --document {url}

      示例如下。

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      注意

      如果在 Mac 上进行开发，请将 括 {url} 在单引号中。 请勿在 Windows 上执行此操作。

      如果外接程序未在文档中旁加载，请按照手动旁加载加载项中的说明手动旁加载到Office web 版。

  3. 在 PowerPoint 中，插入新的空白幻灯片，再依次选择“主页”选项卡和功能区中的“显示任务窗格”按钮，以打开加载项任务窗格。

    突出显示“显示任务窗格”按钮的 PowerPoint 屏幕截图。

  4. 在任务窗格底部，选择“运行”链接，以将文字“Hello World”插入到当前幻灯片中。

    幻灯片上显示有狗图像和文本“Hello World”的 PowerPoint 屏幕截图。

后续步骤

恭喜！已成功创建 PowerPoint 任务窗格加载项！ 接下来，请详细了解 PowerPoint 加载项功能，并跟着 PowerPoint 加载项教程一起操作，生成更复杂的加载项。

另请参阅