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

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领域的干货知识，想学习并加入这个领域的小伙伴可以关注【自由侠部落】。