欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

程序员文章站 2024-03-15 23:26:42
...

前言

Office 365 Sharepoint Online站点中采用“新式”页面的体验,在“新式”页面中可以添加Spfx开发的Web 部件,接下来就一起来创建第一个扩展部件(SPFx Application Customizer)

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

【SharePoint Online】02 将Spfx扩展程序部署到 SharePoint Online站点中(本地托管的方式:基于feature xml 的预配在特定站点中使用扩展程序解决方案)

环境要求

系统:windows10 或Windows Server 2012+

开发工具:vs code

必要组件:node.js (注意:版本必须为10.x,否则报错

步骤

一、安装node.js  10.x(如果之前没有安装过)

根据系统要求去官网下载安装即可

二、安装 SharePoint Framework (如果之前没有安装过)

运行如下命令安装即可

npm install -g @microsoft/generator-sharepoint

对于国内用户使用npm会很慢,可以使用cnpm安装,步骤如下

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install gulp yo @microsoft/generator-sharepoint --global

三、创建项目

1、创建一个目录,然后用vs code打开该目录,如:C:\Project\VsCode\app-extension-t

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

2、在vs code 终端运行如下命令,开始创建项目

yo @microsoft/sharepoint

3、出现此界面后根据需要一步一步继续即可

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

4、如下为该项目的选择项(可以根据自身需求进行选择),选择后按回车键开始创建项目(这时候可以干另外一个项目的活了,因为需要一些时间,大哭~~~)

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

 5、出现如下界面,恭喜你,项目创建成功了

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

6、目录结构如下

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

7、需要注意的文件

文件一L:  ./src/extensions/helloWorld/HelloWorldApplicationCustomizer.manifest.json

此文件定义扩展类型和扩展的唯一标识符。稍后在调试扩展并将其部署到 SharePoint 时将需要此 ID

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

 文件二:./src/extensions/helloWorld/HelloWorldApplicationCustomizer.ts

整个扩展部件的内容是基于此文件进行渲染的

四、调试项目

1、配置作为测试的SharePoint站点地址

不能在本地环境测试 SharePoint 扩展部件,需要使用实际 SharePoint Online 网站来进行测试;但是,无需将这些扩展部件部署到SharePoint应用站点来进行测试,只需要如下步骤即可进行简化测试

 打开 ./config/serve.json 文件,把该文件中的pageUrl修改为实际的SharePoint online站点地址,如下

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

2、运行以下命令进行编译并启动调试

gulp serve

3、执行后会自动通过浏览器打开刚才配置的SharePoint online站点,并弹出如下提示框,点击“Load debug scripts”即可

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

 4、最后可以看到刚才在代码中创建的弹窗信息

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

相关代码如下

【SharePoint Online】01 通过Spfx创建扩展部件(SPFx Application Customizer)

至此,第一个扩展部件(SPFx Application Customizer)就创建并调试完成了,下一讲将一起了解一下如何把扩展部件部署到SharePoint online站点上