生成首个 SharePoint 客户端 Web 部件（Hello World 第 1 部分）

浏览 : 704 次 Fri, 01 Apr 2022 06:17:39 GMT

客户端 Web 部件是在 SharePoint 页面的上下文中运行的客户端组件。客户端 Web 部件可以部署到支持 SharePoint 框架的 SharePoint 环境中。你还可以使用现代 JavaScript Web 框架、工具和库来构建它们。

客户端 Web 部件支持：

使用 HTML 和 JavaScript 生成。
SharePoint Online 和本地环境。

备注

请务必先设置开发环境，再执行本文中的步骤。

也可以观看 SharePoint PnP YouTube 频道上的这段视频，按照下面这些步骤操作：

新建 Web 部件项目

为项目创建新的项目目录，将当前文件夹更改为该目录。

通过从你创建的新目录中运行 Yeoman SharePoint 生成器来创建新项目：

控制台

yo @microsoft/sharepoint

Yeoman SharePoint 生成器将提出一系列问题。对于所有问题，接受默认选项，以下问题除外：

要创建哪种类型的客户端组件？ WebPart
Web 部件的名称是什么?：HelloWorld
Web 部件的说明是什么?：HelloWorld 说明
要使用哪种框架?：没有 JavaScript 框架

此时，Yeoman 将创建项目基架（文件夹和文件），并通过运行 npm install 安装所需的依赖项。这通常需要 1-3 分钟时间，具体取决于 Internet 连接。

当项目基架和依赖项安装完成后，Yeoman 将显示以下类似消息，表明操作成功：

重要

运行 npm install 命令时，NPM 可能会在安装依赖项期间显示警告和错误消息。可以放心地忽略这些日志警告和错误消息。

NPM 可能会在进程结束时显示一条有关运行 npm audit 的消息。请不要运行此命令，因为它将升级可能未由 SharePoint 框架测试的程序包和嵌套依赖项。

有关任何错误故障排除的信息，请参阅已知问题。

使用常用的代码编辑器

由于 SharePoint 客户端解决方案基于 HTML/TypeScript，因此可使用任何支持客户端开发的代码编辑器来生成 Web 部件，例如：

SharePoint 框架文档中的步骤和示例使用的是 Visual Studio Code。 Visual Studio Code (VS Code) 是 Microsoft 提供的轻型源代码编辑器，功能十分强大，可以在桌面上运行。 VS Code 适用于 Windows、macOS 和 Linux。其中内置了对 JavaScript、TypeScript、Node.js 的支持，且生态系统中包含多种适用于其他语言（如 C++、C#、Python 和 PHP）的扩展。

预览 Web 部件

可以在 SharePoint 托管工作台中预览和测试客户端 Web 部件，而无需将解决方案部署到 SharePoint。这是通过启动本地 Web 服务器来完成的，托管工作台可以使用 gulp 任务服务加载文件。

默认情况下，客户端工具链使用 HTTPS 终结点。设置开发环境过程的一部分包括信任本地环境的工具链中包含的开发 SSL证书。这是必需的，因此你的浏览器将信任证书。

重要

必须信任开发人员证书。这是一次性过程，并且只有当你在新工作站上运行第一个 SharePoint 框架项目时才是必需的。无需对每个 SharePoint 框架项目执行此操作。

如果你不信任开发人员证书，请遵循本页上概述的步骤：设置开发环境：信任自签名开发人员证书。

更新项目的托管工作台 URL

使用 gulp 任务服务时，默认情况下，它将启动具有项目中指定的专用托管工作台 URL 的浏览器。新项目中托管工作台的默认 URL 指向无效的 URL。

此时，Web 部件属性窗格包含这些属性默认值。

Web 部件清单

HelloWorldWebPart.manifest.json 文件定义了 Web 部件元数据，如版本、ID、显示名称、图标和说明。每个 Web 部件都必须包含此清单。

JSON


{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "fbcf2c6a-7df9-414c-b3f5-37cab6bb1280",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
  }]
}

现在，我们引入了新的属性，确保再次通过执行以下命令从本地开发环境托管 Web 部件。这还将确保正确地应用上述更改。

控制台


gulp serve

后续步骤

恭喜！已成功运行首个 Hello World Web 部件！

至此，Web 部件已在运行。在下一主题将 Web 部件连接到 SharePoint 中，可以继续生成 Hello World Web 部件。将使用相同的 HelloWorld Web 部件项目，并添加与 SharePoint 列表 REST API 进行交互的功能。请注意，gulp serve 命令仍在控制台窗口或 Visual Studio Code（如果使用它作为编辑器）中运行。浏览下一篇文章时，可以继续让它运行。

Sharepoint Fontend install yo SharePoint 伺服器中的編目及受控…