将 jQueryUI 手风琴小组件添加到 SharePoint 客户端 Web 部件

项目
03/21/2023

将 jQueryUI 手风琴小组件添加到 Web 部件项目涉及新建 Web 部件，如下图所示。

包含 jQuery 手风琴小组件的 Web 部件的屏幕截图

开始前，请务必确保已完成以下步骤：

生成首个 Web 部件

还可以通过在 Microsoft 365 平台社区 (PnP) YouTube 频道上观看此视频来执行这些步骤：

开发人员工具链使用 Webpack & SystemJS 来捆绑和加载 Web 部件。这包括加载任何外部依赖项（如 jQuery 或 jQueryUI）。若要粗略地加载外部依赖项，必须执行以下操作：

获取外部库，方法是通过 NPM 或直接从供应商处下载。
如果可用，请安装各自框架的 TypeScript 类型声明。
如果需要，请更新你的解决方案配置以使 Web 部件捆绑包中不包含外部依赖项。

新建 Web 部件项目

在你最喜爱的位置创建新的项目目录：
```
md jquery-webpart
```
转到项目目录：
```
cd jquery-webpart
```
通过从创建的新目录中运行 Yeoman SharePoint 生成器创建新项目：
```
yo @microsoft/sharepoint
```
Yeoman SharePoint 生成器将提示你一系列问题。对于所有问题，接受默认选项，以下问题除外：
- 要创建哪种类型的客户端组件？ Web 部件
- 要使用哪种框架?：不要 JavaScript 框架

此时，Yeoman 安装必需的依赖项，并为解决方案文件（包括 Web 部件）搭建基架。这可能需要几分钟的时间才能完成。

安装 JQuery 和 jQuery UI NPM 包

Web 部件使用 jQuery 和 jQuery UI 项目中包含的手风琴小组件。若要使用这些项，请将它们添加到项目的依赖项：

在控制台中，执行以下命令以安装 jQuery NPM 包：
```
npm install jquery@2
```
接下来，执行以下命令以安装 jQueryUI NPM 包：
```
npm install jqueryui
```
接下来，我们需要为项目安装 TypeScript 类型声明以简化开发过程。

在控制台中，执行以下命令以便安装类型声明包：
```
npm install @types/jquery@2 --save-dev
npm install @types/jqueryui --save-dev
```

从 Web 部件捆绑包中排除外部依赖项

默认情况下，项目代码中引用的所有依赖项都包括在生成的 Web 部件捆绑包中。大多数情况下，这并不是非常理想，因为它不必要地增大了文件大小。可以将项目配置为从 Web 部件捆绑包中排除依赖项，并指示 SharePoint 框架运行时在加载 Web 部件捆绑包之前将其加载为依赖项。

在 Visual Studio Code (VS Code) 中，打开文件config\config.json。

此文件包含有关捆绑包和外部依赖项的信息。

bundles 属性包含默认捆绑包信息。在本例中为 jQuery Web 部件捆绑包。当向解决方案中添加更多 Web 部件时，你会看到每个 Web 部件对应一项。
```
"bundles": {
  "j-query-web-part": {
    "components": [
      {
        "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
        "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
      }
    ]
  }
},
```
externals 属性包含生成的捆绑包中不应包含的库。捆绑进程还将使用此属性的值来配置 SharePoint 框架的模块加载程序，以便在加载 Web 部件捆绑包之前加载引用库。
```
"externals": {},
```

通过将以下两个模块添加到 externals 属性，从生成的捆绑包中排除jQuery和jQueryUI：

{
  "externals": {
    "jquery": "node_modules/jquery/dist/jquery.min.js",
    "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
  },
}

现在，生成项目时，jQuery 和 jQueryUI 就不会捆绑到默认 Web 部件捆绑包中。

已完成的 config.json 文件应类似于：

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "j-query-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
          "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
        }
      ]
    }
  },
  "externals": {
    "jquery": "node_modules/jquery/dist/jquery.min.js",
    "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
  },
  "localizedResources": {
    "JQueryWebPartStrings": "lib/webparts/jQuery/loc/{locale}.js"
  }
}

构建可折叠项

此时，项目配置为依赖于 jQuery 和 jQueryUI，但不包括在生成的解决方案的捆绑包中。下一步是通过将手风琴小组件添加到 Web 部件来实现 Web 部件。

添加手风琴小组件 HTML

在 VS Code 中，将新文件MyAccordionTemplate.ts添加到./src/webparts/jQuery文件夹中。

添加包含手风琴小组件 HTML 的类MyAccordionTemplate。将以下代码添加到 MyAccordionTemplate.ts 文件：

export default class MyAccordionTemplate {
  public static templateHtml: string =  `
    <div class="accordion">
      <h3>Section 1</h3>
      <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
          ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
          amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
          odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </p>
      </div>
      <h3>Section 2</h3>
      <div>
          <p>
          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
          purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
          velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
          suscipit faucibus urna.
          </p>
      </div>
      <h3>Section 3</h3>
      <div>
          <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
          Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
          ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
          lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
          </p>
          <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
          </ul>
      </div>
      <h3>Section 4</h3>
      <div>
          <p>
          Cras dictum. Pellentesque habitant morbi tristique senectus et netus
          et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
          faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
          mauris vel est.
          </p>
          <p>
          Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos.
          </p>
      </div>
  </div>`;
}

保存文件。

导入手风琴小组件 HTML

在 VS Code中，打开./src/webparts/jQuery/JQueryWebPart.ts。
在文件顶部的现有import语句后立即添加以下import语句：
```
import MyAccordionTemplate from './MyAccordionTemplate';
```

导入 jQuery 和 jQueryUI

可以将 jQuery 导入 Web 部件，就像之前导入 MyAccordionTemplate 一样。

在现有 import 语句后面添加以下 import 语句：
```
import * as jQuery from 'jquery';
import 'jqueryui';
```
jQueryUI 项目使用外部 CSS 文件来实现其用户体验。 Web 部件需要在运行时加载此 CSS 文件：
1. 若要在运行时加载 CSS 文件，请利用 SPComponentLoader 对象来使用 SharePoint 模块加载程序。
  
  添加以下 import 语句。
```
import { SPComponentLoader } from '@microsoft/sp-loader';
```
2. 通过添加构造函数并使用 SPComponentLoader，在 JQueryWebPart Web 部件类中加载 jQueryUI 样式。
  
  将以下构造函数添加到 Web 部件：
```
public constructor() {
  super();

  SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}
```
  此代码将执行以下操作：
  - 调用上下文父构造函数来初始化 Web 部件。
  - 从 CDN 在 CSS 文件中异步加载可折叠项样式。

呈现手风琴小组件

在 jQueryWebPart.ts 文件中，找到 render() 方法。
将 render() 方法的内容替换为以下内容，设置 Web 部件的内部 HTML 以呈现手风琴小组件 HTML：
```
this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
```
jQueryUI 手风琴小组件有多个选项，可以设置为自定义手风琴小组件。在现有 this.domElement.innerHTML = MyAccordionTemplate.templateHtml; 行代码后为可折叠项面板定义几个选项：
```
const accordionOptions: JQueryUI.AccordionOptions = {
  animate: true,
  collapsible: false,
  icons: {
    header: 'ui-icon-circle-arrow-e',
    activeHeader: 'ui-icon-circle-arrow-s'
  }
};
```
jQueryUI 类型化声明使你可以创建名为 JQueryUI.AccordionOptions 的类型化变量，并指定所支持的属性。

如果使用的是 IntelliSense，将会注意到 JQueryUI. 下的可用方法和方法参数完全受支持。

最后，初始化手风琴小组件：

jQuery('.accordion', this.domElement).accordion(accordionOptions);

如你所见，使用的是用于导入 jQuery 模块的变量 jquery。然后，初始化可折叠项。

最后一个 render() 方法应如下所示：

public render(): void {
  this.domElement.innerHTML = MyAccordionTemplate.templateHtml;

  const accordionOptions: JQueryUI.AccordionOptions = {
    animate: true,
    collapsible: false,
    icons: {
      header: 'ui-icon-circle-arrow-e',
      activeHeader: 'ui-icon-circle-arrow-s'
    }
  };

  jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

保存此文件。

预览 Web 部件

在控制台中，请确保你仍在 jquery-webpart 文件夹中，执行以下内容以生成和预览 Web 部件：
```
gulp serve --nobrowser
```
Web 服务器启动后，打开浏览器并导航到 SharePoint 网站的托管工作台测试项目。例如：https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx。
在工作台上，选择+ (加号) 显示 Web 部件列表，并添加 jQuery Web 部件。现在应该可以看到 jQueryUI 手风琴小组件了！
在运行 gulp serve 的控制台中，选择 CTRL+C 终止任务。

Share via