闪电Web组件基础 – 发现闪电Web组件

学习目标

完成本单元后，您将能够：

解释Lightning Web Components编程模型。
列出使用Lightning Web组件的好处。
查找开始开发Lightning Web组件所需的条件。

Web标准编程的门户

现在是时候将您的Salesforce知识和对HTML，JavaScript和CSS等标准技术的熟悉程度结合在一起，以构建下一代Salesforce应用程序。使用这些通用标准为您的Salesforce组织构建组件，同时保持与现有Aura组件的兼容性。

Lightning Web Components专注于开发人员和用户体验。因为我们为现有技术打开了大门，所以您可以利用在Salesforce之外开发的技能来构建Lightning Web组件。您可以使用所有这些功能，而不必放弃使用Aura组件已经完成的工作。

注意

您是否注意到最后一段中的大写字母不同？如果是这样，您有敏锐的眼睛。当我们引用Lightning Web Components编程模型时，所有单词都大写。仅当我们将组件本身称为Lightning Web组件时，才大写第一个单词。

另外，您一直在使用的Lightning Components编程模型现在称为Aura Components。这些组件本身称为Aura组件。

在您进一步之前

您应该对Salesforce DX项目和Salesforce CLI有基本的了解。您还需要在Trailhead帐户中使用正确配置的组织，并在Salesforce Extension Pack中使用VS Code。您可以通过完成快速入门：闪电Web组件了解所有这些信息。

如果您使用的是附加到Trailhead帐户的Developer Edition组织，则需要在安装程序中部署“我的域”（Trailhead Playground组织会自动部署“我的域”）。

为什么要使用闪电Web组件？

现代浏览器基于Web标准，并且不断发展的标准正在不断改进浏览器可以呈现给用户的内容。我们希望您能够利用这些创新。

Lightning Web Components使用核心 Web Components标准，仅提供在Salesforce支持的浏览器中良好运行所必需的内容。因为它基于在浏览器中本地运行的代码构建，所以Lightning Web Components是轻量级的，并具有出色的性能。您编写的大多数代码都是标准的JavaScript和HTML。

您会发现更容易：

在网上常见的地方找到解决方案。
寻找具有必要技能和经验的开发人员。
利用其他开发人员的经验（甚至在其他平台上）。
发展更快。
利用完整的封装，使组件更加通用。

而且这并不像Web组件是新的。实际上，浏览器多年来一直在创造这些东西。实例包括 <select>， <video>， <input>，和作为比容器更任何标签。这些元素实际上等效于Web组件。我们的目标是将这种集成水平带入Salesforce开发。

简单组件创建

遵守Web标准的好处是简单。您无需增加特定框架的怪癖。您只需使用HTML，JavaScript和CSS创建组件。闪电Web组件的创建是一个，两个，三个步骤。我不是在开玩笑。真的就是这么简单。您创建（1）JavaScript文件，（2）HTML文件，以及可选的（3）CSS文件。

HTML提供了组件的结构。
JavaScript定义了核心业务逻辑和事件处理。
CSS为您的组件提供外观，感觉和动画。

这些是您组件的基本组成部分。

这是一个非常简单的Lightning Web组件，它在输入字段中显示“ Hello World”。

的HTML

<template>
    <input value={message}></input>
</template>

该template标签是一个组件的HTML的基本构建块。它允许您存储HTML片段。

的JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

稍后我们还将介绍import语句和类声明的详细信息。

的CSS

input {
   color: blue;
}

至少，您真正需要的只是在同一文件夹中具有相同名称（也具有匹配名称）的HTML文件和JavaScript文件。您将它们部署到带有一些元数据的组织中，一切顺利。Salesforce会编译您的文件并自动为您处理样板组件的构造。

闪电Web组件游乐场

让我们去游乐场。我们已经创建了一个空间，您可以在其中试用组件，进行修改，并查看即时结果。

转到 https://developer.salesforce.com/docs/component-library/tools/playground第一次到达那里时，您会看到一个可以探索的示例。它包括Lightning Design System CSS框架中的样式。这些样式提供了与Lightning Experience一致的外观。它还包含一些标准的Lightning Web组件，例如lightning-combobox。
现在，我们只想测试基础知识。在操场上，单击“新建”。
将上述HTML，JavaScript和CSS示例复制到操场上相应的应用程序文件中。
点击运行。恭喜你！您已经创建了一个组件。

如果返回到初始的Playground页面，您将再次看到默认示例，并且可以开始一个新项目。

闪电Web组件和Aura组件可以协同工作

想知道是否可以保留现有的Aura组件？是的你可以！您可以使用Lightning Web组件，而无需放弃现有组件。您最终可能会将现有组件迁移到Lightning Web Component模型，但是我们将引入Lightning Web组件，而不会脱离Aura组件的现有支持。Aura组件和Lightning Web组件可以很好地协作。

实际上，Aura组件可以包含Lightning Web组件（尽管反之亦然）。但是，纯Lightning Web组件实现提供了完全的封装，并不断发展对通用标准的遵守。

可以使用的很酷的东西

要有效地开发Lightning Web组件，请使用以下工具和环境。

Dev Hub和Scratch Orgs Scratch组织是一次性的Salesforce组织，以支持开发和测试。开发中心是一项功能，可管理您的临时组织。两者都是Salesforce DX工具集的一部分。Salesforce DX是由Salesforce构建和支持的一组集成开发工具。 Salesforce命令行界面（CLI） Salesforce CLI提供了一种快速的方法来运行用于创建和配置临时组织以及部署组件的操作。这也是Salesforce DX工具集的一部分。 Lightning组件库有关Aura和Lightning Web组件以及如何使用它们的参考，请参见 https://developer.salesforce.com/docs/component-library/overview/components。

您也可以通过组织的实例查看该库，网址为http：// <instance> .lightning.force.com / docs / component-library。通过查看实例中的库，您只会看到组织的正确版本。而且，当您创建自己的自定义组件时，它们也会出现在库中。

GitHub我们通过GitHub存储库共享扩展，示例等。获取一个GitHub帐户，以确保您可以利用这些产品。 Visual Studio代码Salesforce扩展包我们将Visual Studio视为开发工具，为您提供用于构建组件的集成环境。适用于Visual Studio Code的Salesforce扩展包提供了代码提示，棉绒警告和内置命令：https : //marketplace.visualstudio.com/items?itemName= salesforce.salesforcedx-vscode 。 Lightning Web组件食谱我们提供了一个GitHub存储库，以帮助您了解Lightning Web组件的工作方式。您可以克隆，修补并将这些样本混合发布到您自己的临时组织中，并查看它们的实际效果。拿到 https://github.com/trailheadapps/lwc-recipes。 电动自行车演示此GitHub存储库是查看Lightning Web组件如何工作的另一种好方法。电动自行车演示是Lightning Web组件的端到端实现，以创建应用程序。在您自己的临时组织中尝试此示例。在https://github.com/trailheadapps/ebikes-lwc上获取它。 Lightning Data Service（LDS）通过Lightning Data Service从Salesforce访问数据和元数据。与数据配合使用的基础Lightning组件基于LDS构建。自定义您自己的组件，以利用LDS缓存，变更跟踪，性能等优势。 防雷柜通过具有Lightning Locker的安全性，可以保护属于一个名称空间的Lightning Web组件免受其他名称空间中的组件的影响。通过仅允许访问受支持的API并消除对未发布框架内部的访问，Lightning Locker还倡导了最佳实践，这些最佳实践提高了代码的可支持性。

展望未来

欢迎来到Lightning Web组件的世界

在您准备将文件部署到临时组织之前，我们将继续使用Lightning Web Components Playground作为另一个单元。在操场上，我们将看到您可以使用HTML和JavaScript文件做什么。