上單元為您介紹了Lightning Experience自定義的相關內容，也就是無需編寫代碼，即可自定義Lightning Experience用戶界面。本單元將為您介紹在Salesforce開發過程中，Lightning Web組件的基礎知識。

 

現在是時候將您的Salesforce知識和對HTML、JavaScript、CSS等標準技術的熟悉程度結合起來，構建下一代Salesforce應用程序了。使用這些通用標準為您的Salesforce構建組件，同時保持與現有Aura組件的兼容性。

 

Lightning Web組件同時關注開發者和用戶體驗。因為我們已經打開了現有技術的大門，您可以使用您在Salesforce之外開發的技能來構建Lightning Web組件，而且無需放棄在Aura組件中已經實現的功能。另外，您一直在使用的Lightning 組件編程模型現在都被稱為Aura 組件。

 

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

 

現代瀏覽器都是基于web標準的，而不斷發展的標準也在不斷改善瀏覽器能夠呈現給用戶的內容。我們希望您能夠利用這些創新。

 

Lightning Web組件使用核心Web組件標準，只提供在Salesforce支持的瀏覽器中表現良好的必要內容。由于Lightning Web組件是基于在瀏覽器中本地運行的代碼而構建的，所以它是輕量級的，同時可提供卓越的性能。您還會發現更容易：

•  在網上常見的地方找到解決方案。

•  尋找具有必要技能和經驗的開發人員。

•  借鑒其他開發人員的經驗。

•  開發速度更快。

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

 

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

 

遵循web標準的好處在于簡單。您無需研究某個框架的特性，只需使用HTML、JavaScript和CSS就可以創建Lightning Web組件。HTML為組件提供了結構；JavaScript定義了核心業務邏輯和事件處理；CSS為組件提供外觀、感覺和動畫。這些是Lightning Web組件的基本部分。

 

HTML：模板標簽是Lightning Web的基本構建塊，您可以在此處存儲HTML的內容。

JavaScript：稍后我們會詳細介紹import語句和類聲明。

CSS：您真正需要的是在同一文件夾中具有相同名稱的HTML文件和JavaScript文件，您將這些內容部署到有元數據的組織中，就可以開始了。Salesforce會自動編譯您的文件，并為您處理模板組件的構建。

 

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

 

要想高效地開發Lightning web組件，可以使用以下工具和環境。

Dev Hub和Scratch Orgs

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

•  Salesforce命令行界面 （CLI）

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

•  Lightning組件庫

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

 

GitHub

Salesforce通過GitHub存儲庫實現共享擴展、示例等。申請一個GitHub帳戶，以確保您可以使用這些產品。

•  Visual Studio Code Salesforce擴展包  

Visual Studio是一種開發工具，Salesforce利用該工具為您提供一個集成的環境來構建組件。Salesforce for Visual Studio Code擴展包提供代碼提示、lint警告等。

•  Lightning Web 組件存儲庫

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

•  e-bikes demo

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

•  Lightning Data Service（LDS）

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

•  Lightning Locker

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

 

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