Salesforce LWC學習(二) helloWorld程序在VSCode中的實現

上一篇咱們簡單的描述了一下Salesforce DX的配置以及CLI的簡單功能使用，此篇主要簡單描述一下LWC如何實現helloWorld以及LWC開發時應該注意的一些規範。

作國內項目的同窗直觀的感受可能時這兩年新項目基本上都在使用lightning，若是進行客製化使用aura框架進行開發。對於新項目來講，若是受夠了classic平臺下js,css都在page裏面寫，而且一個標籤或者一個actionFunction各類reRender的雜亂狀況下，aura模塊的分層管理仍是很易讀的；可是對於老項目遷移來講，若是曾經用bootstrap等前端框架再往aura框架下遷移簡直就是痛苦。由於aura框架至關於salesforce推出的一套全新的前端框架，封裝的功能以及組建用到了不少自定義的東西，而不是標準的web功能，致使咱們開發人員學習成本以及遷移成本增長。並且因爲aura框架進行了自定義的前端框架，因此感受aura框架下lightning運行比較慢。爲此，salesforce提供了一個新的前端框架LWC來實現更多的標準化，LWC實現了W3C的WEB標準，加速了lightning的運行以及更大程度的減小框架自身的客製化內容。上篇咱們也說了，LWC開發須要和Salesforce DX一塊兒，目前官方推薦 VSCode + Salesforce Extension Pack來開發LWC。本篇主要例舉最簡單的helloWorld component來對LWC入門，後期會講更深刻的LWC的知識。

咱們建立Aura的lightning Component會生成一個bundle，裏面包含不少類型的文件，當咱們在建立LWC的lightning component也會生成一個bundle，二者生成的類型和數量有區別，對應的mapping關係以下。

咱們在使用aura的時候對待命名規範有要求，可是某些點不是特別嚴格，針對LWC的官方建議的命名規則以下：

• 必須須要小寫字母做爲命名開頭；
• 必須只能包含字母數字或者下劃線；
• 命名空間中必須惟一
• 不能包含空格符
• 不能如下劃線結尾
• 不能包含兩個連續下劃線
• 不能包含破折號

有一點和aura框架差距蠻大的地方是當父component引用子component時，好比子component名字是 sonComponent，父component名字是parentComponent.

針對Aura框架下的引用： <c:sonComponent/>

針對LWC框架下的引用：<c-son-component/>

在LWC中，默認的命名空間和Aura相同，爲c。在進行引用時，會按照命名規則的駝峯要求進行拆分，中間使用'-'進行鏈接各個單詞，而且將駝峯中的大寫改爲小寫。在項目命名時，建議使用駝峯方式命名。

 一. Pre Operation

1. Enable Debug Mode：爲了後期更好的debug javascript代碼，咱們能夠設置指定的用戶enable，方便後期查問題。

2. 安裝CLI，vscode等工具，參看上篇。

 二. 建立helloLwc的LWC Project

1. 建立Project： windows環境 ctrl + shift + p，選擇 SFDX: Create Project，而後輸入想要建立的名字，這裏名稱爲：helloWorld

2. Authorize Dev Hub: windows環境，ctrl + shift + p 選擇 SFDX: Authorize a Dev Hub，後期會跳轉到一個Dev Hub Org登錄界面，登錄便可；

當有下面的內容說明已經受權成功

3.  建立默認的Scratch Org環境，選擇 Create a Default Scratch Org按照步驟填寫建立

當出現下圖說明Scratch Org已經建立好。

 4. 建立LWC Component：選擇SFDX: Create Lightning Web Component，按照步驟建立，名稱起爲helloLwc.

 當建立好之後，會默認建立好helloLwc的bunddle，包括三個文件: helloLwc.html/helloLwc.js/helloLwc.js-meta.xml。爲下面的三個文件填充內容。

helloLwc.html

1 <template>
2     <lightning-card title="HelloWorld" icon-name="custom:custom14">
3         <div class="slds-card__body slds-card__body_inner">
4             Hello, {name}!
5         </div>
6     </lightning-card>
7 </template>

helloLwc.js

1 import { LightningElement,api } from 'lwc'; 2 
3 export default class HelloWorld extends LightningElement { 4     @api name = 'world'; 5 }

helloLwc.js-meta.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
 3     <apiVersion>45.0</apiVersion>
 4     <isExposed>true</isExposed>
 5     <masterLabel>Hello World</masterLabel>
 6     <description>Add a classic greeting to any page.</description>
 7     <targets>
 8         <target>lightning__AppPage</target>
 9     </targets>
10     <targetConfigs>
11         <targetConfig targets="lightning__AppPage">
12             <property name="name" type="String" label="Name" placeholder="World" description="Enter the name of the person to greet."/>
13         </targetConfig>
14       </targetConfigs>
15 </LightningComponentBundle>

其中，helloLwc.html的根component爲<template>,作過aura的知道根對應的aura:component，aura中的attribute用來在component中展現內容，在lwc中咱們須要在後臺聲明變量而後html中引用，固然在lwc中包含了3中類型的變量聲明: public reactive property / private reactive property 以及 private property。這些區別以及使用會在後續的博客中詳細描述，這裏有一個概念就好。

針對meta.xml，他是lwc component的配置文件，它能夠配置當前的這個lwc component的相關的信息，好比api version, 此component能夠引用在哪些，好比lightning__AppPage/lightning__HomePage等。針對meta.xml的配置詳情能夠參看：https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_configuration_tags

4. 部署lwc component到默認的Scratch Org環境

 5. 效果展現：咱們建立完lightning web component之後須要查看效果是否符合咱們的預期，這裏能夠有兩種方式。

1） 將此lightning web component放在 lightning app builder中,設置name的值查看效果(由於咱們在meta.xml中配置的是容許用在lightning app page中)。

2）在官方提供的play ground環境，將代碼放在對應的目錄文件下而後運行查看效果。playground 連接：https://developer.salesforce.com/docs/component-library/tools/playground， 這裏再也不演示這種方式。

 6. 部署代碼到其餘的scratch org或者對應的Dev Hub環境： 當咱們已經在scratch org已經測試差很少想要移植到Dev Hub環境或者咱們當前的Dev Hub有多個Scratch Org環境，咱們想要移動到其餘的Scratch Org環境，這個時候咱們須要使用CLI命令去實現。從下圖可知，咱們如今的默認的scratch org的別名爲：test-scratch-org，咱們如今想要將代碼push到另一個scratch org。這個時候咱們須要點擊Terminal，選擇New Terminal之後，使用force:source:deploy命令去push到其餘的org。

總結： 學習LwC的階段碰到了各類各樣的問題，感謝學習羣裏面的一些大神的指點迷津。本篇只是LWC的掃盲操做篇，主要針對像我同樣沒有用過VS Code以及不知道LWC工程如何建立的小夥伴。篇中有錯誤的地方歡迎指出，有不懂的小夥伴歡迎互相交流。篇中沒有對LWC的語法進行講解，後面的博客會慢慢詳細的講解。

原文出處：https://www.cnblogs.com/zero-zyq/p/11123871.html