上节带您了解了如何处理Lightning Web组件中的事件，本节将为您介绍：在Salesforce开发过程中，如何为Lightning Web组件添加样式和数据。学习完本节内容后，您可以在一个组件中使用CSS和Lightning设计系统；从Salesforce组织获取数据；将应用程序部署到组织并进行测试。

 

点击下方链接，可查看本单元往期内容

点击查看：介绍Lightning Web组件

点击查看：创建Lightning Web组件

点击查看：部署Lightning Web组件

点击查看：处理Lightning Web组件中的事件

 

 

调整组件

通过前面四节内容，我们基本已经完成了对Lightning Web组件的介绍，现在让我们来尝试一下如何设置组件的外观和获取实时数据。我们可以根据个人喜好调整Lightning的样式，并在组织中使用实时数据。本节我们要让某些文本的外观更加生动，将使用上一单元的Bike Selector应用程序来完成本节的相关操作。

 

 

CSS和组件样式

Lightning Web组件的CSS遵守W3C标准。您可以在CSS文件中创建一个样式表，它会自动应用到对应的HTML文件中。

 

Lightning Web对组件进行了封装，使其与全局DOM分开，我们将通过Shadow DOM机制来实现这一点。Shadow DOM是一种常见的实现方式，它允许组件的元素存在于DOM的子组件中。该组件可以在其他应用程序中保持其外观和行为，也可以将其作为另一个组件的子组件。例如，我们要将自行车的价格样式设置为粗体绿色，就可以在detail.css文件中添加.price条目。

保存并部署文件。您可以右键点击detail文件夹，只部署新文件，而无需等待整个项目部署完成。您需要多次刷新Bike Selector应用程序的页面，防止出现缓存。然后，当您选择一辆自行车时，车辆价格的样式就会变成绿色和粗体。

 

 

部署Lightning设计系统样式

Salesforce Lightning Design System（SLDS）是一个CSS框架，可提供与Lightning Experience一致的外观。位于Lightning Experience或Salesforce移动应用程序中的Lightning Web组件无需任何导入语句或静态资源就可以使用SLDS。

 

例如，您可以使用SLDS的标题样式，让detail 组件的文本看起来更像标准的Lightning文本。更新detail.html文件以使用slds-text-heading_small和slds-text-heading_medium字体设置，具体如下所示。

保存并部署文件。

现在在您的组织中试用该组件，看看有什么不同（您需要刷新页面）。

到目前为止，我们一直在使用从数据组件中提取的静态数据。现在让我们在页面上再添加一个动态数据。

 

 

获取Salesforce数据

Lightning Web组件使用基于Lightning Data Service构建的响应式连接服务，我们通过一个例子，将一个名字动态地拉入我们的应用程序。

 

 

Wire Service将数据导入您的应用程序

线路服务是我们平台的一部分，主要提供数据流。我们之前简单提到的@wire装饰器，为您的应用程序实现了wire服务。要想使用wire服务，需要完成以下工作。

1、在JavaScript文件中导入一个wire适配器。

2、使用@wire装饰器装饰一个属性或函数。

语法是这样的：

•  adapterId（标识符）- wire适配器的标识符。

•  adapter-module（字符串）- 包含wire适配器功能的模块标识符。

•  adapterConfig（对象）- 特定于wire适配器的配置对象。

• Propertyorfunction（私有属性或函数）- 用于接收来自连接服务的数据流。如果用@wire装饰属性，结果将返回到该属性的data属性或error属性。如果用@wire修饰函数，结果将返回到具有data属性和error属性的对象中。

 

下面是如何将它添加到项目的selector.js文件中，以及从您的组织中提取当前用户的名字。

•  第1行：从LWC导入wire。

•  第2行：从lightning/uiRecordApi导入getRecord和getFieldValue的adapterId和adapter-modules。

•  第3行：使用@salesforce模块导入当前用户ID。

•  第4行：为User.Name导入@salesforce模式。

•  第12行：使用@wire装饰器调用getRecord，传入userId并获取字段。

•  第13行：将user设置为@wire调用的接收器。

 

您也可以通过编辑selector.html文件来尝试这个方法。例如:

当您保存和部署selector组件文件到您的组织时（确保您的部署包括selector文件），您可以看到以下内容，其中包括您的名字。（可能需要刷新页面）。

 

适合移动设备的标记

组成Bike Selector应用程序的Lightning组件的标记干净而精简，目的是让您专注学习 Lightning Web 组件的基础知识。但它不适合移动设备。虽然在Salesforce Mobile应用程序中可以查看，但移动体验感较差。

使用SLDS的好处之一是，只需要一点点努力，您就可以获得在pc端和移动端看起来都很棒的设计。

 

虽然我们暂时将移动设备放在一边，但我们强烈建议，当您开始开发真正的Lightning组件时，您应该反其道而行。从一开始就考虑移动端的细节和设计。借助SLDS和移动预览工具，从一开始就可以同时构建移动端和pc端。

 

如果您不介意我们meta的话，这个模块就是一个不尽早考虑移动端的例子。当我们收到反馈说Bike Selection应用程序在移动设备上使用笨拙时，不仅要重做标记，还要重做它的解释和实际操作的挑战。事实上，这个模块的结构和流程确实如此，因为我们之前没有做一点工作。

 

这仅仅是个开始，您可以使用Lightning Web组件模型做很多事情。该模型包括对测试、安全、Apex集成等方面的支持。随着W3C web组件标准的发展，Lightning Web组件模型也会随之变化。

 

至此，Lightning Experience组件的基础知识单元内容已全部完结。通过本单元的学习，您已经了解了如何创建、部署Lightning Experience组件，如何处理Lightning Experience组件中事件。下一单元，我们将学习Apex的基础知识。