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

本文详细介绍了如何在Salesforce的LWC组件中使用第三方JavaScript库,包括准备静态资源、导入和加载库、执行DOM操作,以及通过示例展示了如何集成highcharts库。强调了确保文件加载顺序和避免命名冲突的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

LWC中使用第三方库开发


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

准备工作

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

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

  3. js文件中:

    • 导入静态资源

      import resourceName from '@salesforce/resourceUrl/resourceName';
      
    • LightningElemengt模组导入标准方法:

      import {
             
              loadStyle, loadScript } from 'lightning/platformResourceLoader';
      

标准方法讲解

lightning/platformResourceLoader 方法内提供了两个方法:loadScriptloadStyle。两个方法都返回一个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 核心文件,其中,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值