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

 

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

點(diǎn)擊查看：介紹Lightning Web組件

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

點(diǎn)擊查看：部署Lightning Web組件

點(diǎn)擊查看：處理Lightning Web組件中的事件

 

 

調(diào)整組件

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

 

 

CSS和組件樣式

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

 

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

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

 

 

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

Salesforce Lightning Design System（SLDS）是一個(gè)CSS框架，可提供與Lightning Experience一致的外觀。位于Lightning Experience或Salesforce移動(dòng)應(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)在在您的組織中試用該組件，看看有什么不同（您需要刷新頁(yè)面）。

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

 

 

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

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

 

 

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

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

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

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

語法是這樣的：

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

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

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

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

 

下面是如何將它添加到項(xiàng)目的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文件來嘗試這個(gè)方法。例如:

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

 

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

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

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

 

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

 

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

 

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

 

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