上单元为您介绍了Lightning Experience自定义的相关内容，也就是无需编写代码，即可自定义Lightning Experience用户界面。本单元将为您介绍在Salesforce开发过程中，Lightning Web组件的基础知识。

 

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

 

Lightning Web组件同时关注开发者和用户体验。因为我们已经打开了现有技术的大门，您可以使用您在Salesforce之外开发的技能来构建Lightning Web组件，而且无需放弃在Aura组件中已经实现的功能。另外，您一直在使用的Lightning 组件编程模型现在都被称为Aura 组件。

 

您应该对Salesforce DX和Salesforce CLI有一个基本的了解。您还需要在您的Trailhead帐户中使用正确配置的org，并使用带有Salesforce扩展包的VS Code。如果您使用的是连接到您的Trailhead账户的开发版org，您需要在Setup中部署My Domain（Trailhead Playground orgs会自动部署My Domain）。

 

现代浏览器都是基于web标准的，而不断发展的标准也在不断改善浏览器能够呈现给用户的内容。我们希望您能够利用这些创新。

 

Lightning Web组件使用核心Web组件标准，只提供在Salesforce支持的浏览器中表现良好的必要内容。由于Lightning Web组件是基于在浏览器中本地运行的代码而构建的，所以它是轻量级的，同时可提供卓越的性能。您还会发现更容易：

•  在网上常见的地方找到解决方案。

•  寻找具有必要技能和经验的开发人员。

•  借鉴其他开发人员的经验。

•  开发速度更快。

•  利用完全封装，使组件更加通用。

 

Lightning组件并不是什么新鲜事物。事实上，各个浏览器多年来一直在创建这些功能。<select>、<video>、<input>等不只是一个容器的标签，这些元素实际上相当于Web组件。我们的目标是为Salesforce开发带来高程度的集成。

 

遵循web标准的好处在于简单。您无需研究某个框架的特性，只需使用HTML、JavaScript和CSS就可以创建Lightning Web组件。HTML为组件提供了结构；JavaScript定义了核心业务逻辑和事件处理；CSS为组件提供外观、感觉和动画。这些是Lightning Web组件的基本部分。

 

HTML：模板标签是Lightning Web的基本构建块，您可以在此处存储HTML的内容。

JavaScript：稍后我们会详细介绍import语句和类声明。

CSS：您真正需要的是在同一文件夹中具有相同名称的HTML文件和JavaScript文件，您将这些内容部署到有元数据的组织中，就可以开始了。Salesforce会自动编译您的文件，并为您处理模板组件的构建。

 

Salesforce在引入Lightning Web组件时，没有减少对Aura组件的现有支持。因此您可以将现有组件迁移到Lightning Web组件模型中，在不放弃现有Aura组件的情况下使用Lightning Web组件，实现组件共存。事实上，Aura组件可以包含Lightning Web组件（反之亦然）。但纯粹的Lightning Web组件的实现提供了完整的封装和对不断发展的通用标准的遵守。

 

要想高效地开发Lightning web组件，可以使用以下工具和环境。

Dev Hub和Scratch Orgs

Scratch orgs是一次性的Salesforce orgs，用于支持开发和测试。Dev Hub用于管理Scratch Orgs。两者都是Salesforce DX工具集的一部分。Salesforce DX是由Salesforce构建和支持的一套集成开发工具。

•  Salesforce命令行界面 （CLI）

Salesforce CLI 提供了一种快速运行操作的方法，用于创建和配置Scratch orgs以及部署组件。这也是Salesforce DX工具集的一部分。

•  Lightning组件库

Aura和Lightning web组件的参考资料和使用方法，您可以在Salesforce的开发者培训栏目中寻找，也可以通过组织的实例http://<MyDomainName>.lightning.force.com/docs/component-library查看库。通过实例查看库，您只能看到组织的正确版本。而且，当您创建自定义组件时，它们也会出现在库中。

 

GitHub

Salesforce通过GitHub存储库实现共享扩展、示例等。申请一个GitHub帐户，以确保您可以使用这些产品。

•  Visual Studio Code Salesforce扩展包  

Visual Studio是一种开发工具，Salesforce利用该工具为您提供一个集成的环境来构建组件。Salesforce for Visual Studio Code扩展包提供代码提示、lint警告等。

•  Lightning Web 组件存储库

Salesforce提供了一个GitHub资源库来帮助您了解Lightning Web组件的工作原理。您可以克隆、修补这些示例组合，并将其发布到您自己的scratch org上。

•  e-bikes demo

GitHub资源库是了解Lightning Web组件工作原理的好方法，e-bikes demo是用于创建从端到端的Lightning web组件。

•  Lightning Data Service（LDS）

通过Lightning Data Service访问Salesforce的数据和元数据，基本的Lightning组件是建立在LDS之上的。利用LDS缓存、更改跟踪、性能等优势，自定义您自己的组件。

•  Lightning Locker

Lightning Web组件通过Lightning Locker的安全性不受不同命名空间中的组件的影响。Lightning Locker 还推广了最佳实践，通过仅允许访问受支持的 API 并消除对未发布的框架内部的访问来提高代码的可支持性。

 

接下来的内容，我们将使用eBikes演示，看看您能用HTML和JavaScript文件做什么。