上節(jié)帶您了解了如何處理Lightning Web組件中的事件，本節(jié)將為您介紹：在Salesforce開發(fā)過程中，如何為Lightning Web組件添加樣式和數(shù)據(jù)。學(xué)習(xí)完本節(jié)內(nèi)容后，您可以在一個組件中使用CSS和Lightning設(shè)計系統(tǒng)；從Salesforce組織獲取數(shù)據(jù)；將應(yīng)用程序部署到組織并進(jìn)行測試。

 

點擊下方鏈接，可查看本單元往期內(nèi)容

點擊查看：介紹Lightning Web組件

點擊查看：創(chuàng)建Lightning Web組件

點擊查看：部署Lightning Web組件

點擊查看：處理Lightning Web組件中的事件

 

 

調(diào)整組件

通過前面四節(jié)內(nèi)容，我們基本已經(jīng)完成了對Lightning Web組件的介紹，現(xiàn)在讓我們來嘗試一下如何設(shè)置組件的外觀和獲取實時數(shù)據(jù)。我們可以根據(jù)個人喜好調(diào)整Lightning的樣式，并在組織中使用實時數(shù)據(jù)。本節(jié)我們要讓某些文本的外觀更加生動，將使用上一單元的Bike Selector應(yīng)用程序來完成本節(jié)的相關(guān)操作。

 

 

CSS和組件樣式

Lightning Web組件的CSS遵守W3C標(biāo)準(zhǔn)。您可以在CSS文件中創(chuàng)建一個樣式表，它會自動應(yīng)用到對應(yīng)的HTML文件中。

 

Lightning Web對組件進(jìn)行了封裝，使其與全局DOM分開，我們將通過Shadow DOM機(jī)制來實現(xiàn)這一點。Shadow DOM是一種常見的實現(xiàn)方式，它允許組件的元素存在于DOM的子組件中。該組件可以在其他應(yīng)用程序中保持其外觀和行為，也可以將其作為另一個組件的子組件。例如，我們要將自行車的價格樣式設(shè)置為粗體綠色，就可以在detail.css文件中添加.price條目。

保存并部署文件。您可以右鍵點擊detail文件夾，只部署新文件，而無需等待整個項目部署完成。您需要多次刷新Bike Selector應(yīng)用程序的頁面，防止出現(xiàn)緩存。然后，當(dāng)您選擇一輛自行車時，車輛價格的樣式就會變成綠色和粗體。

 

 

部署Lightning設(shè)計系統(tǒng)樣式

Salesforce Lightning Design System（SLDS）是一個CSS框架，可提供與Lightning Experience一致的外觀。位于Lightning Experience或Salesforce移動應(yīng)用程序中的Lightning Web組件無需任何導(dǎo)入語句或靜態(tài)資源就可以使用SLDS。

 

例如，您可以使用SLDS的標(biāo)題樣式，讓detail 組件的文本看起來更像標(biāo)準(zhǔn)的Lightning文本。更新detail.html文件以使用slds-text-heading_small和slds-text-heading_medium字體設(shè)置，具體如下所示。

保存并部署文件。

現(xiàn)在在您的組織中試用該組件，看看有什么不同（您需要刷新頁面）。

到目前為止，我們一直在使用從數(shù)據(jù)組件中提取的靜態(tài)數(shù)據(jù)。現(xiàn)在讓我們在頁面上再添加一個動態(tài)數(shù)據(jù)。

 

 

獲取Salesforce數(shù)據(jù)

Lightning Web組件使用基于Lightning Data Service構(gòu)建的響應(yīng)式連接服務(wù)，我們通過一個例子，將一個名字動態(tài)地拉入我們的應(yīng)用程序。

 

 

Wire Service將數(shù)據(jù)導(dǎo)入您的應(yīng)用程序

線路服務(wù)是我們平臺的一部分，主要提供數(shù)據(jù)流。我們之前簡單提到的@wire裝飾器，為您的應(yīng)用程序?qū)崿F(xiàn)了wire服務(wù)。要想使用wire服務(wù)，需要完成以下工作。

1、在JavaScript文件中導(dǎo)入一個wire適配器。

2、使用@wire裝飾器裝飾一個屬性或函數(shù)。

語法是這樣的：

•  adapterId（標(biāo)識符）- wire適配器的標(biāo)識符。

•  adapter-module（字符串）- 包含wire適配器功能的模塊標(biāo)識符。

•  adapterConfig（對象）- 特定于wire適配器的配置對象。

• Propertyorfunction（私有屬性或函數(shù)）- 用于接收來自連接服務(wù)的數(shù)據(jù)流。如果用@wire裝飾屬性，結(jié)果將返回到該屬性的data屬性或error屬性。如果用@wire修飾函數(shù)，結(jié)果將返回到具有data屬性和error屬性的對象中。

 

下面是如何將它添加到項目的selector.js文件中，以及從您的組織中提取當(dāng)前用戶的名字。

•  第1行：從LWC導(dǎo)入wire。

•  第2行：從lightning/uiRecordApi導(dǎo)入getRecord和getFieldValue的adapterId和adapter-modules。

•  第3行：使用@salesforce模塊導(dǎo)入當(dāng)前用戶ID。

•  第4行：為User.Name導(dǎo)入@salesforce模式。

•  第12行：使用@wire裝飾器調(diào)用getRecord，傳入userId并獲取字段。

•  第13行：將user設(shè)置為@wire調(diào)用的接收器。

 

您也可以通過編輯selector.html文件來嘗試這個方法。例如:

當(dāng)您保存和部署selector組件文件到您的組織時（確保您的部署包括selector文件），您可以看到以下內(nèi)容，其中包括您的名字。（可能需要刷新頁面）。

 

適合移動設(shè)備的標(biāo)記

組成Bike Selector應(yīng)用程序的Lightning組件的標(biāo)記干凈而精簡，目的是讓您專注學(xué)習(xí) Lightning Web 組件的基礎(chǔ)知識。但它不適合移動設(shè)備。雖然在Salesforce Mobile應(yīng)用程序中可以查看，但移動體驗感較差。

使用SLDS的好處之一是，只需要一點點努力，您就可以獲得在pc端和移動端看起來都很棒的設(shè)計。

 

雖然我們暫時將移動設(shè)備放在一邊，但我們強(qiáng)烈建議，當(dāng)您開始開發(fā)真正的Lightning組件時，您應(yīng)該反其道而行。從一開始就考慮移動端的細(xì)節(jié)和設(shè)計。借助SLDS和移動預(yù)覽工具，從一開始就可以同時構(gòu)建移動端和pc端。

 

如果您不介意我們meta的話，這個模塊就是一個不盡早考慮移動端的例子。當(dāng)我們收到反饋說Bike Selection應(yīng)用程序在移動設(shè)備上使用笨拙時，不僅要重做標(biāo)記，還要重做它的解釋和實際操作的挑戰(zhàn)。事實上，這個模塊的結(jié)構(gòu)和流程確實如此，因為我們之前沒有做一點工作。

 

這僅僅是個開始，您可以使用Lightning Web組件模型做很多事情。該模型包括對測試、安全、Apex集成等方面的支持。隨著W3C web組件標(biāo)準(zhǔn)的發(fā)展，Lightning Web組件模型也會隨之變化。

 

至此，Lightning Experience組件的基礎(chǔ)知識單元內(nèi)容已全部完結(jié)。通過本單元的學(xué)習(xí)，您已經(jīng)了解了如何創(chuàng)建、部署Lightning Experience組件，如何處理Lightning Experience組件中事件。下一單元，我們將學(xué)習(xí)Apex的基礎(chǔ)知識。