0

在如何导入 jQuery 上浪费了大量时间之后，我在 HTML 中使用本地路径或 CDN 获得了以下两种方式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

在带有本地路径或 CDN 的 JS 中：

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

但不幸的是，上述两种方法在 LWC 中都不起作用，并且没有关于如何做到这一点的文档。

下面的方法在我的 index.html 页面中可以很好地在我的 lwc 项目中导入 jQuery。

<script src="./resources/js/jquery-3.5.1.min.js"></script>

我还浪费了很多时间在如何在 lwc 中导入 CSS，因为也没有关于导入第三方 CSS 的文档，但是一些我如何通过使用下面的代码来导入 CSS

constructor() {

    super();

    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}

所以我尝试了一些类似的方法来导入 JS，这不会在控制台日志中给出任何错误，但同样的方法根本不起作用，在构造函数和 connectedCallback 中都尝试过，但没有运气。

connectedCallback() {
        const jq = document.createElement('SCRIPT');
        jq.src = './resources/js/jquery-3.5.1.min.js';
        jq.type = 'text/javascript';
        this.template.appendChild(jq);
    }

如果有人对如何在开源 LWC 中导入 JS 库有任何想法，请告诉我，非常感谢您的帮助。

4

1 回答 1

-1

我们需要做的第一件事是在静态资源中添加 JQuery JS 文件。静态资源应如下所示：

jQuery 静态资源

在 LWC（Lightning Web 组件）中包含 JQuery

在 JS Controller 中，我们首先需要从
Lightning/platformResourceLoader 模块中导入 loadScript() 方法。如果我们想包含一个外部 CSS 文件，我们也可以包含 loadStyle 方法。

从'lightning/platformResourceLoader'导入{ loadScript, loadStyle }；

导入我们之前创建的静态资源。检查此实现以在 Lightning Web 组件中包含静态资源。

最后，在 renderCallback 方法中，调用我们之前导入的 loadScript 并传递对当前模板 (this) 和静态资源的引用。此方法返回 Promise。如果 Promise 被解决，则 then() 函数将被调用。如果出现错误，将执行 catch() 函数。我们正在使用 renderCallback，因为我们希望在组件加载并在 UI 上呈现后加载脚本。

现在，要访问 Lightning Web 组件中的 JQuery 方法，有一些问题。理想情况下，有多种方法可以调用 JQuery 方法。最常见的如下：

$(".className").hide();

这将隐藏带有 class=”className” 的元素。但是在 Lightning Web 组件中，我们必须像下面这样使用它：

$(this.template.querySelector('.className')).hide();

就这些。我们只需要使用 queryLocator 引用元素。然后，我们可以调用 JQuery 方法。

   import { LightningElement } from 'lwc';  
   import { loadScript, loadStyle } from 
   'lightning/platformResourceLoader';    
   import jQuery from '@salesforce/resourceUrl/JQuery';

lwcJquery.js

   import { LightningElement } from 'lwc';
   import { loadScript, loadStyle } from 
   'lightning/platformResourceLoader';
   import jQuery from '@salesforce/resourceUrl/JQuery';

   export default class LwcJquery extends LightningElement {

    renderedCallback(){
    loadScript(this, jQuery)
    .then(() => {
        console.log('JQuery loaded.');
    })
    .catch(error=>{
        console.log('Failed to load the JQuery : ' +error);
    });
    }

    slideIt(event){
    $(this.template.querySelector('.panel')).slideToggle("slow");
    }

    slideRight(event){
    $(this.template.querySelector('.innerDiv')).animate({left: 
    '275px'});
    }
    }

在这里，我使用了 slideToggle() 和 animate() JQuery 方法来添加一些动画。

于 2021-10-24T16:39:26.170 回答