Skip to main content

创建 Lightning Web 组件

备注

备注

用中文（简体）学习？在中文（简体）Trailhead Playground 中开始挑战，用括号中提供的译文完成挑战。仅复制并粘贴英文值，因为挑战验证基于英文数据。如果在中文（简体）组织中没有成功通过挑战，我们建议您 (1) 将区域设置切换为美国，(2) 按此处说明将语言切换为英文，(3) 再次单击“检查挑战”按钮。

查看 Trailhead 本地化语言徽章详细了解如何利用 Trailhead 译文。

在这一步中，您将学习如何使用您之前安装的工具。

创建 Salesforce DX 项目

使用 Salesforce CLI 与组织交互的基本基础是 Salesforce DX 项目。项目由几个本地配置文件以及您想要部署的代码组成。在 Salesforce 术语中，我们称之为元数据，这是 Salesforce Platform 的基础。如果您不熟悉 Salesforce，查看入门级开发人员学习路径学习更多元数据驱动方法。

我们将使用 Visual Studio Code 创建项目。

  1. 打开 Visual Studio Code。
  2. macOS 系统中按 Command + Shift + P，Windows 和 Linux 系统按 Ctrl + Shift + P，然后键入 create project。选择 SFDX: Create Project（SFDX：创建项目），并按 Enter 键。
  3. 保持默认项目类型选择 Standard（标准）不变，然后按 Enter 键。
  4. 输入 trailhead 作为项目名称，然后按 Enter 键。
  5. 在存储项目的本地机器上选择目录。单击 Create Project（创建项目）。

太好了！您已经创建了第一个用于使用 Lightning Web 组件的 Salesforce DX 项目。Visual Studio Code 会自动为您打开新项目。

授权您的 Dev Hub

下一步是授权 Dev Hub。如果您正在使用 Trailhead Playground，您可以在获取您的 Trailhead Playground 用户名和密码中学习如何获取凭据以进行下一步。

  1. 在 Visual Studio Code 中，按 macOS 上的 Command + Shift + P 或 Windows 或 Linux 中的 Ctrl + Shift + P。
  2. 键入 sfdx。
  3. 选择 SFDX: Authorize a Dev Hub（SFDX：授权 Dev Hub）。
  4. 使用 Dev Hub 组织凭据登录。
  5. 单击 Allow（允许）。

    Dev Hub 授权截图
  6. 在浏览器中进行身份验证后，CLI 会记住您的 Dev Hub 凭据。成功消息应如下所示： 

    授权开发人员中心的成功消息

对 Dev Hub 进行身份验证是创建临时组织的先决条件，临时组织是在 Salesforce Platform 上开发的临时环境。我们会在下一步中创建。

创建临时组织

  1. 在 Visual Studio Code 中，按 macOS 上的 Command + Shift + P 或 Windows 或 Linux 上的 Ctrl + Shift + P。
  2. 键入 sfdx。
  3. 选择 SFDX: Create a Default Scratch Org...（SFDX：创建默认临时组织...）。
  4. 按 Enter 键以接受默认 project-scratch-def.json。
  5. 按 Enter 键以接受默认 Trailhead 临时组织别名。
  6. 按 Enter 键以接受默认 7 天的临时组织持续时间。

创建临时组织可能需要几分钟时间，请耐心等待。成功消息应看起来和 VS Code 输出面板中一样：

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

现在，您已经准备好开发您的第一个 Lightning Web 组件。如果您想要学习更多有关 Salesforce DX 的信息，查看使用 Salesforce DX 开发应用程序。

创建 Lightning Web 组件

创建 Lightning Web 组件是一个简单的过程。Salesforce CLI 已经创建了一个项目结构，有助于更轻松地入门。

文件夹结构看起来如下所示：

Visual Studio Code 中 Salesforce DX 项目的文件资源管理器视图，显示子目录，包括 .sfdx、.vscode、config 和 force-app。

我们创建的项目有一个特殊的文件夹 force-app/main/default。此文件夹称为安装包目录，包含当前 Salesforce DX 项目的所有元数据。由于 Lightning Web 组件也是元数据，因此它们存储在名为 lwc 的子文件夹中。在下一步中，我们会将一个 Lightning Web 组件添加到此文件夹。

注意

lwc 文件夹中还有两个文件，.eslintrc 和 jsconfig.json。我们稍后会在此项目中浏览这两个文件夹。

我们可以使用 Visual Studio Code 来创建 Lightning Web 组件，就像创建 Salesforce DX 项目一样。（您可以直接使用 Salesforce CLI，但我们现在将通过 Visual Studio Code 中的嵌入式终端来使用它。）

  1. 打开 Visual Studio Code。
  2. 在 macOS 上按 Command + Shift + P 或在 Windows 或 Linux 上按 Ctrl + Shift + P。
  3. 键入 focus terminal 并选择 Terminal: Focus Terminal（终端：Focus Terminal）
    选择 Terminal（终端）选项卡（Output（输出）旁边）。
  4. 在 Terminal（终端）选项卡中输入 sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc，然后按 Enter。

这样可以创建您第一个 Lightning Web 组件所需的文件。

带展开 Lightning Web 组件文件夹的元数据目录结构

以下是您在命令中使用的参数。

  • -n 定义 Lightning Web 组件文件夹的名称及其文件。
  • -d 定义创建 Lightning Web 组件所在目标目录。目标目录必须命名为 lwc。
  • --type 指定您要创建 Lightning Web 组件。
注意

正如您所体验到的，在您的开发过程中使用 Salesforce CLI 很容易。如果您想改用 Visual Studio Code，请右键单击 lwc 文件夹或在 Visual Studio Code 中打开命令面板。两者都提供了选项 SFDX: Create Lightning Web Component（SFDX：创建 Lightning Web 组件），然后调用 Salesforce CLI。

将代码和元数据添加到您的第一个 Lightning Web 组件

现在让我们看一下构成 Lightning Web 组件的文件。为此您将复制并粘贴一些我们为您准备的 HTML、JavaScript 和 XML。我们从 myFirstWebComponent.js-meta.xml 文件开始。

  1. 打开您刚刚在 lwc 子文件夹中创建的 myFirstWebComponent 文件夹
  2. 单击 myFirstWebComponent.js-meta.xml。
  3. 用此 XML 标记替换 XML 文件的内容：

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>51.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>
  4. 按 macOS 上的 CMD + S 或 Windows 或 Linux 上的 CTRL + S 保存文件。

您刚刚更新的文件是元数据定义文件。它包含多个配置元素，例如，可控制您可以使用 Lightning 应用程序生成器（目标）将其添加到 Salesforce 用户界面的位置。您可以在文档中了解更多关于元数据配置的选项。

下一步，我们将更新 Lightning Web 组件的 JavaScript 文件。

注意

您将要复制和粘贴的 JavaScript 代码和 HTML 标记内置了一些错误。所以不要担心看到的红色波浪线。稍后在本项目中，您将使用 Visual Studio Code 的功能与 Salesforce Lightning Web 组件扩展结合来解决错误。

  1. 在 Visual Studio Code 中，单击 myFirstWebComponent.js。
  2. 用此代码替换文件的全部内容：

    import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}
  3. 按 macOS 上的 CMD + S，或 Windows 或 Linux 上的 CTRL + S 保存文件。

保存文件后，您会立即注意到一些事情。

  • 批注单词 @track 有红色波浪线下划线。
  • Explorer 中 JavaScript 文件颜色变为红色。

    打开突出显示错误的 JavaScript 文件
注意

根据您的设置，您可能只能看到一个错误。

两者都表明 JavaScript 代码中的有些内容不正确。作为一名优秀的开发人员，您通常可以立即修复错误。

但是现在您可以忽略这些问题。可以将 HTML 标记添加到 Web 组件模板文件中。

  1. 在 Visual Studio Code 中，单击 myFirstWebComponent.html。
  2. 在现有 <template></template> 标记中插入此标记：

    <lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={} for:item="contact">
         <div>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>
  3. 按 macOS 上的 CMD + S 或 Windows 或 Linux 上的 CTRL + S 保存文件。

同样，您会看到一个指示，表明 HTML 标记中的某些内容不符合预期。

HTML 模板文件打开，突出显示第 4 行的错误

我们也可以忽略此错误（现在）。

通常下一步是为您的组织部署项目。但是代码满是错误，部署可能失败。现实中您可能会也可能不会遇到部署失败的问题。请务必注意 IDE 中显示的任何错误并立即修复。

在下一步也是最后一步中，我们将修复代码。

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈