分类： 闪电Web组件基础

学习目标

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

• 将CSS和Lightning Design System与组件一起使用。
• 从Salesforce组织获取数据。
• 将您的应用程序部署到组织并进行测试。

调整组件

我们几乎结束了对Lightning Web组件的介绍，但让我们来看看如何控制组件的外观并提取实时数据。我们可以使外观适应Lightning环境，并在组织中使用实时数据。在本单元中，我们将使某些文本看起来生动活泼，并从您的组织中的记录中动态绘制一个帐户名。

使用上一个单元中的Bike Selector App文件来完成此操作。

CSS和组件样式

用于闪电Web组件的CSS的实现遵循 W3C标准。您可以在CSS文件中创建样式表，该样式表会自动应用于相应的HTML文件。

Lightning Web Components封装了组件，使它们与全局DOM分开。我们通过称为Shadow DOM的机制来完成此操作。Shadow DOM是一种常见的实现，它允许组件的元素位于DOM的“子树”中（在参考资料部分提供的链接中了解有关Shadow DOM的更多信息）。该组件可以将其外观和行为保留在其他应用程序中或作为另一个组件的子代。

例如，让我们设置一辆自行车的价格，使其显示为绿色粗体。将以下.price条目添加 到detail.css 文件。

body{
  margin: 0;
}
.price {
  color: green;
  font-weight: bold;
}

部署文件。

在组织中，您可能需要刷新页面以查看更改，以防被缓存。然后，当您选择一辆自行车时，价格为绿色和粗体。

应用闪电设计系统样式

Salesforce闪电设计系统（SLDS）是一个CSS框架，提供与Lightning Experience一致的外观。位于Lightning Experience或Salesforce移动应用程序中的Lightning Web组件可以使用SLDS，而无需任何导入语句或静态资源。

例如，您可以使用SLDS标题样式来提供细节组件文本，该文本看起来更像标准的Lightning文本。更新detail.html 文件以使用 slds-text-heading_small和 slds-text-heading_medium字体设置，如下所示。

<template>
    <template if:true={product}>
    <div class="container">
        <div class="slds-text-heading_small">{product.fields.Name.value}</div>
        <div class="price">{product.fields.MSRP__c.displayValue}</div>
        <div class="description">{product.fields.Description__c.value}</div>
        <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
        <p>
            <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
            <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
        </p>
        <p>
            <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
        </p>
    </div>
    </template>
    <template if:false={product}>
    <div class="slds-text-heading_medium">Select a bike</div>
    </template>
</template>

部署文件。

现在，尝试在组织中使用该组件，看看有什么不同（您需要刷新页面）。

看起来很棒！现在我们已经准备好外观。但是到目前为止，我们一直在使用从数据组件中提取的静态数据。让我们在页面上添加更多闪亮的东西…动态数据。

获取Salesforce数据

毕竟，这是一个Salesforce应用程序，您真正想要的是能够从Salesforce组织中提取动态数据。Lightning Web组件使用基于Lightning Data Service构建的电抗线服务。我们将通过一个示例将一个帐户名动态地拉入我们的应用程序。

Wire Service将数据带到您的应用程序

有线服务是我们平台的一部分，可提供数据流。@wire我们前面已经简要提到过的装饰器为您的应用程序实现了有线服务。要使用有线服务，请执行以下操作。

1. 在JavaScript文件中导入电线适配器。
2. 用装饰器装饰属性或函数@wire。

这是语法。

import { adapterId } from 'adapter-module';
@wire(adapterId, adapterConfig)
propertyOrFunction;

• adapterId （标识符）-电线适配器的标识符。
• adapter-module （字符串）-包含电线适配器功能的模块的标识符。
• adapterConfig （对象）-专用于电线适配器的配置对象。
• propertyOrFunction—从有线服务接收数据流的私有财产或功能。如果属性用@wire装饰，则结果将返回到属性的data属性或error属性。如果函数使用@wire装饰，则结果将在具有data属性和error属性的对象中返回。

这是将其添加到 我们一直在致力于从组织中提取当前用户名的项目中的selector.js文件中的方法。

import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import NAME_FIELD from '@salesforce/schema/User.Name';
const fields = [NAME_FIELD];
export default class Selector extends LightningElement {
    selectedProductId;
    handleProductSelected(evt) {
        this.selectedProductId = evt.detail;
    }
    userId = Id;
    @wire(getRecord, { recordId: '$userId', fields })
    user;
    get name() {
        return getFieldValue(this.user.data, NAME_FIELD);
    }
}

您还可以通过编辑selector.html 文件以包含名称的方式来进行尝试。例如：

<template>
    <div class="wrapper">
    <header class="header">Available Bikes for {name}</header>
    <section class="content">
        <div class="columns">
        <main class="main" >
            <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
            <c-detail product-id={selectedProductId}></c-detail>
        </aside>
        </div>
    </section>
    </div>
</template>

将选择器组件文件部署到组织中时（确保部署中包括选择器文件），应该看到以下名称，而不是Mary Jones。您可能需要刷新页面。

结论

这仅仅是开始，您可以使用Lightning Web Components模型做很多事情。该模型包括对测试，安全性，Apex集成等的支持。继续探索，尝试新事物，继续建设。随着W3C Web组件标准的发展，我们的模型也将随之发展。

学习目标

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

• 创建一个包含多个组件的应用程序。
• 描述复杂组件的文件结构。
• 处理事件。

跟随活动的旅程

您已经构建了一个组件并将其推送到临时组织。让我们开始添加一些与事件处理的交互性。我们通过几个组件跟踪事件的旅程，以在应用程序中进行复杂的事件处理。此应用程序是自行车商店的产品选择器。用户单击自行车名称和图像以查看更多详细信息。

这个程序有四个组件一起工作。

1. tile：显示单个项目。
2. list：排列瓷砖。
3. detail：单击磁贴时显示项目详细信息（类似于您刚创建的bikeCard）。
4. 选择器：包含整个组件集。容器组件不是必需的，但是我们在这里使用一个容器组件来帮助处理事件。

目前，该应用程序使用数据文件来加载静态数据以进行测试。在下一单元中，您将学习如何从组织中提取动态数据。

成分组成

让我们将一些文件添加到我们的项目中，然后将其部署到组织中。

1. 在此处下载此应用程序的文件： Trailhead的Bike Selector应用程序。
2. 将文件解压缩到bikeCard项目的lwc文件夹中。

组件关系

在此应用中，多个组件可以协同工作；一些组件嵌套在其他组件内部。正如您将HTML元素彼此嵌套一样，作为自定义HTML元素的Lightning Web组件也可以嵌套在其他Lightning Web组件内。

在我们的文件系统中，组件的文件夹实际上并不能深入了解它们之间的关系。

让我们看看图中的组件如何嵌套在UI级别上。

选择器组件对页面进行布局，并呈现列表和详细信息组件。list组件呈现了多个tile组件，数据中的每辆自行车一个。

<template>
    <div class="wrapper">
    <header class="header">Available Bikes</header>
    <section class="content">
        <div class="columns">
        <main class="main" >
            <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
            <c-detail product-id={selectedProductId}></c-detail>
        </aside>
        </div>
    </section>
    </div>
</template>

如果您查看detail.html，则会看到条件渲染。如果未从列表中选择任何内容，那么将显示一条消息，要求用户选择某些内容。如果选择了某些内容，它将显示自行车信息。

<template>
    <template if:true={product}>
        <div class="container">
            <div>{product.fields.Name.value}</div>
            <div class="price">{product.fields.MSRP__c.displayValue}</div>
            <div class="description">{product.fields.Description__c.value}</div>
            <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
            <p>
                <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
                <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
            </p>
            <p>
                <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
            </p>
        </div>
    </template>
    <template if:false={product}>
        <div>Select a bike</div>
    </template>
</template>

嵌套是在HTML中为每个父组件实现的。例如，list组件具有以下HTML，其中包括tile组件为c-tile。

<template>
    <div class="container">
        <template for:each={bikes} for:item="bike">
            <c-tile
                key={bike.fields.Id.value}
                product={bike}
                ontileclick={handleTileClick}>
            </c-tile>
        </template>
    </div>
</template>

请注意，自行车项目的每次迭代如何生成新的图块组件。简单地包括c-tilecomponent标记即可使每个tile组件成为其子级。div类定义“容器”用于样式设置，因此您可以控制图块的排列。如果查看list.css，则会看到它包装了内容。

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

父子关系不仅对于应用程序的设计很重要，而且对于事件处理也很重要。

让我们更深入地了解事件处理。

事件增加，属性减少

在一个复杂的组件（一个包含多个父组件和子组件）中，这些组件可以上下通信。

1. c-todo-item子组件将事件调度到父c-todo-app组件。例如，当用户单击按钮时，子级可以将事件对象传递给父级，以便父级可以处理事件并更改当前页面。
2. c-todo-app父组件在子组件中传递属性或调用方法。例如，父级可以在子级组件中设置文本值，或在子级组件中调用方法。

让我们看看这种交流是如何工作的。

传递信息

可以使用事件和 事件侦听器传递信息 。

子组件调度事件，父组件监听事件。调度事件包括创建一个事件对象，孩子可以将该事件对象传递给父组件。父级具有处理程序以响应事件。

例如，像这样的子组件包含一个nextHandler()方法，该方法使用创建一个简单的事件对象，CustomEvent()并在用户单击“下一步”按钮时分派next值。

// todoItem.js
import { LightningElement } from 'lwc';
...
    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
}

父组件侦听该事件。

<!– todoApp.html -->
<template>
    <c-todo-item onnext={nextHandler}></c-child>
</template>

并将事件对象传递给事件处理程序。

// todoApp.js
import { LightningElement } from 'lwc';
export default class TodoApp extends LightningElement {
...
nextHandler(){
        this.page = this.page + 1;
    }
}

传递信息

可以使用公共属性和 公共方法来传递信息 。

您可以通过在@api装饰器前面添加组件属性来使其公开。然后，通过外部组件设置公共属性。

例如，如果c-todo-item子组件具有以下内容：

// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
   @api itemName;
}

使用以下命令设置父项的值：

<!– todoApp.html -->
<template>
    <c-todo-item item-name="Milk"></c-todo-item>
</template>

公共属性是传递原始值，简单对象和数组的绝佳解决方案。

另外，可以 在获取或设置属性时使用getter和setter来执行一些逻辑。并记住，用@api装饰器注释它们，以使其对其他组件公开。

同样，您可以创建可从父组件调用的公共方法。通过使用@api装饰器定义子组件，在子组件中创建一个公共方法，然后从父组件中调用它。

假设我们有一个像这样的子组件。

// videoPlayer.js
import { LightningElement, api } from 'lwc';
export default class VideoPlayer extends LightningElement {
   @api
   play() {
       // Play music!
   }
}

当c-video-player组件包含在父组件中时，我们可以像这样从父组件调用方法：

// methodCaller.js
import { LightningElement } from 'lwc';
export default class MethodCaller extends LightningElement {
   handlePlay() {
      this.template.querySelector('c-video-player').play();
   }
}

我们定义了一种handlePlay()触发事件的方法。然后，我们使用querySelector()DOM方法搜索名为c-video-player的DOM元素并调用其公共方法。

用HTML处理事件

因此，我们的选择器应用程序需要处理一种类型的事件-用户单击磁贴。发生这种情况时，详细信息组件应使用相关图块中的信息重新呈现。您可以处理HTML中的事件（在模板中添加事件侦听器）或JavaScript（编写事件侦听器函数）。我们建议使用HTML方法，如下所示。

每个图块组件都侦听用户单击，因为图块组件的HTML（tile.html）包含onclick事件侦听器。

<template>
    <div class="container">
        <a onclick={tileClick}>
            <div class="title">{product.fields.Name.value}</div>
            <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
        </a>
    </div>
</template>

当用户单击UI中的一个tile实例时，onclick侦听器将调用tileClicktile.js JavaScript文件中的处理程序函数。

import { LightningElement, api } from 'lwc';
export default class Tile extends LightningElement {
    @api product;
    tileClick() {
        const event = new CustomEvent('tileclick', {
            // detail contains only primitives
            detail: this.product.fields.Id.value
        });
        // Fire the event from c-tile
        this.dispatchEvent(event);
    }
}

选择器应用程序事件模式

在产品选择器应用程序中，我们使用一个复杂的组件（一个组件包含多个父组件和子组件），建议您通过组件层次结构向上传播事件，以便父组件可以响应子事件。如果您还有其他子组件（而不是引发事件的子组件），则可以将属性传递给这些子组件以响应事件。

该模式如下所示：

为此，我们需要将事件侦听器和处理程序按层次结构链接到ebikes组件。然后将一个属性传递到详细信息组件。

在我们的示例文件中，您将看到以下内容。

1. tile.html具有onclick事件侦听器，该事件侦听器调用tileClick处理程序。
2. tile.js具有tileClick创建包含细节值（this.product.fields.Id.value）的新CustomEvent对象的方法。
3. List.html具有ontileClick调用handleTileClick处理程序的侦听器。
4. List.js具有handleTileClick创建另一个evt也包含详细信息值的事件对象（）的方法。并使用JavaScript调度事件：

   // Fire the event from c-list
   this.dispatchEvent(event);
5. 选择器.html具有onproductselected调用handleProductSelected处理程序的事件侦听器。
6. selector.js将handleProductSelected方法设置selectedProductId为该evt.detail值。
7. detail.html具有等待产品值的条件指令（还记得单元2中的指令）吗：

   <template if:true={product}>
8. detail.js将各个部分组合在一起。它创建一个私有variable _productId来跟踪productId值的状态。然后，它使用获取/设置模式获取值并将其设置为私有变量产品，该产品可以让detail.html加载条件内容。

Getter和Setter是常见的JavaScript结构。它们使您可以向属性分配添加逻辑和条件。

import { LightningElement, api } from 'lwc';
import { bikes } from 'c/data';
export default class Detail extends LightningElement {
    product;
    // Private var to track @api productId
    _productId = undefined;
    // Use set and get to process the value every time it's
    // requested while switching between products
    set productId(value) {
        this._productId = value;
        this.product = bikes.find(bike => bike.fields.Id.value === value);
    }
    // getter for productId
    @api get productId(){
        return this._productId;
    }
}

每次单击磁贴时，此过程都会重复进行。

将文件部署到组织

让我们将这些文件部署到启用了Dev Hub的组织中，以了解其工作原理。使用在上一个单元中执行的相同步骤，部署新文件，打开组织，并使用此应用程序在Lightning App Builder中创建页面。

1. 要部署项目文件，请右键单击默认文件夹，然后选择SFDX：从VS Code中的命令面板中将源部署到组织。
2. 要打开您的组织，请使用SFDX：在VS Code中从命令面板打开默认组织。
3. 在设置中，在快速查找框中输入Lightning App Builder，然后选择Lightning App Builder。
4. 点击新建。
5. 使用选择器组件创建一个区域页面。

您将拥有一个完全交互式的页面，其中包含多个相互配合的组件。接下来，我们尝试样式化并从组织获取实时数据。

学习目标

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

• 创建一个包含多个组件的应用程序。
• 描述复杂组件的文件结构。
• 处理事件。

跟随活动的旅程

您已经构建了一个组件并将其推送到临时组织。让我们开始添加一些与事件处理的交互性。我们通过几个组件跟踪事件的旅程，以在应用程序中进行复杂的事件处理。此应用程序是自行车商店的产品选择器。用户单击自行车名称和图像以查看更多详细信息。

这个程序有四个组件一起工作。

1. tile：显示单个项目。
2. list：排列瓷砖。
3. detail：单击磁贴时显示项目详细信息（类似于您刚创建的bikeCard）。
4. 选择器：包含整个组件集。容器组件不是必需的，但是我们在这里使用一个容器组件来帮助处理事件。

目前，该应用程序使用数据文件来加载静态数据以进行测试。在下一单元中，您将学习如何从组织中提取动态数据。

成分组成

让我们将一些文件添加到我们的项目中，然后将其部署到组织中。

1. 在此处下载此应用程序的文件： Trailhead的Bike Selector应用程序。
2. 将文件解压缩到bikeCard项目的lwc文件夹中。

组件关系

在此应用中，多个组件可以协同工作；一些组件嵌套在其他组件内部。正如您将HTML元素彼此嵌套一样，作为自定义HTML元素的Lightning Web组件也可以嵌套在其他Lightning Web组件内。

在我们的文件系统中，组件的文件夹实际上并不能深入了解它们之间的关系。

让我们看看图中的组件如何嵌套在UI级别上。

选择器组件对页面进行布局，并呈现列表和详细信息组件。list组件呈现了多个tile组件，数据中的每辆自行车一个。

<template>
    <div class="wrapper">
    <header class="header">Available Bikes</header>
    <section class="content">
        <div class="columns">
        <main class="main" >
            <c-list onproductselected={handleProductSelected}></c-list>
        </main>
        <aside class="sidebar-second">
            <c-detail product-id={selectedProductId}></c-detail>
        </aside>
        </div>
    </section>
    </div>
</template>

如果您查看detail.html，则会看到条件渲染。如果未从列表中选择任何内容，那么将显示一条消息，要求用户选择某些内容。如果选择了某些内容，它将显示自行车信息。

<template>
    <template if:true={product}>
        <div class="container">
            <div>{product.fields.Name.value}</div>
            <div class="price">{product.fields.MSRP__c.displayValue}</div>
            <div class="description">{product.fields.Description__c.value}</div>
            <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
            <p>
                <lightning-badge label={product.fields.Material__c.value}></lightning-badge>
                <lightning-badge label={product.fields.Level__c.value}></lightning-badge>
            </p>
            <p>
                <lightning-badge label={product.fields.Category__c.value}></lightning-badge>
            </p>
        </div>
    </template>
    <template if:false={product}>
        <div>Select a bike</div>
    </template>
</template>

嵌套是在HTML中为每个父组件实现的。例如，list组件具有以下HTML，其中包括tile组件为c-tile。

<template>
    <div class="container">
        <template for:each={bikes} for:item="bike">
            <c-tile
                key={bike.fields.Id.value}
                product={bike}
                ontileclick={handleTileClick}>
            </c-tile>
        </template>
    </div>
</template>

请注意，自行车项目的每次迭代如何生成新的图块组件。简单地包括c-tilecomponent标记即可使每个tile组件成为其子级。div类定义“容器”用于样式设置，因此您可以控制图块的排列。如果查看list.css，则会看到它包装了内容。

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

父子关系不仅对于应用程序的设计很重要，而且对于事件处理也很重要。

让我们更深入地了解事件处理。

事件增加，属性减少

在一个复杂的组件（一个包含多个父组件和子组件）中，这些组件可以上下通信。

1. c-todo-item子组件将事件调度到父c-todo-app组件。例如，当用户单击按钮时，子级可以将事件对象传递给父级，以便父级可以处理事件并更改当前页面。
2. c-todo-app父组件在子组件中传递属性或调用方法。例如，父级可以在子级组件中设置文本值，或在子级组件中调用方法。

让我们看看这种交流是如何工作的。

传递信息

可以使用事件和 事件侦听器传递信息 。

子组件调度事件，父组件监听事件。调度事件包括创建一个事件对象，孩子可以将该事件对象传递给父组件。父级具有处理程序以响应事件。

例如，像这样的子组件包含一个nextHandler()方法，该方法使用创建一个简单的事件对象，CustomEvent()并在用户单击“下一步”按钮时分派next值。

// todoItem.js
import { LightningElement } from 'lwc';
...
    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
}

父组件侦听该事件。

<!– todoApp.html -->
<template>
    <c-todo-item onnext={nextHandler}></c-child>
</template>

并将事件对象传递给事件处理程序。

// todoApp.js
import { LightningElement } from 'lwc';
export default class TodoApp extends LightningElement {
...
nextHandler(){
        this.page = this.page + 1;
    }
}

传递信息

可以使用公共属性和 公共方法来传递信息 。

您可以通过在@api装饰器前面添加组件属性来使其公开。然后，通过外部组件设置公共属性。

例如，如果c-todo-item子组件具有以下内容：

// todoItem.js
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement {
   @api itemName;
}

使用以下命令设置父项的值：

<!– todoApp.html -->
<template>
    <c-todo-item item-name="Milk"></c-todo-item>
</template>

公共属性是传递原始值，简单对象和数组的绝佳解决方案。

另外，可以 在获取或设置属性时使用getter和setter来执行一些逻辑。并记住，用@api装饰器注释它们，以使其对其他组件公开。

同样，您可以创建可从父组件调用的公共方法。通过使用@api装饰器定义子组件，在子组件中创建一个公共方法，然后从父组件中调用它。

假设我们有一个像这样的子组件。

// videoPlayer.js
import { LightningElement, api } from 'lwc';
export default class VideoPlayer extends LightningElement {
   @api
   play() {
       // Play music!
   }
}

当c-video-player组件包含在父组件中时，我们可以像这样从父组件调用方法：

// methodCaller.js
import { LightningElement } from 'lwc';
export default class MethodCaller extends LightningElement {
   handlePlay() {
      this.template.querySelector('c-video-player').play();
   }
}

我们定义了一种handlePlay()触发事件的方法。然后，我们使用querySelector()DOM方法搜索名为c-video-player的DOM元素并调用其公共方法。

用HTML处理事件

因此，我们的选择器应用程序需要处理一种类型的事件-用户单击磁贴。发生这种情况时，详细信息组件应使用相关图块中的信息重新呈现。您可以处理HTML中的事件（在模板中添加事件侦听器）或JavaScript（编写事件侦听器函数）。我们建议使用HTML方法，如下所示。

每个图块组件都侦听用户单击，因为图块组件的HTML（tile.html）包含onclick事件侦听器。

<template>
    <div class="container">
        <a onclick={tileClick}>
            <div class="title">{product.fields.Name.value}</div>
            <img class="product-img" src={product.fields.Picture_URL__c.value}></img>
        </a>
    </div>
</template>

当用户单击UI中的一个tile实例时，onclick侦听器将调用tileClicktile.js JavaScript文件中的处理程序函数。

import { LightningElement, api } from 'lwc';
export default class Tile extends LightningElement {
    @api product;
    tileClick() {
        const event = new CustomEvent('tileclick', {
            // detail contains only primitives
            detail: this.product.fields.Id.value
        });
        // Fire the event from c-tile
        this.dispatchEvent(event);
    }
}

选择器应用程序事件模式

在产品选择器应用程序中，我们使用一个复杂的组件（一个组件包含多个父组件和子组件），建议您通过组件层次结构向上传播事件，以便父组件可以响应子事件。如果您还有其他子组件（而不是引发事件的子组件），则可以将属性传递给这些子组件以响应事件。

该模式如下所示：

为此，我们需要将事件侦听器和处理程序按层次结构链接到ebikes组件。然后将一个属性传递到详细信息组件。

在我们的示例文件中，您将看到以下内容。

1. tile.html具有onclick事件侦听器，该事件侦听器调用tileClick处理程序。
2. tile.js具有tileClick创建包含细节值（this.product.fields.Id.value）的新CustomEvent对象的方法。
3. List.html具有ontileClick调用handleTileClick处理程序的侦听器。
4. List.js具有handleTileClick创建另一个evt也包含详细信息值的事件对象（）的方法。并使用JavaScript调度事件：

   // Fire the event from c-list
   this.dispatchEvent(event);
5. 选择器.html具有onproductselected调用handleProductSelected处理程序的事件侦听器。
6. selector.js将handleProductSelected方法设置selectedProductId为该evt.detail值。
7. detail.html具有等待产品值的条件指令（还记得单元2中的指令）吗：

   <template if:true={product}>
8. detail.js将各个部分组合在一起。它创建一个私有variable _productId来跟踪productId值的状态。然后，它使用获取/设置模式获取值并将其设置为私有变量产品，该产品可以让detail.html加载条件内容。

Getter和Setter是常见的JavaScript结构。它们使您可以向属性分配添加逻辑和条件。

import { LightningElement, api } from 'lwc';
import { bikes } from 'c/data';
export default class Detail extends LightningElement {
    product;
    // Private var to track @api productId
    _productId = undefined;
    // Use set and get to process the value every time it's
    // requested while switching between products
    set productId(value) {
        this._productId = value;
        this.product = bikes.find(bike => bike.fields.Id.value === value);
    }
    // getter for productId
    @api get productId(){
        return this._productId;
    }
}

每次单击磁贴时，此过程都会重复进行。

将文件部署到组织

让我们将这些文件部署到启用了Dev Hub的组织中，以了解其工作原理。使用在上一个单元中执行的相同步骤，部署新文件，打开组织，并使用此应用程序在Lightning App Builder中创建页面。

1. 要部署项目文件，请右键单击默认文件夹，然后选择SFDX：从VS Code中的命令面板中将源部署到组织。
2. 要打开您的组织，请使用SFDX：在VS Code中从命令面板打开默认组织。
3. 在设置中，在快速查找框中输入Lightning App Builder，然后选择Lightning App Builder。
4. 点击新建。
5. 使用选择器组件创建一个区域页面。

您将拥有一个完全交互式的页面，其中包含多个相互配合的组件。接下来，我们尝试样式化并从组织获取实时数据。

学习目标

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

• 配置Lightning Web组件文件以在组织中显示。
• 将文件部署到组织。
• 验证组织环境中的组件行为。

加强组织

现在是时候离开游乐场了，尽管您会发现它是一个非常有用的地方。在本单元中，我们使用带有Salesforce扩展的VS Code开发Lightning Web组件。我们将文件部署到组织中，并构建一个应用程序来使用您的组件。

你需要什么

如第一单元所述，您需要对Salesforce DX有一定的了解才能继续。要完成本单元，您需要：

• 带Salesforce扩展包的Visual Studio代码
• Salesforce CLI
• 已启用开发中心的组织
• 将My Domain部署到启用了Dev Hub的组织中的用户（在Trailhead中创建的Playground组织已为您部署了My Domain。如果将Developer Edition组织与您的Trailhead帐户相关联，请启用并部署My Domain。）

要满足其余这些要求，请完成“ 快速入门：闪电Web组件”项目。如果尚未配置，请启用Dev Hub并从组织中的“设置”菜单部署“我的域”。

设置要在组织中使用的Lightning Web组件文件

您将以上一个单元为例，将其命名为bikeCard组件并将其推送到您的组织。

将组件推送到组织所需的文件：

bikeCard.html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

1. 通过选择SFDX创建项目：在VS Code中从命令面板创建项目。接受标准模板，并为其指定项目名称bikeCard。
2. 右键单击lwc文件夹，然后选择SFDX：Create Lightning Web Component，创建一个bikeCard组件文件夹和文件。
3. 将内容保存在bikeCard \ force-app \ main \ default \ lwc下的文件中，以便在VS Code中看到以下内容： Lightning Web组件遵循Web标准。HTML标准建议自定义元素名称包含连字符。但是，Salesforce平台不允许在组件文件夹或文件名中使用连字符。因此，我们在这里使用camelCase命名约定。
4. 从上方复制bikeCard.html，bikeCard.js和bikeCard.js-meta.xml文件的内容
5. 保存文件。

组件配置文件

我们尚未介绍的文件是扩展名为的组件配置文件.js-meta.xml。该文件提供了Salesforce的元数据，包括打算在Lightning App Builder中使用的组件的设计配置。

我们尚未涵盖配置文件，因为我们一直在操场上玩。现在，您将开始使用组织中的内容，您必须包括一个配置文件。

请注意，ebikes repo组件均具有此配置文件。这是ebikes回购中的 一个示例：

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

必需的 apiVersion将组件绑定到Salesforce API版本。

isExposed（true或false）使组件可从其他命名空间使用。仅将其设置为true才能使Lightning组件在以下特定情况下可用：

• 从Aura中的托管软件包
• 从另一个组织中的Lightning App Builder

可选 目标指定可以在Lightning App Builder中将组件添加到哪种Lightning页面类型。

使用targetConfigs可以指定特定于每种Lightning页面的行为，包括诸如哪些对象支持该组件之类的事情。

请参阅 文档以获取受支持语法的完整列表。

在组织中显示组件

您有两个选项可用于在UI中显示Lightning Web组件。

1. 设置组件以支持各种灵活页类型（主页，记录主页等），然后使用Lightning App Builder将其添加到灵活页。这是最简单的方法，也是您在本单元中遵循的方法。
2. 您还可以创建一个选项卡，该选项卡指向包含Lightning Web组件的Aura组件。Lightning Web Components Recipes存储库使用此方法。您可以在回购中查看所需的件。
   • 包装组件
   • 可见性设置
   • 标签
   • 默认应用程序配置文件

部署文件

现在，您需要将组件文件部署到启用了Dev Hub的组织中。

1. 使用SFDX向您的Dev Hub组织进行身份验证：在VS Code中从命令面板授权组织。出现提示时，接受Project Default，然后按Enter接受默认别名。如果提示允许访问，请单击允许。
2. 使用SFDX部署项目文件：从VS Code中的命令面板将此源部署到组织。

为您的组件创建一个新页面

由于我们设置了组件配置文件以允许在Lightning App Builder中使用组件，因此请使用UI创建一个应用程序并将组件添加到其中。

1. 要打开您的组织，请使用SFDX：在VS Code中从命令面板打开默认组织。
2. 在设置中，在快速查找框中输入Lightning App Builder，然后选择Lightning App Builder。
3. 点击新建。
4. 选择应用程序页面，然后单击下一步。
5. 给它加上标签Bike Card，然后单击Next。
6. 选择一个地区，然后单击完成。
7. 在Lightning App Builder中，向下滚动左侧的Lightning组件列表，直到看到您的bikeCard组件。

现在，您可以将其拖动到页面上。保存页面，将其激活，然后BikeCard组件将显示在分配的页面上。

1. 将您的bikeCard组件拖到页面布局的顶部，直到看到自行车出现。
2. 点击保存。
3. 点击激活。
4. 对所有用户保持激活状态。并且，可以选择更改应用程序的名称或图标。
5. 点击保存。系统会要求您将页面添加到导航菜单，但不需要这样做。在这种环境下，您仍然可以进入页面。
6. 点击完成。
7. 单击右上角的“后退”退出Lightning App Builder。
8. 在应用启动器（ ）中，找到并选择Bike Card。
9. 打开它，然后查看您的组件在UI中的运行情况。

你去了，一辆闪亮的新自行车。您已经将组件推送到组织中，在页面上可以看到它，并且可以在UI中对其进行验证。

在下一个单元中，您将构建一个具有事件处理功能的交互式组件，并将其部署到组织中进行测试。

学习目标

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

• 描述每个组件文件的内容。
• 为Lightning Web组件创建JavaScript方法。
• 在组件JavaScript中使用生命周期挂钩。

一些严肃的游戏时间

假设您要独立于Salesforce中的特定对象构建数据显示元素。一个很好的例子是ebikes示例存储库中的 productCard组件。让我们检查一下该卡组件，并从头开始构建我们自己的版本，以便您可以看到它如何演变为成熟的Lightning Web组件。在Lightning Web Components Playground中构建组件的各个部分并探索更多示例时，您将快速获得基础知识。

组件只需要一个文件夹及其名称相同的文件。它们会按名称和位置自动链接。

所有Lightning Web组件都有一个名称空间，该名称空间与文件夹名称之间用连字符分隔。例如，默认名称空间c中文件夹名称为app的Lightning Web组件的标记为<c-app>。您可以main.js在Lightning Web Components Playground中看到这一点。

但是，Salesforce平台不允许在组件文件夹或文件名中使用连字符。如果组件的名称包含多个单词（例如“ mycomponent”）怎么办？您无法命名文件夹和文件my-component，但是我们有一个便捷的解决方案。

使用驼峰式外壳命名您的组件myComponent。驼峰案例组件文件夹名称在标记中映射到kebab-case。在标记中，要引用文件夹名为myComponent的组件，请使用<c-my-component>。

例如，LWC Samples存储库的 viewSource文件夹包含viewSource组件的文件。当hello组件 引用HTML中的viewSource组件时，将使用 c-view-source。

浏览HTML文件

Lightning Web组件HTML文件均包含 template标记。该 template标签包含定义您的组件结构的HTML。让我们看一下ebikes回购中productCard组件的简化版本的HTML。

接下来，将这些示例粘贴到 Lightning Web Components Playground中。

1. 单击新建开始一个新项目。
2. 将以下内容粘贴到app.html中（替换文件中所有现有的HTML）。

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

花括号{}中的标识符绑定到相应JavaScript类中同名的字段。

这是一个支持此HTML的JavaScript文件。将此粘贴到app.js。

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}

预览现在显示带有一些细节的自行车。如果没有，请点击运行。

现在，假设您要显示数据，但是您知道它可能需要一些时间才能加载。您不希望用户想知道怎么回事。您可以在模板中使用 if:false和 if:true条件指令来确定呈现哪些视觉元素。

在“显示”以下内容 div标签没有出现，直到值 ready是 true在HTML文件中。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

这是一些JavaScript在操场上进行测试。这将保留我们的数据值并设置3秒计时器。3秒后，内容应出现。（当然，这仅用于测试目的。）

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
   ready = false;
   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

单击运行以查看条件指令的运行。

基础闪电Web组件

现在，您不想从头开始构建所有组件。因此，让我们探索使用基本的Lightning Web组件。当然，还有很多组件，包括字段类型，显示控制器，导航项等等。所有这些都在“组件参考”中列出 。

让我们突出自行车的细节。为此，将上一个示例中的材质和类别的div标签替换为lightning-badge组件。这是HTML。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

钢铁和山峰这两个字作为徽章出现。就这么简单。

好。让我们看一下JavaScript。

使用JavaScript

这是使事情发生的地方。到目前为止，您已经看到，JavaScript方法定义了如何处理输入，数据，事件，状态更改等，以使组件正常工作。

Lightning Web组件的JavaScript文件必须至少包含此代码，其中 MyComponent是您分配的组件类的名称。

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
}

该 export语句定义了扩展 LightningElement该类的类。最佳做法是，类的名称通常与JavaScript类的文件名匹配，但这不是必需的。

LWC模块

Lightning Web Components使用模块（ECMAScript 6中引入了内置模块）来捆绑核心功能，并使组件文件中的JavaScript可以访问它。Lightning Web组件的核心模块是 lwc。

从import语句开始模块，并指定组件使用的模块功能。

该 import语句指示JavaScript使用模块中的 LightningElement功能 lwc。

// import module elements
import { LightningElement} from 'lwc';
// declare class to expose the component
export default class App extends LightningElement {
    ready = false;
    // use lifecycle hook
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

• LightningElement是Lightning Web组件的基类，它允许我们使用connectedCallback()。
• 该connectedCallback()方法是我们生命周期的钩子之一。在下一节中，您将了解有关生命周期挂钩的更多信息。现在，知道在将组件插入文档对象模型（DOM）中时触发该方法。在这种情况下，它将启动计时器。

生命周期挂钩

Lightning Web Components提供了一些方法，使您可以将代码“挂钩”到组件生命周期中的关键事件。这些事件包括组件何时为：

• 已建立
• 添加到DOM
• 在浏览器中呈现
• 遇到错误
• 已从DOM中删除

使用回调方法响应任何这些生命周期事件。例如，将 connectedCallback()组件插入DOM时将调用。disconnectedCallback()当从DOM中删除组件时， 将调用。

在我们用来测试条件渲染的JavaScript文件中，connectedCallback()当组件插入DOM时，我们使用了该 方法自动执行代码。代码等待3秒钟，然后设置ready为 true。

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    ready = false;
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

另外，请注意，我们使用了 this关键字。如果您已经编写了JavaScript，那么关键字的用法应该很熟悉，并且其行为就像在其他环境中一样。thisJavaScript中的 关键字指的是当前上下文的顶层。在这里，上下文是此类。该 connectedCallback()方法为顶级就绪变量分配值。这是一个很好的例子，说明了Lightning Web Components如何将JavaScript功能引入您的开发。您可以this在参考资料小节中找到有关良好信息的链接 。

我们发展很快，您已经可以尝试一些方法。在下一个单元中，我们将退后一步，进一步讨论组件所处的环境。

装饰工

装饰器通常在JavaScript中用于修改属性或函数的行为。

要使用装饰器，请从lwc模块导入装饰器， 并将其放置在属性或函数之前。

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
    @api message;
}

您可以导入多个装饰器，但是一个属性或函数只能有一个装饰器。例如，属性不能具有 @api和 @wire装饰器。

Lightning Web Components装饰器的示例包括：

• @api：将字段标记为公共。公共属性定义组件的API。在其HTML标记中使用该组件的所有者组件可以访问该组件的公共属性。所有公共属性都是反应性的，这意味着框架会观察该属性以进行更改。当属性值更改时，框架会做出反应并重新渲染组件。
  提示字段和属性几乎是可以互换的术语。组件作者在JavaScript类中声明字段。该类的实例具有属性。对于组件使用者，字段是属性。在Lightning Web组件中，只有组件作者@api用来装饰的字段才可以作为对象属性公开给消费者。
• @track：告诉框架观察对象属性或数组元素的更改。如果发生更改，框架将重新渲染该组件。所有字段都是反应性的。如果字段的值发生更改，并且该字段在模板中使用（或在模板中使用的属性的获取器中使用），则框架将重新渲染该组件。您无需使用修饰字段@track。使用@track如果一个字段包含一个对象或数组只，如果你想的框架来观察更改对象的属性或数组的元素。如果要更改整个属性的值，则无需使用@track。
  在20年春季之前，您必须使用@track将字段（也称为私有属性）标记为反应性。您不再需要这样做。使用@track只告诉框架来观察变化为对象的属性，或为数组的元素。一些旧的示例可能仍会@track在不需要的地方使用，但这没关系，因为使用装饰器不会更改功能或破坏代码。有关更多信息，请参见此 发行说明。
• @wire：为您提供一种从Salesforce组织获取和绑定数据的简便方法。

这是一个使用@api装饰器从另一个组件（应用程序）中的一个组件（自行车）渲染值的示例 。在组件游乐场中，文件如下所示：

该应用程序组件使用以下HTML。

<!-- app.html -->
<template>
<div>
    <c-bike bike={bike}></c-bike>
</div>
</template>

该应用程序组件使用以下JavaScript。

// app.js
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    bike = {
        name: 'Electra X4',
        picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'
    };
}

自行车组件使用以下HTML。

<!-- bike.html -->
<template>
    <img src={bike.picture} alt="bike picture" />
    <p>{bike.name}</p>
</template>

自行车组件使用以下JavaScript。

// bike.js
import { LightningElement, api } from 'lwc';
export default class Bike extends LightningElement {
    @api bike;
}

在带有和不带有@api装饰器的组件游乐场中尝试一下， 以查看行为。

奖金！在操场上尝试这些组件

既然您已经熟悉了组件操场，那么花点时间尝试一下Lightning Web Components Recipes中的一些示例 。尝试将其中的示例中的一些HTML，JavaScript和CSS粘贴到组件游乐场中，这是熟悉核心组件概念的一种好方法。

学习目标

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

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

Web标准编程的门户

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

Lightning Web Components专注于开发人员和用户体验。因为我们为现有技术打开了大门，所以您可以利用在Salesforce之外开发的技能来构建Lightning Web组件。您可以使用所有这些功能，而不必放弃使用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组件游乐场

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

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

如果返回到 初始的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 Components Playground作为另一个单元。在操场上，我们将看到您可以使用HTML和JavaScript文件做什么。

学习目标

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

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

Web标准编程的门户

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

Lightning Web Components专注于开发人员和用户体验。因为我们为现有技术打开了大门，所以您可以利用在Salesforce之外开发的技能来构建Lightning Web组件。您可以使用所有这些功能，而不必放弃使用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组件游乐场

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

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

如果返回到 初始的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 Components Playground作为另一个单元。在操场上，我们将看到您可以使用HTML和JavaScript文件做什么。