其他分享
首页 > 其他分享> > 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