Lightning Web Components学习入门(一)

Salesforce

学习Lightning Web Components(LWC) ，其中需要使用到SFDX。

现在可以用Lightning Web Components(业内简称LWC)和 Aura Components开发相关的Lightning components。两者都可以相互存在同一个页面下面。LWC是基于传统的HTML和现代的JavaScript进行开发，其主要内核是基于w3c的webcomponents相关开源源码：https://github.com/w3c/webcomponents/

所以，大部分的代码是基于标准的HTML和JS。同时，支持使用 JavaScript Jest测试(https://jestjs.io/)

设置开发环境

安装Salesforce CLI

安装CLI

如果你的电脑里已经安装了nodejs，可以直接通过npm进行安装

1
npm install sfdx-cli --global

或者参考官方安装方法：https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm

查看CLI版本

1
$ sfdx plugins --core

由于使用LWC需要sfdx 45以上的版本，所以我们需要对sfdx版本进行更新。

更新至最新的版本

在2019年3月以前需要安装pre-release版本

1
sfdx plugins:install salesforcedx@pre-release

在2019年3月之后可以直接卸载pre-release版本，并且输入：sfdx update进行安装。

1
2
sfdx plugins:uninstall salesforcedx
sfdx update

IDE

由于LWC无法在Developer Console打开，所以需要使用外部IDE进行开发。

申请免费的试用Spring ’19 组织

如果你是Salesforce的客户，你可以使用如下链接进行注册：
https://www.salesforce.com/form/signup/prerelease-spring19.jsp
如果你是Salesforce的Partner，你可以使用如下链接进行注册：
https://www.salesforce.com/form/signup/prerelease-spring19-partner.jsp

兼容性问题

根据官方的说法：

Aura components can contain Lightning web components. However, the opposite doesn’t apply. Lightning web components can’t contain Aura components.

Aura组件可以使用LWC作为一个组件，反过来，LWC里面不能包含Aura组件。但是JavaScript Code，可以在两边相互共享使用。

开发流程

目前有两种开发流程，一种是在IDE上直接开发，然后部署至沙盒环境。另外一种是使用Scratch Orgs，具体流程可以如下

  • 用SFDX 连入你的生产环境组织
  • 新建一个Scratch Orgs
  • 利用VS Code在本地开发LWC
  • 将LWC推送至新建的Scratch Orgs进行查看，预览和测试
  • 用SFDX 连入你的沙盒环境
  • 将本地的LWC转成元数据
  • 部署元数据至你的沙盒环境进行查看，预览和测试

实例

使用 Dev Hub

在设置(Setup),搜索’Dev Hub’,并且点Enable。只有打开Dev Hub才可以新建和使用Scratch Org。

新建DX项目

首先需要新建一个 Salesforce DX 项目，下面例子中的mywork可以换成你的项目名字如‘HelloWorld’

1
sfdx force:project:create --projectname mywork

登入Salesforce 组织

首先需要登入你的

1
sfdx force:auth:web:login -d -a DevHub

授权登入沙盒环境:

1
sfdx force:auth:web:login -r https://test.salesforce.com

或者可以添加新的Sandbox Login

1
$ sfdx force:auth:web:login -r https://test.salesforce.com  -d -a DevHub

登入之后，会跳转到Salesforce授权页面，开发者需要在浏览器页面授权

查看你所拥有的Org

1
2
3
4
5
6
7
8
9
10
11
12
sfdx force:org:list
=== Orgs
    ALIAS         USERNAME              ORG ID      CONNECTED STATUS
    -----------   --------------------  --------    ----------------
    DD-ORG        jdoe@dd-204.com       00D...OEA   Connected
(D) devhuborg     jdoe@mydevhub.com     00D...MAC   Connected


    ALIAS      SCRATCH ORG NAME USERNAME                   ORG ID    EXPIRATION DATE
    ---------- ------------     -------------------------- --------- ----------
    my-scratch Your Company     test-wvkm5z113@example.com 00D...UAI 2017-06-13
(U) scratch208 Your Company     test-wvkm5z113@example.com 00D...UAY 2017-06-13

这里顺便教几个小技巧，如果需要删除non-active 的Scratch Org，可以输入如下命令行

1
sfdx force:org:list --clean

设置默认的 Dev Hub，可以输入如下命令行，新建新的Scratch Org需要生产环境，所以需要把默认的 Dev Hub设置为你的生产环境

1
sfdx force:config:set defaultdevhubusername=org@username.com  --global

新建一个Scratch Org

开发者需要利用项目文件夹中的配置文件新建一个Scratch Org

1
2
3
sfdx force:org:create -s -f config/project-scratch-def.json -a dreamhouse-org
or
sfdx force:org:create -f config/project-scratch-def.json

如新建成功，会有如下成功的结果并给出用户名:

1
Successfully created scratch org: 00XXX0000009PENEA2, username: test-XXXX@example.com

开发者利用用户名可以登入这个Scratch Org，如果需要删除一个某一个Scratch Org，可以输入如下命令行：

1
$ sfdx force:org:delete -u  test-XXXX@example.com

设置默认的用户名

开发者需要设置默认的用户名defaultusername，这里设置之后，在下面打开Scratch Org时候可以不需要输入。

1
2
3
4
5
$ sfdx force:config:set defaultusername=test-XXXX@example.com
=== Set Config
NAME             VALUE
───────────────  ─────────────────────────────
defaultusername  test-XXXX@example.com

打开Scratch Org

当开发者建立好了Scratch Org，可以利用默认的用户名打开Scratch Org，

1
2
$ sfdx force:org:open
Access org 00D0l00ddd as user test-XXXX@example.com with the following URL: https://force-data-1039-dev-ed.cs58.my.sxxxx.com                                              alesforce.com//secur/frontdoor.jsp?sid=00D0l0000009PEN!ARoAQCCFPl.pwPYTXXNszi9rR0Q6CMrJc77771yynXH.jbnJbweH5b19bc_6KXo9BkMtMY1PLz_nY                                              BO9SSEOyQnPnCWAU3gP

如果没有设置默认的用户名，可以在命令行中指定某一个用户名：

1
sfdx force:org:open -u  test-phvqjvms7dsj@example.com

新建 Lightning Web Component(LWC)

首先需要新建LWC在如下路径force-app/main/default/lwc，同时文件夹是以lwc为命名.

然后创建LWC

1
2
cd force-app/main/default/lwc
sfdx force:lightning:component:create --type lwc -n helloWorld -d force-app/main/default/lwc

在LWC文件夹下会见到一个名字为helloWorld的文件夹，里面有三个文件helloWorld.html，helloWorld.js，helloWorld.js-meta.xml

其中helloWorld.html是我们熟悉的HTML文件，设置一个input，然后当有输入时候，调用JS函数。

1
2
3
4
5
6
7
8
<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
    </lightning-card>
</template>

在helloWorld.js文件中是JavaScript代码。设置greeting的默认值为’World’，当有输入值修改时，将修改值赋予greeting。

1
2
3
4
5
6
7
import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

最后是XML文件helloWorld.js-meta.xml，这里定义API版本和是否需要在其他LWC显示出来，同时，开发人员可以设置LWC应用于lightning App Page，lightning Record Page，lightning Home Page。

1
2
3
4
5
6
7
8
9
10
<?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>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

推送本地修改至Scratch Org

当开发者在本地修改或者新建LWC完毕之后，需要推送有关代码到Scratch Org

1
sfdx force:source:push

在lightning Home Page使用LWC

  • 打开Scratch Org，选择Sales App或者选择‘Home’ Tab。
  • 选择‘Edit Page’ ，编辑当前lightning主页。
  • 在右边的custom 栏目中拖曳helloWorld LWC 到中间的 组件位置。
  • 保存并查看。

新建元数据package

首先可以新建文件夹mdapi_output_dir：

1
$ mkdir mdapi_output_dir

其次，创建package，这个package之后会在部署时候运用到：

1
2
$ sfdx force:source:convert -d mdapi_output_dir/ --packagename package_name
Source was successfully converted to Metadata API format and written to the location: C:\Users\Administrator\my_sfdx_project\dreamhouse-sfdx\mdapi_output_dir

这里附上一些小技巧，如下命令行可以查看有什么改变：

1
$ ls -lR mdapi_output_dir/

部署

最后我们需要将上面生成的含有package的文件夹部署至指定目录，可以部署目录至沙盒环境或者生产环境，同时开发者可以定义需要跑的测试类 ：

1
sfdx force:mdapi:deploy -d mdapioutput_dir/ -u "sandbox_username" -l RunSpecifiedTests -r test1,test2,test3,test4

或者利用 sfdx force:mdapi:deploy -d <same directory as step 1> -u 直接部署

1
2
3
 sfdx force:mdapi:deploy --deploydir mdapi_output_dir --targetusername username@email.com
495048 bytes written to C:\Users\youname~1\AppData\Local\Temp\2\mdapi_output_dir.zip using 1693.299ms
Deploying C:\Users\youname~1\AppData\Local\Temp\2\mdapi_output_dir.zip...

之后会出现状态信息：

1
2
3
4
5
6
=== Status
Status:  Queued
jobid:  0AfXX00000wgOnhSAE

The deploy request did not complete within the specified wait time [0 minutes].
To check the status of this deployment, run "sfdx force:mdapi:deploy:report"

推送默认至org里面：

1
sfdx force:source:deploy -p force-app/main/default

如下命令行可以查看部署结果：

1
sfdx force:mdapi:deploy:report

资源

Salesforce, LWC, SFDX, Lightning Web Components
 上一篇

Tools, shortcut