上節(jié)帶您了解了Lightning Web組件的基礎(chǔ)知識(shí)，本節(jié)將為您介紹如何創(chuàng)建Lightning Web組件。

 

假設(shè)您想要構(gòu)建一個(gè)獨(dú)立于Salesforce中的特定對(duì)象的數(shù)據(jù)顯示元素。ebikes示例庫(kù)中的productCard組件是一個(gè)很好的例子。讓我們研究一下該組件，并從頭開始構(gòu)建我們自己的版本，這樣您就可以看到它是如何變成一個(gè)成熟的Lightning Web組件的。當(dāng)您構(gòu)建組件的各個(gè)部分并探索更多示例時(shí)，您能很快獲得基相關(guān)的礎(chǔ)知識(shí)。

 

在本單元中，我們使用Visual Studio Code和Salesforce擴(kuò)展開發(fā)一個(gè)Lightning Web組件。我們將文件部署到組織，并構(gòu)建一個(gè)應(yīng)用程序來(lái)使用您的組件。如第一單元所述，您需要對(duì)Salesforce DX有一定的熟悉度才能繼續(xù)。要完成本單元，您需要:

1、帶有Salesforce擴(kuò)展包的Visual Studio Code（VS Code）

2、Salesforce CLI

3、啟用Dev Hub的org

4、將My Domain部署到已啟用Dev Hub的org中的用戶。

 

 

查看 HTML 文件

Lightning Web組件的HTML文件都包含模板標(biāo)簽，該標(biāo)簽包含定義組件結(jié)構(gòu)的HTML。讓我們看一下HTML中ebikes存儲(chǔ)庫(kù)的productCard組件簡(jiǎn)化版的HTML。按照這些示例粘貼到VS Code中。

1、在VS Code命令面板中選擇SFDX來(lái)創(chuàng)建新項(xiàng)目，接受標(biāo)準(zhǔn)模板，并給它起名為bikeCard。

2、在force-app/main/default下，右鍵單點(diǎn)擊lwc文件夾，選擇SFDX: Create Lightning Web Component。

3、輸入app作為新組件的名稱。

4、連按兩次回車，接受默認(rèn)的force-app/main/default/lwc。

5、將以下內(nèi)容粘貼到app.html中（替換文件中的現(xiàn)有HTML）

大括號(hào)中的標(biāo)識(shí)符被綁定到相應(yīng)的JavaScript類中的同名字段。

6、將以下代碼粘貼到app.js中。

7、保存文件。

現(xiàn)在讓我們來(lái)看一個(gè)真實(shí)的例子。假設(shè)您想要顯示數(shù)據(jù)，但加載需要一些時(shí)間，您又不希望用戶知道發(fā)生了什么。您可以在模板中使用lwc:if和lwc:else條件指令來(lái)確定呈現(xiàn)哪些內(nèi)容。

 

1、將以下代碼粘貼到app.html中。在HTML文件中，ready的值為true之前，“display”div標(biāo)簽中的內(nèi)容不會(huì)出現(xiàn)。

2、將以下內(nèi)容粘貼到應(yīng)用程序.js中。這將保存我們的數(shù)據(jù)值并設(shè)置 3 秒計(jì)時(shí)器。3 秒后，應(yīng)顯示內(nèi)容。（當(dāng)然，這只是出于測(cè)試目的。

將以下代碼粘貼到app.js中。這能保存我們的數(shù)據(jù)值，并自動(dòng)設(shè)置一個(gè)3秒計(jì)時(shí)器。3秒后，內(nèi)容就會(huì)出現(xiàn)。

3、保存文件。

 

二、基礎(chǔ)Lightning Web組件

現(xiàn)在，您不想從頭開始構(gòu)建所有組件。所以我們來(lái)探討一下基礎(chǔ)Lightning Web組件的使用方法。當(dāng)然，還有很多組件，包括字段類型、顯示控制器、導(dǎo)航項(xiàng)等，所有這些都在組件參考中列出。

 

讓我們把Bike的細(xì)節(jié)突出出來(lái)。在app.html文件中，用lightning-badge組件替換上一個(gè)例子中的material和category的div標(biāo)簽。下面是HTML的內(nèi)容。

保存文件。

 

Steel和Mountain這兩個(gè)詞就能作為badge出現(xiàn)了。

 

 

組件構(gòu)建結(jié)構(gòu)

一個(gè)組件只需要一個(gè)具有相同名稱的文件夾和文件，它們會(huì)根據(jù)名字和位置自動(dòng)連接。

所有Lightning Web組件都有一個(gè)命名空間，該空間用連字符與文件夾名稱分隔。例如，在默的認(rèn)命名空間c中，文件夾名稱為app的Lightning Web 組件的標(biāo)記是<c-app>。

 

但是，Salesforce平臺(tái)不允許在組件的文件夾或文件名中使用連字符。如果組件的名字有多個(gè)單詞，比如mycomponent該怎么辦？總不能將文件夾和文件命名為my-component，這里，我們有一個(gè)更方便的解決方案：駝峰式命名，myComponent。駝峰式大小寫的組件文件夾名稱在標(biāo)記中映射為kebab大小寫。要想引用文件夾名為myComponent的組件，請(qǐng)使用<c-my-component>。例如，LWC示例存儲(chǔ)庫(kù)的viewSource文件夾包含viewSource組件的文件。當(dāng)hello組件引用HTML中的viewSource組件時(shí)，它使用c-view-source。接下來(lái)讓我們看看JavaScript。

 

 

使用JavaScript

正如您到目前為止所看到的，JavaScript方法定義了如何處理輸入、數(shù)據(jù)、事件、狀態(tài)變化等，以便組件能正常工作。一個(gè)Lightning web組件的JavaScript文件必須包含以下代碼，其中MyComponent是您為組件類分配的名稱。

export語(yǔ)句定義了一個(gè)擴(kuò)展Lightning Element類的類。作為最佳實(shí)踐，類的名稱通常與JavaScript類的文件名一致，但這不是必需的。

 

 

LWC 模塊

Lightning Web組件使用模塊來(lái)捆綁核心功能，并使其能在您的組件文件中被JavaScript訪問(wèn)。Lightning Web組件的核心模塊是lwc。從import語(yǔ)句開始模塊，并指定組件使用的模塊功能。import語(yǔ)句表示JavaScript使用了lwc模塊中的Lightning Element功能。

1、Lightning Element是Lightning web組件的基類，它允許我們使用connectedCallback()。

2、connectedCallback()方法是生命周期掛鉤之一，當(dāng)在文檔對(duì)象模型（DOM）中插入組件時(shí)會(huì)觸發(fā)該方法。在這種情況下，它會(huì)啟動(dòng)計(jì)時(shí)器。

 

 

生命周期掛鉤

Lightning Web組件提供了一些方法，讓您的代碼能夠“鉤住”組件生命周期中的關(guān)鍵事件，這些事件包括當(dāng)一個(gè)組件被：創(chuàng)建、添加到DOM中、在瀏覽器中呈現(xiàn)、遇到錯(cuò)誤、從DOM中刪除。

 

使用回調(diào)方法響應(yīng)這些生命周期事件中的任何一個(gè)。例如，當(dāng)組件添加到DOM中時(shí)，會(huì)調(diào)用connectedCallback()。從組件從DOM中刪除時(shí)，會(huì)調(diào)用disconnectedCallback()。在我們用于測(cè)試條件渲染的JavaScript文件中，我們使用connectedCallback()方法，在組件被插入DOM時(shí)自動(dòng)執(zhí)行代碼。等待3秒鐘，然后將ready設(shè)置為true。

當(dāng)您在VS Code這樣的編輯器中使用這個(gè)例子時(shí)，您可能會(huì)看到setTimeout()函數(shù)的lint警告"Restricted async operation...."。該警告表明您正在使用一個(gè)經(jīng)常被誤用的異步操作；它根據(jù)時(shí)間延遲行為，而不是等待事件。在這種情況下，setTimeout()適合演示任意的時(shí)間延遲，并且警告您不應(yīng)該阻止使用它。

 

另外，注意我們使用了this關(guān)鍵字。如果您寫過(guò)JavaScript，應(yīng)該對(duì)關(guān)鍵字的用法很熟悉，就像它在其他環(huán)境中一樣。JavaScript中的this關(guān)鍵字指的是當(dāng)前上下文的最高層。在這里，上下文就是這個(gè)類。connectedCallback()方法為頂層的ready變量賦值。這是Lightning Web組件如何讓您將JavaScript功能引入開發(fā)的一個(gè)很好的例子。

 

 

修飾符

在JavaScript中，修飾符經(jīng)常用于修改一個(gè)屬性或函數(shù)的行為。要想使用修飾符，需要從lwc模塊中導(dǎo)入它，并將其放在屬性或函數(shù)之前。

您可以導(dǎo)入多個(gè)修飾符，但是一個(gè)屬性或函數(shù)只能有一個(gè)修飾符。Lightning Web組件修飾符的例子包括：

 

1、@api：將字段標(biāo)記為公共字段。公共屬性定義組件的API，在其HTML標(biāo)記中使用該組件的所有者組件可以訪問(wèn)該組件的公共屬性。所有公共屬性都是反應(yīng)式的，這意味著框架會(huì)觀察屬性的更改。當(dāng)屬性值發(fā)生變化時(shí)，框架會(huì)做出反應(yīng)并重新顯示該組件。字段和屬性幾乎是等同的術(shù)語(yǔ)。對(duì)于組件使用者來(lái)說(shuō)，字段就是屬性。在Lightning Web 組件中，只有組件作者用來(lái)@api修飾的字段才能作為對(duì)象屬性公開提供給使用者。

 

2、@track：所有字段都是反應(yīng)式的，如果對(duì)象屬性或數(shù)組元素發(fā)生變化，并且該字段被用于一個(gè)模板中，框架會(huì)重新提交組件。如果您要更改整個(gè)屬性的值，則無(wú)需使用@track。

 

3、@wire：為您提供了一種從Salesforce org獲取和綁定數(shù)據(jù)的簡(jiǎn)單方法。

 

下面是使用@api修飾符的例子，在一個(gè)app組件中呈現(xiàn)bike組件值的例子。文件結(jié)構(gòu)如下所示:

app組件使用以下HTML。

app組件使用以下JavaScript代碼。

bike組件使用以下HTML。

自行車組件使用以下 JavaScript。

現(xiàn)在您已經(jīng)可以嘗試創(chuàng)建Lightning Web 組件了。下節(jié)，我們將討論組件的生存環(huán)境。