了解 Lightning Web 组件

学习目标

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

解释 Lightning Web 组件编程模型。
列出使用 Lightning web 组件的好处。
知道开始开发 Lightning web 组件所需的内容。

Web 标准编程的门户

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

Lightning Web 组件专注于开发人员和用户体验。因为我们打开了现有技术的大门，您可以利用在 Salesforce 之外所掌握的技能来构建 Lightning web 组件。所有这些都可供您使用，而无需放弃您已经通过 Aura 组件实现的成果。

您是否注意到了上一段中大小写字母的不同？如果是的话，您的观察力堪称敏锐。指“Lightning Web 组件”编程模型时，所有单词都大写（英文原文：Lightning Web Component）。指组件自身时，仅第一个单词大写，即“Lightning web 组件”（英文原文：Lightning web component）。

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

在您继续学习之前

您应该已经对 Salesforce DX 项目和 Salesforce CLI 有了基本的了解。您还需要在 Trailhead 帐户中使用正确配置的组织，并将 VS Code 与 Salesforce 扩展包一同使用。您可以通过完成快速入门：Lightning Web 组件模块来掌握所有这些知识。

为什么选择 Lightning Web 组件？

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

Lightning Web 组件使用核心 Web 组件标准，并且仅提供在 Salesforce 支持的浏览器中流畅运行所必需的内容。由于 Lightning Web 组件是基于在浏览器中本地运行的代码构建的，因此是轻量级的，并具有出色的性能。您编写的大部分代码都是标准的 JavaScript 和 HTML 代码。

您会发现以下方面更加容易：

在 Web 上常见的地方找到解决方案。
寻找具备必要技能和经验的开发人员。
利用其他开发人员的经验（甚至是在其他平台上的）。
提高开发速度。
利用完整的封装，使组件功能更丰富。

而且 web 组件并不是什么新鲜事物。事实上，浏览器多年来一直在创造这些东西。例如 <select>、<video>、<input> 以及不止作为容器的标签。这些元素实际上就相当于 web 组件。我们的目标是在 Salesforce 开发中实现这种集成水平。

简单组件创建

遵循 web 标准的好处在于简单。您无需研究特定框架的怪异之处。您只需使用 HTML、JavaScript 和 CSS 创建组件即可。创建 Lightning 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';
}

稍后我们还将详细介绍导入语句和类声明。

CSS

input {
  color: blue;
}

至少，您真正需要的是一个 HTML 文件和一个与之同名的 JavaScript 文件，并将它们放在同一个文件夹中（也具有匹配名称）。您将它们部署到带有一些元数据的组织中，然后就可以开始了。Salesforce 会自动编译您的文件，并负责样板组件的构建。

Lightning Web 组件和 Aura 组件协同工作

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

实际上，Aura 组件可以包含 Lightning web 组件（但反之则不然）。但是纯粹的 Lightning web 组件实现提供了完整的封装，并且遵循不断变化的常见标准。

可以使用的很酷的东西

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

DevOps Center
Salesforce DevOps Center 在变更和发布管理方面提供了改进的体验，为您的开发团队带来 DevOps 最佳实践，无论您的开发团队处于从低代码到专业代码的哪个阶段。
Code Builder
Salesforce Code Builder 是一个基于 Web 的集成开发环境，在您的 Web 浏览器中提供 Visual Studio Code、Salesforce Extensions for VS Code 和 Salesforce CLI 的所有功能和灵活性。
Dev Hub 和临时组织
临时组织是对开发和测试提供支持的一次性 Salesforce 组织。Dev Hub 是管理临时组织的一项功能。两者都是 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://<MyDomainName>.lightning.force.com/docs/component-library。通过实例查看组件库时，您只会看到组织的正确版本。而且，当您创建自己的自定义组件时，它们也会出现在该组件库中。

GitHub
我们通过 GitHub 存储库共享扩展、示例等。获取一个 GitHub 帐户，以确保您可以使用这些产品。
- 适用于 Visual Studio Code 的 Salesforce 扩展包
  我们的目标是将 Visual Studio 视为开发工具，为您提供用于构建组件的集成环境。适用于 Visual Studio Code 的 Salesforce 扩展包提供了代码提示、lint 警告和内置命令：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 Locker 的安全性保护属于一个命名空间的 Lightning web 组件免受其他命名空间中组件的影响。Lightning Locker 还通过仅允许访问受支持的 API 并禁止访问未发布的框架内部来倡导最佳实践，提高代码的可支持性。

展望未来

欢迎来到 Lightning web 组件的世界

我们将通过 eBikes 演示来介绍 HTML 和 JavaScript 文件的用途。

需要帮助？

了解更多