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

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-card__body slds-card__body_inner">
            Hello, {name}!
        </div>
    </lightning-card>
</template>

helloLwc.js

import { LightningElement,api } from 'lwc';

export default class HelloWorld extends LightningElement {
    @api name = 'world';
}

helloLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <description>Add a classic greeting to any page.</description>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="name" type="String" label="Name" placeholder="World" description="Enter the name of the person to greet."/>
        </targetConfig>
      </targetConfigs>
</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的語法進行講解，后面的博客會慢慢詳細的講解。