标签：Salesforce 必看 自定义 标签 import 组件 LWC CSS
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=``
}
以编程方式应用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,必看,自定义,标签,import,组件,LWC,CSS 来源： https://www.cnblogs.com/ziyouxia/p/16658603.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。