其他分享
首页 > 其他分享> > Salesforce学习必看!超级实用的5个LWC开发技巧

Salesforce学习必看!超级实用的5个LWC开发技巧

作者:互联网

图片

 

Visualforce、Aura和LWC都试图从终端用户的角度解决相同的问题。然而,它们在技术细节上差异很大。

               

本文将聚焦LWC的5个方面,阐述组件开发新范式的一些基础知识:

 

 

01

以编程方式添加样式

 

SLDS消除了终端用户体验中的摩擦,并为组件的行为和外观提供了指导。设计系统涵盖了各种各样的样式需求(填充和边距等),无需创建任何自定义CSS。

 

如果样式取决于用户输入或需要通过编程来确定,有三种方法可以实现。假设下面是LWC,我们想给这个部分一个红色的背景:

 

<template>    
<section>

<p>Content</p>
    
</section>
   
 </template>

 

应用现有的CSS类

 

这意味着你已经有了一个想要应用于元素的类。它来自SLDS,或在你的自定义CSS文件中:

   

.red-background { 
background-color: red;
 
 }

 

在这两种情况下,都可以在renderCallback中使用以下代码来实现目标:

 

renderedCallback() {  

let section = this.template.querySelector("section");

section.classList.add("red-background");
}

 

在Markup中使用样式属性

 

HTML元素上的样式属性可以很容易地将字符串作为样式指令传递。不过,这可能会破坏精心制作的CSS,但如果你控制 {computedStyle} 的内容,那么在简单的用例中这完全可以。

 

<template>    
<section style={computedStyle}>
<p>Content</p>
</section>
</template>

connectedCallback() {
this.computedStyle=``

}

 

以编程方式应用CSS属性

如果想使用颜色选择器让终端用户可以自主选择颜色,那么使用CSS变量是可行的方法。对于每个CSS变量,我们还可以设置Fallback值:

 

.dynamic-background {    
background-color: var(--background-color, red);
}

 

在Javascript文件中:

 

connectedCallback() {    
const css = document.body.style;

css.setProperty("--background-color", "green");

}

 

 

02

如何处理多个输入字段

 

有时我们不能依赖Lightning记录编辑表单,因为想要创建的输入不依赖于Salesforce记录。为简单起见,先创建一个包含一堆文本字段的示例:

 

<template>  
<template for:each={inputs} for:item="inputName">

<lightning-input

type="text"

key={inputName}

name={inputName}

label={inputName}

onchange={onInputChange}

></lightning-input>
</template>

 

诀窍是将输入名称作为属性名称。然后可以像这样连接:

 

import { LightningElement } from "lwc";

export default class ManyInputs extends LightningElement {
inputs = ["textOne", "textTwo", "textFour", "textFive", "textSix"
onInputChange(event) {
this[event.target.name] = event.detail.value;

console.log(`Value for textOne: ${this.textOne}`);

console.log(`Value for textTwo: ${this.textTwo}`);

// ...

}

 

 

03

关于异常处理的误区

 

向客户端发送异常的最佳实践仍然是AuraHandledExceptions

 

AuraHandledException、自定义异常或系统异常之间只有微小的区别。AuraHandledException不会向客户端发送任何堆栈跟踪信息。因此,如果担心客户端不了解任何服务器端实现细节,那么AuraHandledException是LWC和Aura的出路。

 

在这两种范式中,都需要手动处理异常(在出现与服务器相关的错误时,不会自动弹出任何消息)。这种错误弹出服务只存在于Aura,并且随着LWC的出现也消失了。

 

要在Aura和LWC中使用Exception,可以参考GitHub上的演示组件。

 

图片

         

从LWC LWC Recipes Demo中查看此实用程序组件。Apex Errors并不是唯一可能发生的错误类型。不同的LWC或浏览器API提供略有不同的错误响应。该实用程序有助于提取各种错误对象的相关部分。

 

 

04

整理自定义标签

 

LWC的优点之一是它们的元数据意识(metadata-awareness)。如果将支持多语言的自定义标签导入组件,只要该自定义标签在LWC Javascript文件中被引用,就不能删除。

 

缺点是作为一个独立软件开发商,有很多标签需要处理。在Visualforce和Aura中,可以直接访问相应组件的Markup/HTML部分中的标签。在LWC中,需要自己导入每个标签,并将其导入到属性中:

 

import { LightningElement } from "lwc";
import CUSTOMLABEL from "@salesforce/label/CustomLabelDemo";

export default class CustomLabelDemo extends LightningElement {
customLabel = CUSTOMLABEL;
}

 

然后在LWC的Markup或HTML部分使用该属性:

 

<template>    
My Label: {customLabel}
</template>

 

没有办法绕过这个问题,如果你有很多自定义标签,这会变得很麻烦。

 

为了至少保持类标题简短明了,并避免与自定义标签混淆,可以为每个组件使用了一个附加的labels.js文件,该文件位于组件文件夹中,并且可以从CSV文件自动生成。看起来是这样的:

 

import label1 from "@salesforce/label/c.label1";
import label2 from "@salesforce/label/c.label2";
import label3 from "@salesforce/label/c.label3";

export const customLabels = {

label1,

label2,

Label3
};

   

在所有地方都使用自定义标签API名称,在消费组件中只需要进行一次导入:

 

import { LightningElement } from "lwc";
import { customLabels } from "./labels.js";

export default class CustomLabelDemo extends LightningElement {
labels = LABELS;
}

 

当使用自定义标签与常规属性形成对比时,此方法还可以明确指示。所有自定义标签都以:labels 开头:

 

<template>    
My Label: {labels.label3}
</template>

 

 

05

Winter '22中LWC的新变化

 

Salesforce正在积极开发一种名为Lightning Web Security的新客户端安全架构,目前处于公开测试阶段。这种新架构的定义是更少的限制和更多的功能,同时提供强大的沙盒和安全状态来强制执行命名空间隔离,使LWC组件具有强大、灵活、可用的安全性。

 

在初始版本发布两年多后,命名空间差距正在缩小,但一些服务组件仍然不可用于LWC。比如以下这些用例,都需要创建Aura组件:

 

 

标签:Salesforce,必看,自定义,标签,import,组件,LWC,CSS
来源: https://www.cnblogs.com/ziyouxia/p/16658603.html