适用于Aura开发人员的Lightning Web Components – 迁移标记和CSS

学习目标

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

将HTML和标记从Aura组件迁移到Lightning Web组件。
将CSS从Aura组件迁移到Lightning Web组件。

梦之屋应用

比较Aura Component和Lightning Web Components编程模型的最佳方法是查看两个模型中编写的相似组件的代码。

我们将研究DreamHouse应用程序中的某些组件，该应用程序是Salesforce开发来展示Lightning组件的相对复杂的应用程序。DreamHouse是一个基于Salesforce平台的房地产业务的示例应用程序。该应用程序使经纪人能够管理其财产，并使买家能够找到他们梦想中的家。

DreamHouse应用程序具有针对Aura组件和Lightning Web组件的单独实现，并且每个组件的完整代码都位于两个不同的GitHub存储库中。在两个版本的应用程序中，功能都不相同，但是有一些组件可用于比较两个编程模型。

GitHub存储库中提供了DreamHouse应用程序的两种实现的代码。

DreamHouse Aura组件GitHub存储库
DreamHouse Lightning Web组件GitHub存储库

我们将查看Aura组件中的代码片段，并向您展示Aura代码如何映射到Lightning Web组件代码。我们还将向您展示Aura组件概念如何转换为Lightning Web组件，并且我们将重点关注核心片段以说明这些概念。然后，如果您对更多上下文感兴趣，可以探索这些组件。

组件捆绑

对于Aura组件和Lightning Web组件，组件捆绑包文件结构不同。这是文件在两种类型的组件之间的映射方式。

资源资源	光环文件	闪电Web组件文件
标记	sample.cmp	sample.html
控制者	sampleController.js	sample.js
帮手	sampleHelper.js
渲染器	sampleRenderer.js
的CSS	sample.css	sample.css
文献资料	sample.auradoc	目前不可用
设计	样本设计	sample.js-meta.xml
SVG	sample.svg	包含在HTML文件中或作为静态资源上传

注意

Aura组件中的单独的控制器，助手和渲染器文件映射到Lightning Web组件中的一个JavaScript文件。

Lightning Web组件必须包含HTML文件，JavaScript文件和配置文件。它可以选择包括CSS文件和更多JavaScript文件。

不呈现任何UI的组件（也称为服务组件或库）必须包含JavaScript文件和元数据配置文件。

在本单元中，我们研究HTML和CSS文件。在下一单元中，我们探索JavaScript文件。

Lightning Web组件还具有一个配置文件，该文件定义了该组件的元数据值，包括打算在Lightning App Builder中使用的组件的设计配置。配置文件中包含一些由接口定义的元数据，例如flexipage：availableForRecordHome，在Aura组件中。

迁移标记

Aura组件在.cmp文件中包含标记。该文件以 <光环：组件> 标签，并且可以包含HTML和Aura特定的标签。

Lightning Web组件在.html文件中包含标记。该文件以<模板> 标签，并且可以包含HTML和动态内容的指令。

让我们看看Aura标记如何映射到Lightning Web组件的HTML和JavaScript文件中的内容。

属性成为JavaScript属性

从迁移属性 <光环：属性>将Aura组件的标记（.cmp）中的标签添加到Lightning Web组件的JavaScript文件（.js）中的JavaScript属性。

让我们在标记的属性中查看这些属性 物业摘要灵气成分。您可以在DreamHouse Aura组件GitHub存储库中看到完整的文件。

    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="property" type="Property__c" />

在Lightning Web组件中，我们使用JavaScript属性而不是标记中的属性。让我们看一下propertySummary.js中的属性。

import { LightningElement, api } from 'lwc';
export default class PropertySummary extends LightningElement {
    @api recordId;
    property;
        ...
}

的 recordId 和 属性 灵气成分的属性变为 recordId 和 属性 Lightning Web组件中的JavaScript属性。

的 @api 装饰标记 recordId作为公共财产。公共属性是该组件的公共API的一部分，这意味着可以在Lightning App Builder中对其进行设置，也可以由在其标记中使用该组件的父组件来对其进行设置。

基本的Aura表达式成为HTML表达式

将基本表达式从Aura组件中的标记迁移到Lightning Web组件中的HTML表达式。基本表达式的一个示例是对Aura组件中的属性的引用。

例如， PropertyPaginator Aura组件使用基本表达式来显示 页， 页数和 总 属性。

<aura:component >
    <aura:attribute name="page" type="integer"/>
    <aura:attribute name="pages" type="integer"/>
    <aura:attribute name="total" type="integer"/>
    
    <div class="centered">{!v.total} properties • page {!v.page} of {!v.pages}</div>
</aura:component>

这是HTML文件中的等效语法 分页器 闪电网络组件。

<template>
    {totalItemCount} items • page {currentPageNumber} of {totalPages}
</template>

注意

Lightning Web组件的HTML文件中的动态内容没有感叹号或值提供程序（v。）句法。即使可能会用手指打字，也不要在Lightning Web组件中使用Aura组件中的表达式语法！

HTML引用了 totalItemCountpaginator.js中的属性。的{currentPageNumber} 和 {totalPages} 表达式引用处理程序的吸气剂 pageNumber 和 页面大小 属性。

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** The current page number. */
    @api pageNumber;
    /** The number of items on a page. */
    @api pageSize;
    /** The total number of items in the list. */
    @api totalItemCount;
    get currentPageNumber() {
        return this.totalItemCount === 0 ? 0 : this.pageNumber;
    }
    get totalPages() {
        return Math.ceil(this.totalItemCount / this.pageSize);
    }
}

了解条件语句后，我们会尽快处理更复杂的表达式。

Aura条件句成为HTML条件句

迁移 <光环：如果> Aura组件中的标签 如果属实 要么 如果：假 Lightning Web组件的HTML文件中的指令。

这是一些条件标记 经纪人详细信息 灵气成分。

<aura:if isTrue="{!v.property.Broker__c}">
    <lightning:recordForm recordId="{!v.property.Broker__c}"
      objectApiName="Broker__c"
      fields="{!v.brokerFields}" columns="2"/>
</aura:if>

这是类似的HTML brokerCard 闪电网络组件。

<template if:true={property.data}>
    <lightning-record-form object-api-name="Broker__c" 
      record-id={brokerId} fields={brokerFields} 
      columns="2">
    </lightning-record-form>
</template>

注意

Lightning Web组件的HTML文件中的动态内容没有引号， {brokerId}参考。这不是错字！

Lightning Web组件的HTML文件以标准HTML开头 <模板> 标签，并且还可以包含其他 <模板>标签在其体内。在此示例中， <模板> 标签会根据 如果属实 指示。

复杂的Aura表达式成为JavaScript逻辑

我们看到了基本的Aura表达式，例如对属性值的引用，如何变成HTML表达式。将Aura组件中的复杂Aura表达式（例如比较运算或三元运算符）迁移到Lightning Web组件中的JavaScript getter。

Aura组件支持丰富的表达式集，例如 PropertyPaginator Aura组件，它使用 {！v.page> 1}。

<aura:if isTrue="{!v.page > 1}">
    <lightning:buttonIcon iconName="utility:left" variant="border" onclick="{!c.previousPage}"/>
</aura:if>

Aura中的表达语言使您可以在标记中包含更多逻辑。不利之处在于，很难对该逻辑进行单元测试，并且该功能只是您在JavaScript中可以执行的操作的一部分。

在Lightning Web组件中，将复杂表达式移动到JavaScript中。现在可以对代码进行单元测试，这使代码更稳定，开发人员更快乐。您还可以使用JavaScript的全部功能来编写逻辑。

这是类似的HTML 分页器 闪电网络组件。

<template if:false={isFirstPage}>
    <lightning-button-icon icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button-icon>
</template>

paginator.js中的getter计算{isFirstPage}健康）状况。例如：

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** The current page number. */
    @api pageNumber;
    get isFirstPage() {
        return this.pageNumber === 1;
    }
}

Aura迭代成为HTML迭代

迁移 <光环：迭代> Aura组件中的标签 为：每个 Lightning Web组件的HTML文件中的指令。

这是PropertyTileList.cmp中的Aura语法。

<aura:iteration items="{!v.properties}" var="property">
    <c:PropertyTile property="{#property}"/>
</aura:iteration>

这是类似的HTML propertyTileList 闪电网络组件。

<template for:each={properties.data.records} for:item="property">
    <c-property-tile property={property} key={property.Id} 
      onselected={handlePropertySelected}></c-property-tile>
</template>

Aura初始化程序成为生命周期挂钩

更换 在里面 具有标准JavaScript的Aura组件中的事件处理程序 connectedCallback（）Web组件中的方法。的connectedCallback（） 将组件插入DOM时会触发生命周期挂钩。生命周期挂钩是回调方法，使您可以在组件生命周期的每个阶段运行代码。

我们使用 在里面 Aura组件中的事件用于在组件构造之后但渲染之前初始化组件。

这是一个 在里面 中的事件处理程序 物业轮播 灵气成分。

<aura:handler name="init" value="{!this}" action="{!c.onInit}" />

的 onInit Aura组件的控制器中的函数执行任何必要的初始化。

在Lightning Web组件中，使用 connectedCallback（） 而是在组件的JavaScript文件中。这是propertySummary.js中的示例。

export default class PropertySummary extends LightningElement {
    ...
    connectedCallback() {
        // initialize component
    }
}

迁移基础组件

还记得Lightning Web组件不能包含Aura组件吗？如果您需要迁移的Aura组件包含Salesforce提供的内置组件，该怎么办？基础闪电组件是Salesforce在闪电名称空间，它们在Aura组件和Lightning Web组件中都可用。在两个编程模型中使用基础Lightning组件时，它们具有不同的语法。

此光环组件使用 闪电：formattedNumber 基本组件。

<aura:component>
    <lightning:formattedNumber value="5000" style="currency"
      currencyCode="USD" />
</aura:component>

将此标记迁移到Lightning Web组件：

更改用于分隔名称空间的冒号（闪电）和组件名称（formattedNumber）。
更改驼峰案例的组件名称（formattedNumber）以短划线分隔的名称（格式化数字）。
更改驼峰案例属性名称（货币代码）以短划线分隔的名称（货币代码）。

这是等效的Lightning Web组件。

<template>
    <lightning-formatted-number value="5000" style="currency"
      currency-code="USD">
    </lightning-formatted-number>
</template>

注意

HTML规范要求自定义元素的标签不能自动关闭。自闭合标签以/>。Lightning Web组件本质上是一个自定义元素。因此，<闪电格式编号> 组件参考包含一个单独的结束语 </ lightning-formatted-number>标签。此要求与允许自动关闭标签的Aura组件不同。

Aura CSS成为标准CSS

闪电Web组件使用标准CSS语法。删除专有这个 Aura组件使用的类。

这是CSS文件的一部分， PropertyTile 灵气成分。

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

类似的CSS propertyTileLightning Web组件改用标准CSS。的这个 关键字特定于Aura，在Lightning Web组件中未使用。

.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.lower-third > p {
    padding: 0;
    margin: 0;
}
.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

带有闪电设计系统的样式组件

Lightning Experience或Salesforce移动应用程序中的自定义组件可以使用Lightning Design System，而无需任何导入语句或静态资源。将Lightning Design System CSS类分配给HTML元素，就可以了。

闪电Web组件继承Aura组件样式

Aura组件样式可级联到它们包含的任何Lightning Web组件。

但是，Lightning Web组件的样式永远不会干扰其他Lightning Web组件或Aura组件。是的，你没看错。闪电Web组件样式不会与其子级联。您不拥有的覆盖样式会造成很多问题，因此Lightning Web组件不允许这样做。

Shadow DOM的CSS封装

闪电Web组件使用一种称为阴影DOM的Web标准机制，该机制从包含该组件的页面中隐藏该组件内的元素。由于Lightning Web组件具有阴影DOM，因此在组件样式表中定义的样式将限于该组件。它们不适用于父，子或同级组件。此规则很严格，但是它允许在不同的上下文中重用组件而不会丢失其样式。它还可以防止组件的样式覆盖页面其他部分中的样式。

为了使组件作者更容易开发，Lightning Web组件的影子DOM的工作原理与Web标准有所不同。区别在于，Lightning Web组件的阴影DOM是自动创建的。组件作者不必实现它。此外，即使在本机不支持影子DOM的浏览器上，Lightning Web组件的影子DOM也可以使用。