LWC中使用第三方库开发

文章目录

LWC中使用第三方库开发
- 准备工作
- 标准方法讲解
- JavaScript 中的 DOM 操作
- 示例
- - 上述代码中需要注意的几点：
  - 补充

在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 核心文件，其中，highcharts是上传到静态资源时设定的资源名。

在renderedCallback()方法中，第一次render时，我们调用加载方法加载样式和方法，由于调用方法都会返回 Promise 对象，因此我们可以使用 Promise.all()来确保所有文件都已成功加载。在回调函数中，在没有错误、文件都被加载的情况下，才会调用第三方库的工作方法，这样，我们就确保了所有来自第三方库的方法、样式都正确地引用到环境中并且被使用了。

下面是我的 JavaScript 代码：

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import HIGHCHARTS from "@salesforce/resourceUrl/highcharts";export default class CDP_trial extends LightningElement {renderedCallback() {Promise.all([loadScript(this, HIGHCHARTS).then(() => console.log("Highcharts loaded")).catch(error => console.log("Error in loading Highcharts"))]).then(() => {this.runHighcharts();}).catch(error => {window.console.log("The error is: " + error);});}runHighcharts() {Highcharts.chart(this.template.querySelector('div'), {chart: {type: 'area',zoomType: 'x',panning: true,panKey: 'shift'},title: {text: '2021 春季'},xAxis: {allowDecimals: false,type: 'datetime',dateTimeLabelFormats: {day: '%b %e'},title: {text: '日期'}},yAxis: {startOnTick: true,endOnTick: false,maxPadding: 0.35,title: {text: '时间'},labels: {format: '{value} mins'}},tooltip: {pointFormat: '{series.name} 学习了 <b>{point.y}</b>mins'},legend: {enabled: true},series: [{name: 'FO',lineColor: Highcharts.getOptions().colors[1],color: Highcharts.getOptions().colors[2],fillOpacity: 0.3,data: [163,90,60,148,0],pointStart: Date.UTC(2021, 1, 22),pointInterval: 24 * 3600 * 1000 // one day}, {name: 'BZ',lineColor: Highcharts.getOptions().colors[2],color: Highcharts.getOptions().colors[3],fillOpacity: 0.3,data: [120,141,67,141,0],pointStart: Date.UTC(2021, 1, 22),pointInterval: 24 * 3600 * 1000 // one day}, {name: 'SZ',lineColor: Highcharts.getOptions().colors[3],color: Highcharts.getOptions().colors[4],fillOpacity: 0.3,data: [90,0,0,0,0],pointStart: Date.UTC(2021, 1, 22),pointInterval: 24 * 3600 * 1000 // one day}]});}}

上述代码中需要注意的几点：

为了避免命名冲突，静态资源的文件路径的变量名与第三方库中的方法名不能相同。

例如，HIGHCHARTS是静态文件的路径名，Highcharts是第三方库的方法名。
必须确保所有文件都已经被调用之后，才能进入到第三方库的工作函数。

补充

由于我的代码中只加载了一个核心 JavaScript 文件，下面给大家参考如何加载文件库中的文件、 CSS 文件和多个核心文件：

import HIGHCHARTS from "@salesforce/resourceUrl/highchartsZip"
// ...
Promise.all([loadScript(this, HIGHCHARTS + '/core/highcharts.source.js'),loadScript(this, HIGHCHARTS + '/core/3d.source.js'),loadScript(this, HIGHCHARTS + '/core/map.source.js'),loadStyle(this, HIGHCHARTS + '/style.css')
]).then(() => { /* callback */ });

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

SAP UI5 应用开发教程之一百零三 - 如何在 SAP UI5 应用中消费第三方库试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
Android Studio中导入第三方库
之前开发Android都是使用的eclipse,近期因为和外国朋友Timothy一起开发一款应用,他是从WP平台刚切换使用Android的,使用的开发环境时Android Studio,为了便于项目的 ...
【mixly】APDS9960第三方库开发
APDS9960第三方库开发文章目录 APDS9960第三方库开发前言一.实验准备 1.硬件准备 2.软件准备二.实验过程 1.Mixly库说明 2.文件编写 2.1.编写xxx.xml文件 ...
Mixly第三方库开发——OLED库
前言 Mixly自从2015年问世以来,就深受国内创客.中小学教师喜爱,如今已经成为国内最好用的Arduino图形化软件之一.Mixly最大的优点就是其开放性,Mixly建立了一个生态圈,这个生态圈欢 ...
Mixly第三方库开发的两种方法——U8g2库二次开发
Mixly第三方库开发的两种方法--U8g2库二次开发前言方法一:自定义库 1.创建库文件夹 2.开始编程 2.1.定义图形块的基本信息 2.2.定义图形块的外观样式 2.3.定义图形块与C语言的 ...
创客教师必备技能：Mixly第三方库开发
创客教师必备技能:Mixly第三方库开发转载自:https://www.jianshu.com/p/c491e831a7de hznupeter 2018.02.16 12:14:24字数 2,46 ...
VS中添加第三方库及相对路径设置
原文 VS中添加第三方库及相对路径设置对于一些第三方的SDK,一般会包含头文件(*.h),静态库文件(*.lib)和动态库文件(*.dll). 1. 文件位置:为了提高程序的可移植性,将第三库放在 ...
python的excell库_Python中使用第三方库xlrd来写入Excel文件示例
继上一篇文章使用xlrd来读Excel之后,这一篇文章就来介绍下,如何来写Excel,写Excel我们需要使用第三方库xlwt,和xlrd一样,xlrd表示read xls,xlwt表示write x ...

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