上節帶您了解了如何處理Lightning Web組件中的事件，本節將為您介紹：在Salesforce開發過程中，如何為Lightning Web組件添加樣式和數據。學習完本節內容后，您可以在一個組件中使用CSS和Lightning設計系統；從Salesforce組織獲取數據；將應用程序部署到組織并進行測試。

點(dian)擊(ji)下(xia)方鏈(lian)接(jie)，可查看本(ben)單(dan)元往期(qi)內容

點擊查看：介紹Lightning Web組件

點擊查看：創建Lightning Web組件

點擊查看：部署Lightning Web組件

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

調整組件

通過(guo)前(qian)面四節(jie)內容，我們(men)基本(ben)已(yi)經完成了對Lightning Web組件的(de)介(jie)紹(shao)，現在(zai)讓(rang)我們(men)來嘗試(shi)一(yi)下如何設置(zhi)組件的(de)外觀和獲(huo)取(qu)實時數(shu)據(ju)。我們(men)可以(yi)根據(ju)個人喜好調整Lightning的(de)樣式，并在(zai)組織中使用(yong)實時數(shu)據(ju)。本(ben)節(jie)我們(men)要(yao)讓(rang)某(mou)些文本(ben)的(de)外觀更加生動，將使用(yong)上(shang)一(yi)單元的(de)Bike Selector應用(yong)程序來完成本(ben)節(jie)的(de)相關操作(zuo)。

CSS和組件樣式

Lightning Web組件的CSS遵守W3C標(biao)準。您(nin)可(ke)以在(zai)CSS文件中創(chuang)建一(yi)個樣式表，它會自(zi)動應(ying)(ying)用到對應(ying)(ying)的HTML文件中。

Lightning Web對組(zu)(zu)件(jian)進(jin)行了封(feng)裝，使(shi)其(qi)與全局DOM分開，我們將(jiang)通過Shadow DOM機(ji)制(zhi)來實現這一(yi)點(dian)。Shadow DOM是一(yi)種(zhong)常見的實現方式(shi)，它允(yun)許組(zu)(zu)件(jian)的元素(su)存在于DOM的子組(zu)(zu)件(jian)中(zhong)。該組(zu)(zu)件(jian)可以(yi)在其(qi)他應用程序(xu)中(zhong)保持其(qi)外觀(guan)和行為，也可以(yi)將(jiang)其(qi)作為另一(yi)個組(zu)(zu)件(jian)的子組(zu)(zu)件(jian)。例如，我們要將(jiang)自行車(che)的價(jia)格樣式(shi)設(she)置為粗體綠色，就(jiu)可以(yi)在detail.css文件(jian)中(zhong)添加(jia).price條(tiao)目。

保存(cun)并部署文件。您(nin)可以右(you)鍵點擊(ji)detail文件夾，只(zhi)部署新文件，而(er)無需等待(dai)整個項目部署完成。您(nin)需要多(duo)次(ci)刷新Bike Selector應用程序的頁面，防(fang)止出現緩(huan)存(cun)。然(ran)后(hou)，當(dang)您(nin)選擇一輛自行(xing)車(che)時，車(che)輛價格的樣式就會(hui)變成綠色(se)和粗(cu)體(ti)。

部署(shu)Lightning設(she)計系統(tong)樣(yang)式(shi)

Salesforce Lightning Design System（SLDS）是一個CSS框架，可(ke)提供與Lightning Experience一致(zhi)的(de)外觀(guan)。位(wei)于Lightning Experience或(huo)(huo)Salesforce移動應用程序中的(de)Lightning Web組(zu)件無(wu)需(xu)任(ren)何導入語句(ju)或(huo)(huo)靜(jing)態資源就可(ke)以使(shi)用SLDS。

例如，您可以使用SLDS的標(biao)題樣式，讓(rang)detail 組件的文(wen)本(ben)看起來更像標(biao)準的Lightning文(wen)本(ben)。更新(xin)detail.html文(wen)件以使用slds-text-heading_small和slds-text-heading_medium字(zi)體設(she)置(zhi)，具體如下所(suo)示(shi)。

保存并部署文件。

現在(zai)(zai)在(zai)(zai)您的組織中試用該組件，看看有什么不(bu)同（您需要(yao)刷新(xin)頁面(mian)）。

到目前(qian)為止，我們(men)一直在使用從數(shu)據(ju)組件中(zhong)提取(qu)的靜態數(shu)據(ju)。現在讓我們(men)在頁面上再添加一個動態數(shu)據(ju)。

獲(huo)取Salesforce數據

Lightning Web組件(jian)使用(yong)基于Lightning Data Service構建的響應式連接服(fu)務(wu)，我們通(tong)過一個例子，將一個名字動態地拉入(ru)我們的應用(yong)程序。

Wire Service將數據導入您的應用(yong)程序

線路服務是我(wo)們平臺的(de)一部分，主要提(ti)供數據(ju)流。我(wo)們之前簡單提(ti)到的(de)@wire裝(zhuang)飾器，為您的(de)應用程(cheng)序實現了wire服務。要想使用wire服務，需要完(wan)成以(yi)下工作。

1、在JavaScript文(wen)件中(zhong)導入(ru)一個(ge)wire適(shi)配器。

2、使用@wire裝(zhuang)飾(shi)器裝(zhuang)飾(shi)一個(ge)屬(shu)性(xing)或函數(shu)。

語法是這(zhe)樣的：

•  adapterId（標識符）- wire適配器的標識符。

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

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

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

下面是如何將它(ta)添加到項(xiang)目的selector.js文件中(zhong)，以及從(cong)您的組織(zhi)中(zhong)提取(qu)當(dang)前用(yong)戶的名字。

•  第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調用的接收器。

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

當(dang)您(nin)保存和部(bu)署(shu)(shu)selector組(zu)件文件到您(nin)的組(zu)織時（確(que)保您(nin)的部(bu)署(shu)(shu)包括selector文件），您(nin)可(ke)以(yi)看到以(yi)下內容，其(qi)中包括您(nin)的名(ming)字。（可(ke)能(neng)需(xu)要刷新頁(ye)面）。

適合移動設(she)備(bei)的標(biao)記

組成Bike Selector應用(yong)程序(xu)的(de)Lightning組件的(de)標記干(gan)凈而精(jing)簡，目的(de)是讓您專注學習 Lightning Web 組件的(de)基(ji)礎(chu)知識。但它不適合移(yi)動設備(bei)。雖然在(zai)Salesforce Mobile應用(yong)程序(xu)中可以查看(kan)，但移(yi)動體驗感較差。

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

雖然我們(men)暫時(shi)(shi)將移動(dong)(dong)設(she)備放在一(yi)邊(bian)，但(dan)我們(men)強烈建(jian)議，當您(nin)開始開發真正的(de)Lightning組件時(shi)(shi)，您(nin)應該反(fan)其(qi)道而(er)行。從(cong)一(yi)開始就考慮移動(dong)(dong)端的(de)細節和(he)設(she)計。借助SLDS和(he)移動(dong)(dong)預(yu)覽工(gong)具，從(cong)一(yi)開始就可以(yi)同時(shi)(shi)構建(jian)移動(dong)(dong)端和(he)pc端。

如(ru)果您不(bu)介(jie)意我(wo)們meta的話，這(zhe)(zhe)個(ge)模塊就是一個(ge)不(bu)盡早考(kao)慮移動端的例子。當我(wo)們收到反饋說Bike Selection應用程序在移動設(she)備上(shang)使用笨拙時，不(bu)僅要重做標記，還(huan)要重做它的解釋和實際操作(zuo)的挑(tiao)戰。事(shi)實上(shang)，這(zhe)(zhe)個(ge)模塊的結(jie)構和流程確實如(ru)此，因(yin)為我(wo)們之前沒有(you)做一點工作(zuo)。

這僅僅是個開(kai)始，您(nin)可以使用Lightning Web組件(jian)(jian)模(mo)型(xing)做很多事情。該模(mo)型(xing)包括對測試(shi)、安全、Apex集成等方(fang)面的支持(chi)。隨(sui)著W3C web組件(jian)(jian)標準的發展，Lightning Web組件(jian)(jian)模(mo)型(xing)也會隨(sui)之變化。

至此，Lightning Experience組件的(de)(de)基礎(chu)知(zhi)識單元內容已全(quan)部完結。通(tong)過本單元的(de)(de)學習，您已經(jing)了解了如何(he)創建、部署(shu)Lightning Experience組件，如何(he)處理Lightning Experience組件中事件。下一單元，我們將(jiang)學習Apex的(de)(de)基礎(chu)知(zhi)識。