【Salesforce / LWC】LWC中使用第三方库开发 Use Third-Party JavaScript Libraries In LWC

LWC中使用第三方库开发

在LWC中，我们当然可以使用第三方库的代码。今天我会用 highCharts来手把手教你怎么调用。

准备工作

1. 下载你想使用的第三方库代码到本地。

2. 作为静态资源，上传到Salesforce。

3. 在 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 核心文件，其中，