LWC中使用第三方库开发
在LWC中,我们当然可以使用第三方库的代码。今天我会用
highCharts
来手把手教你怎么调用。
准备工作
-
下载你想使用的第三方库代码到本地。
-
作为静态资源,上传到Salesforce。
-
在
js
文件中:-
导入静态资源
import resourceName from '@salesforce/resourceUrl/resourceName';
-
从
LightningElemengt
模组导入标准方法:import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
-
标准方法讲解
lightning/platformResourceLoader
方法内提供了两个方法:loadScript
和 loadStyle
。两个方法都返回一个Promises对象,二者可以链接或者并行使用。
loadScript(self, fileUrl): Promise
该方法会访问静态资源中的 JavaScript 文件,并且加载完成后返回一个 resolves
的 Promise
self
继承了LightningElement
组件的映射,在方法中的值必须为this
。只有在继承了LightningElement
的模组中才能调用此方法fileUrl
一个指向 JavaScript 文件路径的字符串。构建这个字符串需要声明一个指向静态资源文件的路径的resourceName
加载 CSS 文件的方法也类似:
loadScript(self, fileUrl): Promise
JavaScript 中的 DOM 操作
虽然在LWC组件中手动进行 DOM 操作是不被推荐的,但是很多第三方库会掌控 DOM。
所以添加了 lwc:dom="manua"
属性的元素会被重定向至一个空的原生 HTML 元素,这样对它进行的操作将脱离 LWC 框架的限制。
<template>
<div lwc:dom="manual"></div>
</template
示例
这个组件利用了 highCharts
库显示了我们小组每天的产出时间:
首先下载 highcharts 源码包 / 核心 JavaScript 文件并上传为静态资源。
在 VSCode 中,创建一个新的组件。包裹 highcharts 的元素为一个 div
元素,因此组件的 HTML 代码如下:
<template>
<div>
<div id="container" lwc:dom="manual"></div>
</div>
</template>
在 JavaScript 类文件中,导入 loadStyle(可选)``````loadScript
方法,导入 highcharts 核心文件,其中,