提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  IT要闻

当前栏目

Salesforce学习 Lwc（十九）Include JQuery in LWC (Lightning Web Component)

学习
2023-03-14 22:54:07 时间

使用Java语言开发的朋友们对于jQuery，一点也不陌生，简单来说它是JavaScript 库，我们都知道，JavaScript 是一门很烦琐的编程语言，不仅语法复杂，还会出现各种兼容问题，为了减少工作量，我们常常会把 JavaScript 中经常用到的一些功能或特效封装成一个“代码库”，这样在实际开发中只需要调用一些简单的函数就能直接使用这些功能或特效了。

今天我们讲解对于Lwc，如何引入JQuery 。

事前准备：

1.先来看看JQuery 的几个简单方法。

2.下载新版本的JQuery 包

https://jquery.com/download/

3.为了展示效果，需要自定义一个Css文件

jqueryminCSS.css

.sample1 {
    border-radius: 25px;
    background:#73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

.sample2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

.sample3 {
    border-radius: 25px;
    background:yellow;
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

4.上传准备好的静态资源

Static Resources

实现方法

1.首先通过loadScript()方法引入JQuery，然后通过loadStyle()方法引入CSS文件

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

2.然后通过renderedCallback()方法加载静态资源，例如下。

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jqueryMinJS from '@salesforce/resourceUrl/jqueryminjs';
import jqueryMinCSS from '@salesforce/resourceUrl/jquerymincss';
export default class ExternaJSCSS extends LightningElement {
    renderedCallback(){
        loadScript(this, jqueryMinJS)
        .then(() => {
            console.log('JQuery loaded.');
        })
        .catch(error=>{
            console.log('Failed to load the JQuery : ' +error);
        });
    }
}

详细代码如下

externaJSCSS.html

<template>
    <lightning-card title="Include JQuery in LWC (Lightning Web Component) ">
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <div class="mydiv">First</div>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Toggle" variant="brand" name="togglebtn" onclick={handleClick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Apply smaple1" variant="brand" name="smaple1" onclick={handleClick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Apply smaple2" variant="brand" name="smaple2" onclick={handleClick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Apply smaple3" variant="brand" name="smaple3" onclick={handleClick}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <lightning-button label="Slide Toggle" variant="brand" name="slidetogglebtn" onclick={handleClick}></lightning-button>
                </lightning-layout-item>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

externaJSCSS.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import jqueryMinJS from '@salesforce/resourceUrl/jqueryminjs';
import jqueryMinCSS from '@salesforce/resourceUrl/jquerymincss';
export default class ExternaJSCSS extends LightningElement {
    renderedCallback(){
        Promise.all([
            loadScript(this, jqueryMinJS),
            loadStyle(this, jqueryMinCSS)
        ]).then(() =>{
            console.log('JQuery loaded.');
            $(this.template.querySelector('div')).text("JQuery Loaded");
        }).catch(error => {
            console.log('Failed to load the JQuery : ' +error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error Loading Jquery',
                    message: error,
                    variant: 'error'
                })
            )
        })
    }
    handleClick(event) {
        let targetName = event.target.name;
        if(targetName=='togglebtn') {
            $(this.template.querySelector('div.mydiv')).toggle();
            this.template.querySelector('[data-id="mydiv"]')
        } else if(targetName=='slidetogglebtn') {
            $(this.template.querySelector('div.mydiv')).slideToggle("Slow");
        } else if(targetName=='smaple1') {
            $(this.template.querySelector('div.mydiv')).addClass('sample1');
            $(this.template.querySelector('div.mydiv')).removeClass('sample2');
            $(this.template.querySelector('div.mydiv')).removeClass('sample3');
        } else if(targetName=='smaple2') {
            $(this.template.querySelector('div.mydiv')).addClass('sample2');
            $(this.template.querySelector('div.mydiv')).removeClass('sample1');
            $(this.template.querySelector('div.mydiv')).removeClass('sample3');
        } else if(targetName=='smaple3') {
            $(this.template.querySelector('div.mydiv')).addClass('sample3');
            $(this.template.querySelector('div.mydiv')).removeClass('sample1');
            $(this.template.querySelector('div.mydiv')).removeClass('sample2');
        }
    }
}

效果展示

1.为了测试效果，首先做成一个App Builder

2.效果展示：

相关文章