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

zero.zhang發表於2019-07-03
SalesforceVSCode

上一篇我們簡單的描述了一下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的語法進行講解，後面的部落格會慢慢詳細的講解。

相關文章