用SharePoint框架进行web部分开发

只想要周末双休
1,076 阅读4分钟

好久不见,谁还不过个周末嘛. 今天May老师又打招呼啦,哈哈哈,默契吧我想是.

今天听领导说,SharePoint有两种方式,一种是以前写过的直接在站点上改的,还有一种是写好样式web啥的做好了上传部署.今天边学边介绍学到的相关信息

前期准备

  1. 使用过在线的Sharepoint,操作过相关练习,没操作过也没事,就是点点点.
  2. 能够使用JS进行编程
  3. 使用过VS这个编辑器去操作
  4. 有账号 SharePoint的账号

探索SharePoint框架 image.png

SharePoint 框架项目中的关键文件

现在让我们看看 SharePoint 框架项目中的一些关键文件。 创建 Web 部件时，SharePoint 框架的 Yeoman 生成器将创建 Web 部件类文件并将其添加到项目中。 此文件位于  ./src/webparts/[webpartName]  文件夹中。 Web 部件的名称将添加到文件夹和类的文件名中。

TypeScript复制

export interface IHelloWorldWebPartProps {
  description: string;
}
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  // ...
}

此文件定义 Web 部件的主入口点，并扩展 BaseClientSideWebPart 类。 所有客户端 Web 部件都必须从此基类扩展。

Web 部件文件将同时包含 Web 部件类和接口。 该接口定义 Web 部件上的非标准公共属性，当 Web 部件从编辑模式保存或发布时，这些属性将保留。

Web 部件清单

Web 部件清单文件  *.manifest.json，与 Web 部件类位于同一文件夹中。 它包含 Web 部件的元数据，其中包括 Web 部件的 ID、别名、组件类型及其版本等内容。

{
  "id": "a632c154-6871-4bcb-b689-b54363e15544",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
    "group": { "default": "Other" },
    "title": { "default": "Hello SPFx" },
    "description": { "default": "My first SPFx web part" },
    "officeFabricIconFontName": "BirthdayCake",
    "properties": {
      "description": "HelloWorld"
    }
  }]
}

Web 部件还将包含一个用于 preconfiguredEntries 的部分，该部分是添加到新页面时在 Web 部件上设置的公共属性的默认值。

解决方案打包

创建项目并准备好部署后，使用gulp package-solution任务创建  *.sppkg SharePoint 包文件。

对于使用 SharePoint 框架 v1.4.1 或更高版本创建和生成的项目，如果属性includeClientSideAssets设置为  ./config/package-solution.json 文件中的true，则组件的 JavaScript 捆绑包和清单将包含在 SharePoint 包文件中。 此选项将文件部署到安装应用程序的网站集根目录中的特殊 ClientSideAssets 库中。

SharePoint 客户端 Web 部件

使用 SharePoint 框架构建的客户端 Web 部件是创新、扩展和自定义 SharePoint 新式体验愿景的基石。

它们是可配置、可重用且特建的组件，页面设计者和网站所有者可以使用它们为用户创造独特的体验。

客户端 Web 部件的屏幕截图

客户端 Web 部件是使用 SharePoint 框架构建的，该框架提供了额外功能，包括访问 Microsoft Graph 以将个人和组织信息结合到页面体验中。

Web 部件也同样是上下文感知，因为它们有权访问当前页面的上下文信息。 例如，在运行时，Web 部件可获得当前用户以及 Web 部件当前运行页面和站点的信息。

客户端 Web 部件也非常灵活！开发人员可以使用它们来创建单页应用程序 (SPA)，作为单页应用页面、Microsoft Teams 选项卡和个人应用的基础，甚至作为 Office 加载项的主机。

客户端 Web 部件

有经验的 SharePoint 开发人员如果熟悉使用 SharePoint 功能和解决方案，在开发并部署服务器端 Web 部件时，就会发现客户端 Web 部件也很熟悉。它们只是 Web 部件！

与服务器端 Web 部件的唯一区别是客户端 Web 部件是在浏览器中渲染的，而不是在服务器上。

客户端 Web 部件是为新式 JavaScript 驱动的 Web 构建的，就像新式的 SharePoint 体验一样。

介绍了相关的信息 接下来将介绍怎样安装这些框架 好的，一切顺利 嘿嘿 争取早日有些进展

avatar
文章
阅读
粉丝