上單元為您介紹了Lightning Experience自定義的相關(guān)內(nèi)容，也就是無(wú)需編寫代碼，即可自定義Lightning Experience用戶界面。本單元將為您介紹在Salesforce開發(fā)過程中，Lightning Web組件的基礎(chǔ)知識(shí)。

 

現(xiàn)在是時(shí)候?qū)⒛?/span>Salesforce知識(shí)和對(duì)HTML、JavaScript、CSS等標(biāo)準(zhǔn)技術(shù)的熟悉程度結(jié)合起來，構(gòu)建下一代Salesforce應(yīng)用程序了。使用這些通用標(biāo)準(zhǔn)為您的Salesforce構(gòu)建組件，同時(shí)保持與現(xiàn)有Aura組件的兼容性。

 

Lightning Web組件同時(shí)關(guān)注開發(fā)者和用戶體驗(yàn)。因?yàn)槲覀円呀?jīng)打開了現(xiàn)有技術(shù)的大門，您可以使用您在Salesforce之外開發(fā)的技能來構(gòu)建Lightning Web組件，而且無(wú)需放棄在Aura組件中已經(jīng)實(shí)現(xiàn)的功能。另外，您一直在使用的Lightning 組件編程模型現(xiàn)在都被稱為Aura 組件。

 

您應(yīng)該對(duì)Salesforce DX和Salesforce CLI有一個(gè)基本的了解。您還需要在您的Trailhead帳戶中使用正確配置的org，并使用帶有Salesforce擴(kuò)展包的VS Code。如果您使用的是連接到您的Trailhead賬戶的開發(fā)版org，您需要在Setup中部署My Domain（Trailhead Playground orgs會(huì)自動(dòng)部署My Domain）。

 

現(xiàn)代瀏覽器都是基于web標(biāo)準(zhǔn)的，而不斷發(fā)展的標(biāo)準(zhǔn)也在不斷改善瀏覽器能夠呈現(xiàn)給用戶的內(nèi)容。我們希望您能夠利用這些創(chuàng)新。

 

Lightning Web組件使用核心Web組件標(biāo)準(zhǔn)，只提供在Salesforce支持的瀏覽器中表現(xiàn)良好的必要內(nèi)容。由于Lightning Web組件是基于在瀏覽器中本地運(yùn)行的代碼而構(gòu)建的，所以它是輕量級(jí)的，同時(shí)可提供卓越的性能。您還會(huì)發(fā)現(xiàn)更容易：

•  在網(wǎng)上常見的地方找到解決方案。

•  尋找具有必要技能和經(jīng)驗(yàn)的開發(fā)人員。

•  借鑒其他開發(fā)人員的經(jīng)驗(yàn)。

•  開發(fā)速度更快。

•  利用完全封裝，使組件更加通用。

 

Lightning組件并不是什么新鮮事物。事實(shí)上，各個(gè)瀏覽器多年來一直在創(chuàng)建這些功能。<select>、<video>、<input>等不只是一個(gè)容器的標(biāo)簽，這些元素實(shí)際上相當(dāng)于Web組件。我們的目標(biāo)是為Salesforce開發(fā)帶來高程度的集成。

 

遵循web標(biāo)準(zhǔn)的好處在于簡(jiǎn)單。您無(wú)需研究某個(gè)框架的特性，只需使用HTML、JavaScript和CSS就可以創(chuàng)建Lightning Web組件。HTML為組件提供了結(jié)構(gòu)；JavaScript定義了核心業(yè)務(wù)邏輯和事件處理；CSS為組件提供外觀、感覺和動(dòng)畫。這些是Lightning Web組件的基本部分。

 

HTML：模板標(biāo)簽是Lightning Web的基本構(gòu)建塊，您可以在此處存儲(chǔ)HTML的內(nèi)容。

JavaScript：稍后我們會(huì)詳細(xì)介紹import語(yǔ)句和類聲明。

CSS：您真正需要的是在同一文件夾中具有相同名稱的HTML文件和JavaScript文件，您將這些內(nèi)容部署到有元數(shù)據(jù)的組織中，就可以開始了。Salesforce會(huì)自動(dòng)編譯您的文件，并為您處理模板組件的構(gòu)建。

 

Salesforce在引入Lightning Web組件時(shí)，沒有減少對(duì)Aura組件的現(xiàn)有支持。因此您可以將現(xiàn)有組件遷移到Lightning Web組件模型中，在不放棄現(xiàn)有Aura組件的情況下使用Lightning Web組件，實(shí)現(xiàn)組件共存。事實(shí)上，Aura組件可以包含Lightning Web組件（反之亦然）。但純粹的Lightning Web組件的實(shí)現(xiàn)提供了完整的封裝和對(duì)不斷發(fā)展的通用標(biāo)準(zhǔn)的遵守。

 

要想高效地開發(fā)Lightning web組件，可以使用以下工具和環(huán)境。

Dev Hub和Scratch Orgs

Scratch orgs是一次性的Salesforce orgs，用于支持開發(fā)和測(cè)試。Dev Hub用于管理Scratch Orgs。兩者都是Salesforce DX工具集的一部分。Salesforce DX是由Salesforce構(gòu)建和支持的一套集成開發(fā)工具。

•  Salesforce命令行界面 （CLI）

Salesforce CLI 提供了一種快速運(yùn)行操作的方法，用于創(chuàng)建和配置Scratch orgs以及部署組件。這也是Salesforce DX工具集的一部分。

•  Lightning組件庫(kù)

Aura和Lightning web組件的參考資料和使用方法，您可以在Salesforce的開發(fā)者培訓(xùn)欄目中尋找，也可以通過組織的實(shí)例http://<MyDomainName>.lightning.force.com/docs/component-library查看庫(kù)。通過實(shí)例查看庫(kù)，您只能看到組織的正確版本。而且，當(dāng)您創(chuàng)建自定義組件時(shí)，它們也會(huì)出現(xiàn)在庫(kù)中。

 

GitHub

Salesforce通過GitHub存儲(chǔ)庫(kù)實(shí)現(xiàn)共享擴(kuò)展、示例等。申請(qǐng)一個(gè)GitHub帳戶，以確保您可以使用這些產(chǎn)品。

•  Visual Studio Code Salesforce擴(kuò)展包  

Visual Studio是一種開發(fā)工具，Salesforce利用該工具為您提供一個(gè)集成的環(huán)境來構(gòu)建組件。Salesforce for Visual Studio Code擴(kuò)展包提供代碼提示、lint警告等。

•  Lightning Web 組件存儲(chǔ)庫(kù)

Salesforce提供了一個(gè)GitHub資源庫(kù)來幫助您了解Lightning Web組件的工作原理。您可以克隆、修補(bǔ)這些示例組合，并將其發(fā)布到您自己的scratch org上。

•  e-bikes demo

GitHub資源庫(kù)是了解Lightning Web組件工作原理的好方法，e-bikes demo是用于創(chuàng)建從端到端的Lightning web組件。

•  Lightning Data Service（LDS）

通過Lightning Data Service訪問Salesforce的數(shù)據(jù)和元數(shù)據(jù)，基本的Lightning組件是建立在LDS之上的。利用LDS緩存、更改跟蹤、性能等優(yōu)勢(shì)，自定義您自己的組件。

•  Lightning Locker

Lightning Web組件通過Lightning Locker的安全性不受不同命名空間中的組件的影響。Lightning Locker 還推廣了最佳實(shí)踐，通過僅允許訪問受支持的 API 并消除對(duì)未發(fā)布的框架內(nèi)部的訪問來提高代碼的可支持性。

 

接下來的內(nèi)容，我們將使用eBikes演示，看看您能用HTML和JavaScript文件做什么。