上节带您了解了Lightning Web组件的基础知识，本节将为您介绍如何创建Lightning Web组件。

 

假设您想要构建一个独立于Salesforce中的特定对象的数据显示元素。ebikes示例库中的productCard组件是一个很好的例子。让我们研究一下该组件，并从头开始构建我们自己的版本，这样您就可以看到它是如何变成一个成熟的Lightning Web组件的。当您构建组件的各个部分并探索更多示例时，您能很快获得基相关的础知识。

 

在本单元中，我们使用Visual Studio Code和Salesforce扩展开发一个Lightning Web组件。我们将文件部署到组织，并构建一个应用程序来使用您的组件。如第一单元所述，您需要对Salesforce DX有一定的熟悉度才能继续。要完成本单元，您需要:

1、带有Salesforce扩展包的Visual Studio Code（VS Code）

2、Salesforce CLI

3、启用Dev Hub的org

4、将My Domain部署到已启用Dev Hub的org中的用户。

 

 

查看 HTML 文件

Lightning Web组件的HTML文件都包含模板标签，该标签包含定义组件结构的HTML。让我们看一下HTML中ebikes存储库的productCard组件简化版的HTML。按照这些示例粘贴到VS Code中。

1、在VS Code命令面板中选择SFDX来创建新项目，接受标准模板，并给它起名为bikeCard。

2、在force-app/main/default下，右键单点击lwc文件夹，选择SFDX: Create Lightning Web Component。

3、输入app作为新组件的名称。

4、连按两次回车，接受默认的force-app/main/default/lwc。

5、将以下内容粘贴到app.html中（替换文件中的现有HTML）

大括号中的标识符被绑定到相应的JavaScript类中的同名字段。

6、将以下代码粘贴到app.js中。

7、保存文件。

现在让我们来看一个真实的例子。假设您想要显示数据，但加载需要一些时间，您又不希望用户知道发生了什么。您可以在模板中使用lwc:if和lwc:else条件指令来确定呈现哪些内容。

 

1、将以下代码粘贴到app.html中。在HTML文件中，ready的值为true之前，“display”div标签中的内容不会出现。

2、将以下内容粘贴到应用程序.js中。这将保存我们的数据值并设置 3 秒计时器。3 秒后，应显示内容。（当然，这只是出于测试目的。

将以下代码粘贴到app.js中。这能保存我们的数据值，并自动设置一个3秒计时器。3秒后，内容就会出现。

3、保存文件。

 

二、基础Lightning Web组件

现在，您不想从头开始构建所有组件。所以我们来探讨一下基础Lightning Web组件的使用方法。当然，还有很多组件，包括字段类型、显示控制器、导航项等，所有这些都在组件参考中列出。

 

让我们把Bike的细节突出出来。在app.html文件中，用lightning-badge组件替换上一个例子中的material和category的div标签。下面是HTML的内容。

保存文件。

 

Steel和Mountain这两个词就能作为badge出现了。

 

 

组件构建结构

一个组件只需要一个具有相同名称的文件夹和文件，它们会根据名字和位置自动连接。

所有Lightning Web组件都有一个命名空间，该空间用连字符与文件夹名称分隔。例如，在默的认命名空间c中，文件夹名称为app的Lightning Web 组件的标记是<c-app>。

 

但是，Salesforce平台不允许在组件的文件夹或文件名中使用连字符。如果组件的名字有多个单词，比如mycomponent该怎么办？总不能将文件夹和文件命名为my-component，这里，我们有一个更方便的解决方案：驼峰式命名，myComponent。驼峰式大小写的组件文件夹名称在标记中映射为kebab大小写。要想引用文件夹名为myComponent的组件，请使用<c-my-component>。例如，LWC示例存储库的viewSource文件夹包含viewSource组件的文件。当hello组件引用HTML中的viewSource组件时，它使用c-view-source。接下来让我们看看JavaScript。

 

 

使用JavaScript

正如您到目前为止所看到的，JavaScript方法定义了如何处理输入、数据、事件、状态变化等，以便组件能正常工作。一个Lightning web组件的JavaScript文件必须包含以下代码，其中MyComponent是您为组件类分配的名称。

export语句定义了一个扩展Lightning Element类的类。作为最佳实践，类的名称通常与JavaScript类的文件名一致，但这不是必需的。

 

 

LWC 模块

Lightning Web组件使用模块来捆绑核心功能，并使其能在您的组件文件中被JavaScript访问。Lightning Web组件的核心模块是lwc。从import语句开始模块，并指定组件使用的模块功能。import语句表示JavaScript使用了lwc模块中的Lightning Element功能。

1、Lightning Element是Lightning web组件的基类，它允许我们使用connectedCallback()。

2、connectedCallback()方法是生命周期挂钩之一，当在文档对象模型（DOM）中插入组件时会触发该方法。在这种情况下，它会启动计时器。

 

 

生命周期挂钩

Lightning Web组件提供了一些方法，让您的代码能够“钩住”组件生命周期中的关键事件，这些事件包括当一个组件被：创建、添加到DOM中、在浏览器中呈现、遇到错误、从DOM中删除。

 

使用回调方法响应这些生命周期事件中的任何一个。例如，当组件添加到DOM中时，会调用connectedCallback()。从组件从DOM中删除时，会调用disconnectedCallback()。在我们用于测试条件渲染的JavaScript文件中，我们使用connectedCallback()方法，在组件被插入DOM时自动执行代码。等待3秒钟，然后将ready设置为true。

当您在VS Code这样的编辑器中使用这个例子时，您可能会看到setTimeout()函数的lint警告"Restricted async operation...."。该警告表明您正在使用一个经常被误用的异步操作；它根据时间延迟行为，而不是等待事件。在这种情况下，setTimeout()适合演示任意的时间延迟，并且警告您不应该阻止使用它。

 

另外，注意我们使用了this关键字。如果您写过JavaScript，应该对关键字的用法很熟悉，就像它在其他环境中一样。JavaScript中的this关键字指的是当前上下文的最高层。在这里，上下文就是这个类。connectedCallback()方法为顶层的ready变量赋值。这是Lightning Web组件如何让您将JavaScript功能引入开发的一个很好的例子。

 

 

修饰符

在JavaScript中，修饰符经常用于修改一个属性或函数的行为。要想使用修饰符，需要从lwc模块中导入它，并将其放在属性或函数之前。

您可以导入多个修饰符，但是一个属性或函数只能有一个修饰符。Lightning Web组件修饰符的例子包括：

 

1、@api：将字段标记为公共字段。公共属性定义组件的API，在其HTML标记中使用该组件的所有者组件可以访问该组件的公共属性。所有公共属性都是反应式的，这意味着框架会观察属性的更改。当属性值发生变化时，框架会做出反应并重新显示该组件。字段和属性几乎是等同的术语。对于组件使用者来说，字段就是属性。在Lightning Web 组件中，只有组件作者用来@api修饰的字段才能作为对象属性公开提供给使用者。

 

2、@track：所有字段都是反应式的，如果对象属性或数组元素发生变化，并且该字段被用于一个模板中，框架会重新提交组件。如果您要更改整个属性的值，则无需使用@track。

 

3、@wire：为您提供了一种从Salesforce org获取和绑定数据的简单方法。

 

下面是使用@api修饰符的例子，在一个app组件中呈现bike组件值的例子。文件结构如下所示:

app组件使用以下HTML。

app组件使用以下JavaScript代码。

bike组件使用以下HTML。

自行车组件使用以下 JavaScript。

现在您已经可以尝试创建Lightning Web 组件了。下节，我们将讨论组件的生存环境。