适用于Visualforce开发人员的Lightning Web组件 – 处理JavaScript中的用户操作

学习目标

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

创建一个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的用户名和密码。

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

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

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

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. 创建一个闪电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. 用以下代码替换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. 要使此组件在组织中的应用程序页面上可用，请使用以下代码替换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>

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

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

学习目标

回应用户互动

你可能也会喜欢...

适用于Visualforce开发人员的Lightning Web组件 – 了解编码概念如何应用于Lightning Web Components

适用于Visualforce开发人员的Lightning Web组件 – 闪电开发入门

适用于Visualforce开发人员的Lightning Web组件 – 使用导航服务并重新使用Visualforce