分类： 适用于Visualforce开发人员的Lightning Web组件

学习目标

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

• 意识到根据特定用例选择最佳方式使用Salesforce数据的重要性。
• 描述闪电数据服务如何与Visualforce中的标准控制器进行比较。
• 说明在Lightning Web组件中使用Apex与在Visualforce中使用Apex有何不同。

Visualforce与Lightning Web组件中的数据访问

作为Visualforce开发人员，您熟悉在页面中使用标准控制器和绑定Apex控制器方法以使用Salesforce数据的情况。在Lightning Web Components中，您的JavaScript代码与Lightning Data Service（LDS）或Apex代码进行交互。

传统的Visualforce数据访问	闪电Web组件数据访问
检索或修改数据的Visualforce页面使用标准控制器或Apex控制器。传统上，客户端在页面加载或作为操作时调用控制器方法。方法运行后，Visualforce引擎将生成最终标记并将其发送给客户端。	检索或修改数据的Lightning Web组件使用Lightning Data Service或Apex方法。客户端使用JavaScript调用Lightning Data Service或Apex方法。在运行Lightning Data Service或Apex方法之后，Lightning Web Components引擎会将所需的最少数据返回给客户端。客户端上的JavaScript处理数据并生成最终标记。

闪电数据服务与StandardController

Lightning Data Service 是在Lightning Web组件中使用Salesforce数据的首选（也是最简单）方式。闪电数据服务是与Visualforce标准控制器类似的概念。在JavaScript中使用Lightning Data Service在不编写Apex代码的情况下读取，创建或修改单个记录，或读取某些元数据。Lightning Data Service提供了高级功能，例如组件之间的缓存和同步。

Visualforce中的Apex与Lightning Web Components中的Apex

Lightning Data Service不能满足所有用例的要求。例如，当您要自定义单记录数据事务或对单个事务执行多记录操作时，需要Apex。在将Apex与Lightning Web组件一起使用之前，请注意在Lightning Web组件中使用Apex与在Visualforce中使用Apex是不同的。主要区别在于：

• 方法是无状态的。
• 方法必须是@AuraEnabled，并且可以标记为可缓存。
• 您导入Apex方法，然后调用它们。
• 您绑定组件以在元数据xml文件中记录页面，并在JavaScript文件中访问记录ID。
• 正确的错误处理涉及引发异常，而不是使用页面消息。

让我们进一步探讨这些差异。

查看状态与无状态方法

Visualforce使用视图状态来维护服务器请求之间的状态。视图状态将重新创建页面，并将状态传递到向导和指导工作流程中的不同页面。在Lightning Web组件中，服务器请求是无状态的。这对您编写Apex调用的方式具有重要意义。每次进行Apex调用时，都必须传递该方法所需的所有信息，并且该方法必须返回组件所需的所有信息。此外，要从Lightning Web组件调用Apex方法，该方法必须带有注释@AuraEnabled。

让我们研究一下Visualforce Apex控制器。

AccountListControllerVisualforce.cls

public with sharing class AccountListControllerVisualforce {
    public List<Account> accounts { get; private set; }
    public Integer numberOfEmployees { get; set; }
    public void queryAccounts() {
        // In real world, probably more complex logic here
        this.accounts = [
            SELECT Name
            FROM Account
            WHERE NumberOfEmployees = :numberOfEmployees
        ];
    }
}

代码重点：

• 第2至3行：accounts和 numberOfEmployees属性定义为实例变量，它们是控制器视图状态的一部分。
• 第6至9行：该queryAccounts方法numberOfEmployees在 accounts变量中存储了由过滤的帐户列表，我们可以在Visualforce页面中引用该列表。

以下是将该AccountListController for Visualforce转换为Lightning Web组件的控制器的方法。

1. 使用@AuraEnabled，使用cacheable属性或不使用属性注释Apex方法。（默认情况下，数据 不可在客户端中缓存。）
2. 通过使其成为无状态static且独立于所有实例变量和属性的方法，确保它们是无状态的。
3. 将方法需要的所有内容作为参数传递。
4. 确保每种方法都返回组件所需的一切。

这是适用于Lightning Web组件的控制器。

AccountListControllerLwc.cls

public with sharing class AccountListControllerLwc {
    @AuraEnabled(cacheable=true)
    public static List<Account> queryAccounts(Integer numberOfEmployees) {
        return [ // Return whatever the component needs
            SELECT Name
            FROM Account
            WHERE NumberOfEmployees >= :numberOfEmployees
        ];
    }
}

代码重点：

• 第2行：使用注释queryAccounts方法 @AuraEnabled，并将其cacheable属性设置为true。
• 第3行：创建queryAccounts方法static，并将其定义numberOfEmployees为Integer参数。
• 第4-8行：该queryAccounts方法返回过滤后的帐户列表。

在Visualforce vs Lightning Web组件中调用Apex

在Visualforce中，要在组件标记中引用Apex方法，可以通过将Apex控制器指定为<apex:page>标签中的属性来将其绑定到Visualforce页面。在Lightning Web Components中，我们没有绑定控制器并引用页面中的Apex方法，而是将这些方法导入JavaScript文件，然后在JavaScript中调用这些方法。

import queryAccounts from '@salesforce/apex/AccountListControllerLwc.queryAccounts;

与Lightning Web组件中的Apex方法进行交互的方式有两种：连接方法或强制调用方法。接线方法将控件委派给Lightning Web Components引擎并创建响应服务。强制调用Apex会导致一次性调用。确切地说，何时以及如何使用每个选项超出了本模块的范围。要了解更多信息，请参阅 Lightning Web Components和Salesforce数据 模块。

在Visualforce vs Lightning Web组件中访问记录ID

在Visualforce中，访问Apex控制器中的记录ID非常简单。使用标准控制器，您可以Id从ApexPages.StandardController对象中检索记录 。

例如，考虑使用此Apex控制器，该控制器通过扩展使用“客户”标准控制器的页面来显示与客户相关的联系人。

AccountControllerVisualforce.cls

public with sharing class AccountControllerVisualforce {
    public List<Contact> contacts { get; private set; }
    private ApexPages.StandardController standardController;
    public AccountController(ApexPages.StandardController standardController) {
        this.standardController = standardController;
        this.contacts = new List<Contact>();
    }
    public void queryRelatedContacts() {
        this.contacts = [
            SELECT Name, Title, Email, Phone
            FROM Contact
            WHERE AccountId = :standardController.getId() // (2)
        ];
   }
}

代码重点：

• 第4行：standardController因为页面使用Account标准控制器，所以我们在构造函数中收到一个对象。
• 第12行：要获取Id页面引用的Account记录，我们getId在standardController对象上调用方法 。这样，我们可以查询联系人以获取相关的客户记录，并为其过滤Id。

在Lightning Web组件中，访问Apex中的记录ID不太简单。要访问记录ID：

1. 公开组件，使其在记录页面上可用。
2. 在JavaScript中，声明recordId为公共属性。父组件（记录Flexipage）填充recordId属性的值 。
3. recordId在Apex方法调用中将as作为参数传递。

让我们来看一个例子。

accountDetails.js-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

accountDetails.js

import { LightningElement, wire } from 'lwc';
import queryRelatedContacts from '@salesforce/apex/AccountControllerLwc.queryRelatedContacts';
export default class AccountInfo extends LightningElement {
    @api recordId;
    @wire(queryRelatedContacts, { accountId: '$recordId' })
    contacts;
}

AccountControllerLwc.cls

public with sharing class AccountControllerLwc {
    @AuraEnabled(cacheable=true)
    public static List<Contact> queryRelatedContacts(Id accountId) {
        return [
            SELECT Name, Title, Email, Phone
            FROM Contact
            WHERE AccountId = :accountId
        ];
    }
}

代码重点：

accountDetails.js-meta.xml

• 第4-7行：我们将其设置isExposed为true并添加 lightning__RecordPage为该组件的目标，以使该组件在记录页面上可用。

accountDetails.js

• 第4行：我们声明该recordId属性，并使用修饰它以使其公开@api。Flexipage会填充 recordId属性。
• 第5-6行：我们将recordId属性作为参数传递给 queryRelatedContactsApex方法的 accountId参数。（在这种情况下，我们使用了 @wire，但是我们可以强制性地调用Apex。）结果存储在contacts属性中。

AccountControllerLwc.cls

• 第3行：queryRelatedContactsApex方法接收 accountId作为参数。请记住，该方法是无状态的。
• 第4-8行：该queryRelatedContacts方法用于 accountId返回客户的联系人。

Visualforce与Lightning Web组件中的服务器错误

在Visualforce中，您使用诸如<apex:pageMessages>和之类的 标记 <apex:pageMessage>以在Visualforce页面上以不同方式显示错误。为了使这些标记正常工作，必须在Apex控制器中处理异常并将消息添加 到页面，如下所示：

try {
    // Perform logic that may throw an exception.
} catch (Exception e) {
    ApexPages.addMessages(e);
}

在Lightning Web组件中，我们处理JavaScript文件中的异常。作为开发人员，您可以决定是引发AuraHandledException 异常还是通过引发异常或自定义异常来让异常传播或更好地控制向用户显示的内容 。引发这样的自定义异常：

try {
    // Perform logic that may throw an exception.
} catch (Exception e) {
    throw new MyCustomException('Records could not be retrieved at this time. Try again later');
}

Lightning Web组件和Salesforce数据 模块 中更详细地介绍了处理服务器错误 。

调用Apex以检索过滤的记录

在您创建的accountSearch组件中，让我们检索按提供的员工数量过滤的帐户列表。

1. 1. 创建一个AccountListControllerLwc Apex类：
      1. 在Visual Studio Code命令面板中，选择（或输入） SFDX：Create Apex Class，然后按 Enter。
      2. 输入文件名，AccountListControllerLwc然后按Enter。
      3. 接受默认位置（类），然后按 Enter。
   2. 用以下代码替换AccountListControllerLwc类的内容：

public with sharing class AccountListControllerLwc {
    @AuraEnabled(cacheable=true)
    public static List<Account> queryAccountsByEmployeeNumber(Integer numberOfEmployees) {
        return [
            SELECT Name
            FROM Account
            WHERE NumberOfEmployees >= :numberOfEmployees
        ];
   }
}

1. 1. 保存AccountListControllerLwc类。
   2. 在您的accountSearch.js文件中，通过使用以下代码替换第一行代码，导入wire装饰器和queryAccountsByEmployeeNumberApex方法：

import { LightningElement, wire } from 'lwc';
import queryAccountsByEmployeeNumber from '@salesforce/apex/AccountListControllerLwc.queryAccountsByEmployeeNumber';

1. 最后，在reset方法之后，添加以下代码：

   @wire(queryAccountsByEmployeeNumber, { numberOfEmployees: '$numberOfEmployees' })
   accounts;
2. 保存accountSearch.js文件。
3. 在accountSearch.html文件中的之后<lightning-button>，添加以下代码：

   <template if:true={accounts.data}>
       <template for:each={accounts.data} for:item="account">
            <p key={account.Id}>{account.Name}</p>
       </template>
   </template> 
4. 保存accountSearch.html文件。
5. 将AccountListControllerLwc类文件部署到您的Trailhead游乐场：右键单击classes文件夹，然后选择 SFDX：将源部署到Org。
6. 将accountSearch组件文件部署到Trailhead Playground：右键单击accountSearch文件夹，然后选择 SFDX：将源部署到Org。
7. 如果您的Trailhead Playground尚未打开，请打开它。（在命令选项板中，选择（或输入）SFDX：Open Default Org。）
8. 导航到LWC Visualforce Devs页面并通过在“员工人数”字段中输入值来测试您的组件。当您更改员工人数时，应更新帐户列表。

您只是从Lightning Web组件中的Salesforce组织访问数据。做得好！现在，通过完成动手练习来自己尝试一个。

学习目标

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

• 创建一个SFDX项目。
• 创建一个闪电Web组件。
• 应用架构和编码概念。

在Visualforce中，要执行UI更改，有时您需要在服务器上重新呈现页面。如您所知，在Lightning Web Components架构中，重新渲染发生在客户端上。您学习了如何在JavaScript中设置属性以更改组件状态，从而使Lightning Web Components引擎重新呈现组件。您还学习了如何响应JavaScript中的用户交互。让我们观察一下这些概念。考虑此示例Visualforce页面。

accountSearch.page

<apex:page controller="InputController" docType="html-5.0">
    <apex:form>
        <apex:input type="number" label="Number of Employees" value="{!numberOfEmployees}"/>
        <apex:commandButton value="Reset" action="{!reset}"/>
    </apex:form>
</apex:page>

AccountSearchController.cls

public class AccountSearchController {
    public Integer numberOfEmployees {get; set;}
    public void reset() {
        this.numberOfEmployees = null;
    }
}

重置按钮清除输入值，然后页面在服务器上重新呈现。在Lightning Web组件中，您可以单独使用JavaScript进行相同的UI更改，如下所示：

accountSearch.html

<template>
    <lightning-card>
        <lightning-input
            type="number"
            label="Number of Employees"
            value={numberOfEmployees}
            onchange={handleChange}>
        </lightning-input>
        <lightning-button
            label="Reset"
            onclick={reset}>
        </lightning-button>
    </lightning-card>
</template>

accountSearch.js

import { LightningElement } from 'lwc';
export default class AccountSearch extends LightningElement {
    numberOfEmployees = null;
    handleChange(event) {
        this.numberOfEmployees = event.detail.value;
    }
    reset() {
        this.numberOfEmployees = null;
    }
}

代码重点：

accountSearch.html

• 第3-8行：我们使用一个lightning-input组件来接收用户输入。
• 第6行：我们将numberOfEmployeesJavaScript属性绑定到lightning-input组件的value属性。
• 第7行：我们将handleChange方法绑定到lightning-input组件的change事件。
• 第9至12行：我们定义了lightning-button 基本组件。
• 第11行：当用户单击按钮时，Lightning Web Components引擎将调用该reset方法。

accountSearch.js 

• 第5行：该handleChange方法读取lightning-input组件的change事件，获取用户输入的值，并将其存储在numberOfEmployees属性中。
• 第7–9行：reset方法清空numberOfEmployees属性。通常，我们使用handleEventName约定来命名事件处理程序，但是在reset这里我们用来强调它与Apex控制器reset方法的相似性。

将传递value给lightning-input会导致组件重新呈现。与Visualforce实现的区别在于，重新渲染发生在客户端上，从而避免了对服务器的额外调用。

回应用户互动

现在，我们已经探索了Lightning Web Components和您熟悉的Visualforce开发之间的一些区别，让我们来看一个示例。

在你开始之前

Visualforce开发人员非常喜欢在开发人员控制台中工作。但是，Lightning Web Components的编程模型需要另一套称为Salesforce DX（开发人员体验）的开发人员工具。它包括Salesforce命令行界面（CLI）和Visual Studio代码，该代码与Salesforce Extension Pack一起，是在Salesforce平台上开发的推荐代码编辑器。Salesforce DX环境旨在：

• 简化整个开发生命周期
• 促进自动化测试
• 支持持续集成
• 使发布周期更加敏捷和高效

在开始本模块的动手练习和动手挑战之前，请确保您已完成《 快速入门：闪电Web组件》。该徽章的前两个步骤将逐步设置Salesforce DX开发环境。

创建一个新的Trailhead游乐场

对于此项目，您需要创建一个新的Trailhead Playground。滚动到该页面的底部，单击“启动”旁边的向下箭头，然后选择“创建Trailhead游乐场”。创建新的Trailhead游乐场通常需要3-4分钟。

注意：是的，我们的意思是全新的Trailhead游乐场！如果您使用现有的组织或游乐场，则可能会遇到无法完成挑战的问题。

获取您的Trailhead Playground用户名和密码

转到您的Trailhead游乐场。（如果尚未打开，请滚动至该页面的底部，然后单击启动。）如果您在组织中看到一个标签为Get Your Login Credentials的标签，太好了！跳至步骤1。 

否则，请从应用启动器（）中找到并打开Playground Starter，然后按照以下步骤操作。如果您没有看到Playground Starter应用程序，请在Trailhead帮助中签出 查找Trailhead Playground的用户名和密码。

1. 单击获取您的登录凭据选项卡，并记下您的用户名。
2. 单击重置我的密码。这会将电子邮件发送到与您的用户名关联的地址。
3. 单击电子邮件中的链接。
4. 输入新密码，确认，然后单击更改密码。

准备好动手了吗？我们走吧。

在本练习中，您将创建一个Lightning Web组件，以响应用户交互而重新渲染。

1. 1. 创建一个新项目：
      1. 打开Visual Studio代码。
      2. 打开命令面板：单击查看| 命令面板。
      3. 在命令面板中，选择SFDX：创建项目。（如果您没有在列表中看到它，请键入SFDX: Create Project，然后按Enter。）
      4. 接受标准模板。
      5. 输入项目名称，lwcForVisualforceDevs然后按Enter。
      6. 选择新项目的位置，然后单击“创建项目”。
   2. 授权您的Trailhead游乐场：
      1. 在命令选项板中，选择（或输入）SFDX：授权组织。
      2. 选择生产：login.salesforce.com。
      3. 对于别名，请输入lwc_for_vf_devs，然后按Enter。
      4. 使用您的Trailhead Playground用户名和密码登录。
      5. 登录到Trailhead Playground后，将其保持打开状态并返回到Visual Studio Code。
   3. 在Visual Studio Code中，打开一个终端窗口：单击Terminal |。新航站楼。
   4. 在终端中，将Trailhead Playground设置为该项目的默认设置：输入此命令，然后按Enter：

sfdx config:set defaultusername=lwc_for_vf_devs

1. 1. 创建一个闪电Web组件：
      1. 在“资源管理器”窗格中，展开“  force-app / main / default”。
      2. 右键单击lwc文件夹，然后选择SFDX：Create Lightning Web Component。
      3. 输入组件名称，accountSearch然后按Enter键。
      4. 再次按Enter接受默认目录。
   2. 用以下代码替换accountSearch.html文件的内容：

<template>
  <lightning-card>
      <lightning-input
          type="number"
          label="Number of Employees"
          value={numberOfEmployees}
          onchange={handleChange}>
      </lightning-input>
      <lightning-button
          label="Reset"
          onclick={reset}>
      </lightning-button>
  </lightning-card>
</template>

1. 1. 用以下代码替换accountSearch.js文件的内容：

import { LightningElement } from 'lwc';
export default class AccountSearch extends LightningElement {
    numberOfEmployees = null;
    handleChange(event) {
        this.numberOfEmployees = event.detail.value;
    }
    reset() {
        this.numberOfEmployees = null;
    }
}

1. 1. 要使此组件在组织中的应用程序页面上可用，请使用以下代码替换accountCreator.js-meta.xml文件的内容：

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

1. 保存您编辑的三个文件：accountSearch.html，accountSearch.js和accountSearch.js-meta.xml。
2. 将项目文件部署到Trailhead Playground：右键单击lwc文件夹，然后选择SFDX：将源部署到Org。
3. 如果您的Trailhead Playground尚未打开，请打开它。（在命令选项板中，选择（或输入）SFDX：Open Default Org。）
4. 在您的Trailhead游乐场中，点击 ，然后点击设置。
5. 在“快速查找”框中，输入Lightning App Builder，然后选择Lightning App Builder。
6. 创建一个新的闪电页面：
   1. 点击新建。
   2. 选择应用程序页面，然后单击下一步。
   3. 对于标签，输入LWC Visualforce Devs，然后单击下一步。
   4. 对于布局，选择Header和Left Sidebar。
   5. 点击完成。
7. 将accountSearch组件拖动到页面侧栏。
8. 保存页面。
9. 激活页面：
   1. 点击激活。
   2. 保留默认的应用程序名称（LWC Visualforce Devs），然后单击保存。
   3. 当提示您将页面添加到导航菜单时，点击完成。
10. 退出Lightning App Builder。
11. 打开新页面：在App Launcher搜索中，输入lwc，然后在Items下选择LWC Visualforce Devs。
12. 在输入字段中输入一个值，然后单击“重置”按钮。
    您实现的JavaScript代码应清除输入字段，并使Lightning Web Components引擎重新呈现该组件。

看那个！您创建了一个Lightning Web组件并将其添加到组织中的页面。现在尝试动手挑战中的另一只手。

学习目标 

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

• 解释Visualforce和Lightning Web组件之间的体系结构差异。
• 将Visualforce编码概念映射到Lightning Web Components。

在本单元中，您将学习Visualforce知识如何应用于Lightning Web Components体系结构和编码概念。

闪电Web组件架构

Visualforce是服务器端的模板语言。当客户端（浏览器）请求Visualforce页面时，服务器将呈现该页面，并将其以HTML格式发送给客户端。当用户界面需要更改时（例如，响应链接单击页面），客户端将向服务器请求一个新呈现的页面。服务器处理UI更改并将整个页面发送回客户端。

在Lightning Web组件中，客户端承担了大部分繁重的工作。要渲染Lightning Web组件，它将向服务器请求组件文件，处理这些文件以生成适当的标记，然后渲染组件UI。因为客户端可以处理逻辑，所以有时它可以执行UI更改，而无需完全回调服务器。它仅在需要时（例如，组件需要新数据时）才调用服务器。即使这样，客户端仍需要最少数量的数据。

传统的Visualforce请求	闪电Web组件请求
用户请求页面。 服务器执行页面的基础代码，并将结果HTML发送到浏览器。 浏览器显示页面。 当用户再次与页面交互时，该循环从第一步开始重复。	用户请求组件。 组件定义作为已编译的JavaScript文件返回到客户端。 JavaScript应用程序生成UI。 当用户再次与页面交互时，JavaScript会修改客户端上的UI。

JavaScript在Lightning Web组件中起着重要作用。每个组件都有一个JavaScript文件，可在需要时重新生成UI。组件还可以在需要时使用JavaScript调用服务器以检索或修改Salesforce数据。我们将在本模块的后面部分介绍数据访问。

闪电Web组件编码概念

Visualforce和Lightning Web组件有很大的不同，但是有一些Visualforce概念有助于理解JavaScript和HTML在Lightning Web组件中的交互方式。

使用属性跟踪状态

在Visualforce中，属性在Apex控制器（Apex类文件）中定义，并在页面标记（Visualforce页面）中引用。在Lightning Web组件中，属性在组件的JavaScript文件中定义，并在页面标记（组件的HTML文件）中引用。属性跟踪Visualforce页面和Lightning Web组件的状态。这是语法的基本示例。

hello.html

<template>
    {greeting}
</template>

hello.js

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

greeting可以从JavaScript读取值，但也可以例如响应用户操作来写入。当标记中引用的属性的值更改时，Lightning Web Components引擎将重新渲染该组件。用户操作和所导致的重新呈现完全发生在客户端上。不需要服务器请求。

使用Getter和Setter跟踪状态

您在Visualforce中知道的getter和setter也存在于Lightning Web组件中。您可以在JavaScript文件中定义它们。读取属性时，getter将执行逻辑。设置器在写入属性时执行逻辑。这是扩展属性功能的便捷方法。 

要定义吸气剂，请创建一个包含逻辑并在其前面加上get关键字的方法。要定义设置器，请使用进行相同的操作set。定义设置器是可选的。

在此示例中，我们itemName使用getter和setter定义属性。每次itemName设置属性时，设置器都会将值转换为大写。uppercaseItemName更改值时，Lightning Web Components引擎将为计算新值itemName，然后重新呈现该组件。

todoItem.html

<template>
    {itemName}
</template>

todoItem.js

import { LightningElement } from 'lwc';
export default class TodoItem extends LightningElement {
    uppercaseItemName;
    get itemName() {
        return this.uppercaseItemName;
    }
    set itemName(value) {
        this.uppercaseItemName = value.toUpperCase();
    }
}

注意： Lightning Web组件的标记不支持计算值的表达式。而是考虑使用getter来计算JavaScript文件中的值。 

有条件的渲染

在Visualforce中，您可以使用该rendered属性有条件地呈现标记。要在Lightning Web组件中有条件地呈现标记，请使用if:true|false template指令。HTML模板指令是特殊属性，可为模板添加动态行为。其他知名的前端框架（例如Angular和Vue）也使用模板指令。

在此示例中，该areDetailsVisible属性在控制器（未显示）中定义。我们使用areDetailsVisible属性的值来控制页面上某个部分的可见性，如下所示：

helloConditionalRendering.html

<template>
    <template if:true={areDetailsVisible}>
        These are the details!
    </template>
</template>

包含“这些就是细节！”的模板 仅在areDetailsVisible属性值为时显示true。

渲染清单

在Visualforce中，您可以使用<apex:repeat>标签来遍历列表。在Lightning Web组件中，两个模板指令执行迭代： for:each和iterator:iteratorName。在此示例中，我们遍历contacts 控制器中的 属性。

compositionIteration.html

<template>
    <template for:each={contacts} for:item="contact">
        <p key={contact.Id}>
            {contact.Name}
        </p>
    </template>
</template>

代码重点：

• 第2行：我们使用for:eachtemplate指令一次遍历所有联系人。然后，我们使用for:itemtemplate指令创建contact变量，该变量在每次迭代中一次包含一个单独的联系人。
• 第3行：的所有直接子代for:item必须包含唯一的key模板指令。

调用JavaScript

在Visualforce页面中，当用户与页面交互时，页面可以执行JavaScript。例如，页面可能包含<apex:commandButton>，以响应按钮click事件执行JavaScript逻辑。您可以通过将JavaScript逻辑绑定到onclick按钮的属性来实现。在Lightning Web组件中调用JavaScript的方式相同。但是，必须在JavaScript文件的方法中定义逻辑，并且该方法必须绑定到事件，如下所示：

eventHandler.html

<template>
    <a onclick={handleButtonClick}></a>
</template>

eventHandler.js

import { LightningElement } from 'lwc';
export default class EventHandler extends LightningElement {
    handleButtonClick(event) {
        // Do whatever...
    }
}

代码重点：

eventHandler.html

• 第2行：我们使用standardonclick 属性为标准click DOM事件指定处理程序。大括号{}表示事件处理程序是handleButtonClickJavaScript文件中的方法。

eventHandler.js

• 第3行：我们定义了handleButtonClick处理程序，以接收event作为参数。

当您的处理程序需要访问事件所携带的状态或数据时，请使用事件对象。在这种情况下，您可以使用事件对象来查找将事件调度到的对象或单击事件的次数。我们将在本模块的后面部分详细讨论事件。

标准件

《 Visualforce开发人员指南》中的“ 标准组件参考”是标准Visualforce组件的库。同样，《 Lightning开发人员指南》 组件参考 是基础（标准）Lightning组件的库。

提示：要在参考中仅查看基础的Lightning Web组件，请展开“过滤器” ，然后 在“编程模型”下选择“ Lightning Web组件”。

使用基本组件快速轻松地开发应用程序。Salesforce维护基本组件，并创建您自动接收的新功能。

基础Lightning Web组件反映了Salesforce的外观。他们具有由Salesforce闪电设计系统（SLDS）提供的集成样式 。设计系统包括所有基本组件的蓝图以及可以在自己的组件中使用的CSS类。使用SLDS网站了解在构建自定义组件时适用的样式指导。

要了解哪些基础Lightning Web组件与某些标准Visualforce组件相匹配，请参阅“资源”部分中的Visualforce标准组件和基础Lightning Web组件并排。

组成

在Visualforce中，您使用诸如<apex:component>和的标记<apex:include>来实现合成。当Visualforce页面包含Visualforce组件时，使用<apex:attribute>标签很容易将信息传递到该组件 。但是，将信息传递回页面涉及更复杂的模式，例如 Apex控制器的层次结构。

Lightning Web组件中的组成相似。父级Lightning Web组件可以包括子级组件并与其通信。 

简化了组成和通信机制，以便正确封装了每个组件的逻辑，并与其他组件进行松散耦合。

要将子组件包含在父组件中，请在kebab情况下使用子组件名称实例化该组件（是的，看起来像kebab），其后是其名称空间。自定义组件的默认名称空间是c。基本组件使用lightning名称空间。

在此示例中，contactTile定制组件和lightning-badge 基础组件作为compositionBasics组件的子代包括在内。

compositionBasics.html

<template>
    <c-contact-tile contact={contact}></c-contact-tile>
    <lightning-badge label="LWC rocks!"></lightning-badge>
<template>

要将信息从父组件传递到子组件，请使用 public属性 和 public方法。@api在JavaScript文件中带有装饰器的属性或方法之前，会将其公开，以便其他组件可以访问它。要将信息从子级传递到其父级组件，请从标记中分派标准DOM事件或自定义事件（请参见 CustomEvent）。自定义事件不在此模块的范围内。父组件必须具有一个侦听事件的事件处理程序。让我们考虑一个示例，在该示例中，每当用户更改其值时，lightning-input 基本组件都会通知其父组件。

accountSearch.html

<template>
    <lightning-input
        type="number"
        label="Number of Employees"
        value={numberOfEmployees}
        onchange={handleChange}>
    </lightning-input>
</template>

accountSearch.js

import { LightningElement } from 'lwc';
export default class AccountSearch extends LightningElement {
    numberOfEmployees = null;
    handleChange(event) {
        this.numberOfEmployees = event.detail.value;
    }
}

代码重点：

accountSearch.html

• 第2-7行：我们使用lightning-input 基本组件读取用户在输入字段中输入的值。lightning-input是的孩子c-account-search。
• 第5行：通过将父级属性绑定到子级属性，将numberOfEmployees属性值从c-account-search（父级组件）传递到lightning-input（子级组件）。我们可以执行此操作，因为基本组件具有名为的公共属性。numberOfEmployeesvaluelightning-inputvalue
• 第6行：我们将一个名为处理程序handleChange的change事件绑定到该lightning-input组件触发的事件，将信息传递给父级。change是标准的DOM事件。这是lightning-input组件将用户输入发送到的方式c-account-search。

accountSearch.js

• 第5行：我们从中读取用户输入event.detail.value。

要了解有关这些通信模式的更多信息，请参阅Lightning Web Components基础 模块中的Lightning Web Components中的处理事件 。

学习目标

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

• 列出闪电组件框架的主要优点。
• 说明如何同时使用低代码和专业代码工具来提高生产率。
• 描述构成Lightning Web组件的标准，服务和文件。

嘿Visualforce开发人员，欢迎来到闪电体验！

如果您是经验丰富的Visualforce开发人员，并且希望使用最佳的Lightning Experience工具构建现代且引人入胜的用户体验，那么您将找到合适的位置。 

先决条件

为了充分利用本模块，您应该具有编写JavaScript的经验，并且了解JavaScript在Lightning Component框架中的作用。如果您尚未完成“ 学习使用JavaScript”路径，我们强烈建议您立即执行。

即使Visualforce仍可在Lightning Experience中运行，您仍可以使用Lightning Experience工具构建更无缝，引人入胜且响应迅速的用户体验。在本单元中，我们分享了我们为何开发Lightning Component框架，考虑为Lightning Experience开发用户界面的两种方法：低代码和前代码，并描述了Lightning Web组件的基础。

闪电体验和闪电组件框架

Visualforce为2006年的网络进行了设计和优化，基于与当时其他企业解决方案保持一致的技术堆栈。Visualforce的服务器端渲染可以满足当时的用户需求。 

但是，2006年之后，情况发生了变化。如今，用户期望获得更多的交互式，沉浸式和响应式的体验。为了满足这些要求，Salesforce推出了基于Lightning Component框架的Lightning Experience。 

开发人员不是使用Visualforce构建整体页面，而是创建小型的Lightning组件构建块，并以多种方式组装它们以创建不同的用户界面。 

闪电组件框架的优点包括：

• 跨Salesforce的组件重用，最大限度地提高开发人员的生产力
• 轻松扩展应用程序功能
• 自定义组件：从AppExchange下载它们或创建自己的组件
• 帮助您创建针对移动设备优化的响应式设计的构建器
• 基本组件可在各种设备尺寸上正常工作

Lightning Experience中的UI开发：低代码和专业代码

Salesforce提供了两种在Lightning Experience中构建用户界面（UI）的方法：低代码和专业代码。 

• 使用低代码点击工具来实现业务逻辑或构建用户界面。
• 使用专业代码工具编写您自己的代码并完全自定义您的应用程序。

作为开发人员，当您开始开发新的东西时，您的直觉可能是立即开始编码。相反，请考虑使用低代码工具抢先一步。如果您使用低代码工具来进行重复的样板工作，那么您将有更多时间花在编码复杂需求上。另外，使用低代码工具构建的解决方案易于更改，并且可以通过低代码和专业代码工具进行扩展。

Salesforce中的UI开发

如果您对Lightning Experience低代码解决方案不熟悉，我们强烈建议您通过获取这些Trailhead徽章来了解它们。

• 闪电App Builder
• 闪电体验定制
• JavaScript按钮的替代闪电
• Salesforce移动应用程序定制
• 使用Flow Builder构建流程

对于专业代码工具，Salesforce提供了两个Lightning编程模型：Lightning Web Components和Aura Components。我们不会在这里深入研究它们，只是知道Lightning Web Components是在Lightning中开发自定义UI的首选方法。它性能更高，更易于构建且更易于移植。如果您想了解有关Aura组件和Lightning Web组件之间差异的更多信息，请阅读Trailhead上Lightning Experience Basics模块中的“了解Lightning Experience”单元 。

闪电Web组件基础知识

Lightning Web Components是基于Web组件标准的轻量级编程模型 。它抽象了Web组件API的更复杂的部分，并管理组件的生命周期，使您能够以更少的样板代码轻松编写组件。

闪电Web组件包含HTML，JavaScript和CSS。您学习编写Lightning Web组件的技能可以转移到任何其他基于JavaScript的技术上。 

Lightning Web组件由Lightning Locker服务隔离和固定 。Lightning Locker强制执行JavaScript 严格模式，提供 DOM访问限制，使用 全局对象的安全版本，并遵循内容安全策略（CSP）标准来防止代码注入攻击。 

注意：在继续之前，建议您阅读以下内容中的“发现闪电Web组件”。 模块。在这里，您将了解有关Lightning Web组件的基础以及构成Lightning Web组件的文件的更多信息。