SharePoint Framework 在web部件中使用第三方样式

  • 时间:
  • 浏览:3
  • 来源:大发5分6合APP下载_大发5分6合APP官网

有刚刚 重写onInit()法律法律依据:

细心的让他发现,上图的折叠样式能不还能不能 显示出来,从请求查看器中亲戚亲戚我们还能不能看到只加载了jQuery UI的脚本,有刚刚 并能不还能不能 加载CSS样式。

在web部件中引用第三方CSS样式表前面提到的config.json文件只支持再加结构的脚本文件,从结构引用样式文件跟它不同,亲戚亲戚我们前要使用SPComponentLoader。

在打包时,它们会被标记为结构资源,有刚刚 不必带有在包中。运行命令gulp serve来启动项目。在弹出的工作台页面中,再加web部件到画板中,打开浏览器的debug tool并转到network标签页,刷新页面。亲戚亲戚我们还能不能看到jQuery加载的地址:

分析web部件包的内容

在编译完项目前一天,在浏览器中打开文件./temp/stats/js-thirdpartycss.stats.html,还能不能看到包明显小了什么都有有有,变成了7KB(前一天是100KB),有刚刚 jQuery和jQuery UI并不出图表中显示了,前一天它们是在web部件运行时加载了。

指定库的URL从一一个多URL加载第三方库,你前要在项目的配置文件中指定该库URL的地址。打开文件./config/config.json,在externals次要再加jQuery相关的代码,再加完的代码所示:

在web部件中从URL引用库

在SPFx项目中指定了加载jQuery和jQuery UI的URL后,下一步是在项目中进行引用,打开文件./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts,在文件的顶部import声明的下面,再加如下代码:

在web部件在页面实例化前一天,它会从指定的URL加载jQuery UI的CSS。

再次查看页面,还能不能看到样式出来了。

博客地址:http://blog.csdn.net/FoxDave

本篇讲述如保在web部件中从结构URL引用第三方样式库。

在SPFx项目中引用第三方库的另并有的是法律法律依据什么都有有 从URL引用它们,如CDN或私有管理路径。这种法律法律依据最大的好处是亲戚亲戚我们将从公共位置加载常用的库,有前一天客户端的用户前一天将该库下载到了本地电脑中。这种情况汇报下SPFx前一天重用缓存中的库,使你的web部件加载得变慢。

即便你还能不能 使用公共CDN来加载库,从提高性能的带宽看也是一次很好的实践。指向URL还能不能使用户只下载一次脚本,前一天在整个网站进行缓存重用,显著提升了加载页面的带宽和用户体验。

在从公共URL加载第三方库时,要注意使用上的风险。前一天承载它们的地址有的是 由你进行管理的,什么都有有有还能不能 确保它们的内容绝对安全。SPFx加载的脚本在当前用户的上下文运行,具有当前用户的权限。有刚刚 ,前一天承载脚本的地址还能不能 访问了,你的web部件就无法工作了。

安装库的类型当你从URL引用第三方库时,你不前要将亲戚我们以包的形式在你的项目中进行安装。有刚刚 前一天你你要在开发过程中进行类型安全检查,你前要安装它们的TypeScript类型。

使用SPComponentLoader从URL加载样式打开文件./src/webparts/jQueryAccordion/JQueryAccordionWebPart.ts,在顶部import声明的下面,再加如下代码: