概述
Visualforce、Aura和LWC都试图从终端用户的角度解决相同的问题。然而，它们在技术细节上差异很大。
本文将聚焦LWC的5个方面，阐述组件开发新范式的一些基础知识：
- 使用CSS和样式的3种方法
- 处理多个输入字段
- Apex异常
- 自定义标签
- LWC其他注意事项
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=`background-color: red;`
}以编程方式应用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组件：
- Lightning:utilityBarAPI：让组件与工具栏交互
- Lightning:unsavedChanges ：使开发人员可以轻松通知用户是否在不保存的情况下离开
- Lightning:overlayLibrary ：一种创建模式的方法，创建样式精美的消息弹出窗口
- LWC目前可用于快速操作，但还不能用于覆盖“新记录”或“编辑记录”等标准操作。
到此，希望各位对Salesforce开发有了初步的了解，我们会继续分享SF领域的干货知识，想学习并加入这个领域的小伙伴可以关注【自由侠部落】。
最后
以上就是坚强百褶裙为你收集整理的Salesforce中文学习必看！超级实用的5个LWC开发技巧的全部内容，希望文章能够帮你解决Salesforce中文学习必看！超级实用的5个LWC开发技巧所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复