作者： ponybai

好！时间写一些代码！ ＃最后！

编写Lightning组件代码的第一步是，呃，设置编写代码。幸运的是，这非常简单。在您的组织机构中，打开您的名字下的开发者控制台或快速访问菜单（设置齿轮图标）。

闪电体验	Salesforce 经典

繁荣，你已经准备好写Lightning组件代码！

所以，我们来写点东西吧。选择 File | New | Lightning Component 创建一个新的闪电组件。在New Lightning Bundle面板中，输入helloWorld作为组件名称，然后单击Submit。

这将创建一个新的helloWorld组件包，其中包含两个打开的选项卡。关闭helloWorld选项卡，并保持helloWorld.cmp选项卡打开。

helloWorld.cmp包含Lightning组件的开始和结束标签，<aura：component>。在它们之间，添加以下标记，并保存：

<p>Hello Lightning!</p>

呜呼，你的第一个闪电组件！现在…我们如何看待它的样子？

简单的回答是，这是棘手的。你不能直接运行你的组件，看看它是如何工作的。相反，您的组件需要在容器应用程序中运行，我们将其称为容器。容器的例子是Lightning Experience或Salesforce应用程序，或者是使用Lightning App Builder构建的应用程序 – 基本上，您在前一个单元结束时看到的任何内容。您将组件添加到其中一个容器，然后在该容器中访问它。

稍后我们将更多地讨论容器，以及其他Lightning组件模块。现在，让我们来简单介绍一下。

选择 File | New | Lightning Application 以创建一个新的闪电应用程序。在New Lightning Bundle面板中，输入“harnessApp”作为应用程序名称，然后单击Submit。

这将创建一个新的harnessApp包，其中包含两个打开的标签。关闭harnessApp选项卡，并保持harnessApp.app选项卡打开。

harnessApp.app包含Lightning应用程序的开始和结束标记，<aura：application>。在它们之间，添加以下标记，并保存：

<c:helloWorld/>

有一个：预览按钮。应用程序有一个，组件不。现在点击它，另一个浏览器窗口应该打开并显示你的应用程序。

现在我们正在用…做饭，好吧，这只是“你好世界”。但是这里有一些有趣的事情要注意，尽管标记是微不足道的。

我们从开发者控制台开始。如果您已经使用它来编写Visualforce或Apex，那么您肯定会注意到任何Lightning软件包编辑窗口右侧的调色板中出现的额外控件。每个带有“创建”标签的不同按钮都代表您可以添加到软件包的不同资源。我们将在下一节讨论资源和捆绑。现在，只要知道开发者控制台为您提供了一个简单的方法来创建和切换它们。

事实上，开发人员控制台具有许多与Lightning组件配合使用的功能。还有 File | Open | Lightning Resources, 可以让你一次打开一堆闪电资源。有用！

开发者控制台是编写Lightning代码的好地方，我们将在这个模块的其余部分使用它。但是，由于Lightning资源可通过Force.com Tooling API访问，因此还有其他方法可以创建和编辑它们。 Salesforce DX为开发Lightning组件的各个方面提供了强大的支持。 Force.com IDE是一个很好的独立客户端，并且有很好的第三方工具，如Sublime Lightning和VS Code。不要以为只限于开发者控制台！

在我们转向代码之前最后一件事。我们“预览”的URL实际上是我们的应用程序永久的家（一旦它提供给我们的用户）。 URL的格式如下：https：// <yourDomain> .lightning.force.com / <yourNamespace> / <yourAppName> .app。

<yourAppName>表示应用程序包的名称，在这种情况下为harnessApp。在你的Trailhead DE组织中，你不应该有一个配置好的名字空间，所以你应该在这个URL部分看到一个“c”。 “c”表示默认的命名空间…它会在以后回来困扰我们。 URL格式的其余部分应该是不言自明的。

好的，在代码上！

你好的世界并不是经常触发存在的问题，但我们在这里。让我们来讨论一下我们的helloWorld示例中的组件是什么。实际上，一个组件是一个捆绑包，它包含一个用标记编写的定义资源，并且可以包含额外的可选资源，如控制器，样式表等等。资源有点像文件，但存储在Salesforce中而不是文件系统上。

我们的helloWorld.cmp组件定义资源很容易理解。

<aura:component>
    <p>Hello Lightning!</p>
</aura:component>

.THIS {
}

p.THIS {
    font-size: 24px;
}

• helloWorld — 组件包
  • helloWorld.cmp — 组件的定义
  • helloWorld.css — 组件的样式

如您在开发者控制台中看到的那样，您可以添加到组件包中的其他许多资源类型。继续并单击CONTROLLER和HELPER项目，将这些资源添加到包中。现在你的包看起来像这样，你可以开始看到命名系统。

• helloWorld — 组件包
  • helloWorld.cmp — 组件的定义
  • helloWorldController.js — 组件的控制器或主JavaScript文件
  • helloWorldHelper.js — 组件的助手或辅助JavaScript文件
  • helloWorld.css —组件的样式

在这个模块中，我们只使用这四种资源类型。当我们真正开始为他们编写代码时，我们会更多地讨论控制器和辅助资源。现在，你可以保留默认的实现。毕竟，这只是你好世界！

现在我们知道什么是组件，实际上很容易解释一个应用程序是什么 – 一个应用程序只是一种特殊的组件！对于本模块而言，您可以将应用程序视为与组件不同，而只有两种有意义的方式：

• 一个应用程序使用<aura：application>标记而不是<aura：component>标记。
• 开发者控制台中只有一个应用具有“预览”按钮。

而已！

就像听起来那么简单，关于如何使用应用程序和组件，有一些实用的细节。主要内容如下。

• 编写标记时，可以将组件添加到应用程序，但不能将应用程序添加到其他应用程序或应用程序添加到组件。
• 一个应用程序有一个独立的URL，您可以在测试时访问，也可以发布给您的用户。我们经常将这些独立的应用程序称为“my.app”。
• 您无法将应用程序添加到Lightning Experience或Salesforce应用程序 – 只能添加组件。在最后一个单位之后，这听起来很奇怪。如果不是应用程序，到底应该将什么添加到应用程序启动器？您添加到应用启动器的是一个Salesforce应用程序，该应用程序包装了一个Lightning组件，这个组件在<aura：component>中定义。 Lightning组件应用程序（即<aura：application>中定义的某些内容）不能用于创建Salesforce应用程序。有点奇怪，但它是。

那么，什么是适合的应用程序？你为什么要用一个？我们之前回答了这个问题。您使用容器发布使用Lightning组件构建的功能。 Lightning组件应用程序是Lightning组件的一种容器。

再一次实用，这通常意味着你在顶级组件中构建了所有的“应用程序”功能。然后，最后，将一个组件粘贴到一个容器中 – 也许是一个Lightning组件应用程序，也许是Salesforce应用程序，也许还有其他的东西。如果使用my.app，那么容器可以为您的主要组件设置服务，否则就是在那里托管组件。

让我们再看看我们创建的应用程序。这里再一次是harnessApp.app定义资源：

<aura:application>
	  
    <c:helloWorld/>
	    
</aura:application>

harnessApp.app定义也很有趣，因为不是静态的HTML，而是我们的helloWorld组件。我们说harnessApp包含helloWorld组件。让我们深入一点，让helloWorld更复杂一点。

在开发者控制台中，创建一个名为helloHeading的新Lightning组件。对于它的标记，粘贴在下面的代码。

<aura:component>
    <h1>W E L C O M E</h1>
</aura:component>

<aura:component>
	  
    <c:helloHeading/>
	    
    <p>Hello Lightning!</p>
	    
</aura:component>

• harnessApp.app
  • helloWorld.cmp
    • helloHeading.cmp
    • (static HTML)

我们说helloHeading是helloWorld的子组件，或者helloHeading嵌套在helloWorld中，或者…。有许多不同的方式可以说helloWorld包含helloHeading。更重要的是，您可以将其他组件中的组件嵌套到几乎任何您关心的级别。在遇到Lightning组件的局限之前，开始很难保持头脑清醒。

这个将组件放在一起的过程是构建Lightning组件应用程序的基础。您可以从简单的“细粒度”组件开始，或者构建简单的“细粒度”组件，其中每个组件都提供了一组自定义的功能。然后，将这些组件组装成具有更高级功能的新组件。然后你使用这些组件，并再次“升级”。

让我们用软件环境以外的我们熟悉的隐喻来谈论这个问题。想象一下房子。更好的是，让我们给你看一个。

当你看这个房子，你看到了什么？如果你不再把它想象成一个“房子”，而是作为一个房子的组成部分，你也会开始看到它所构成的棋子和图案。

在最大的规模，这个房子是由三个相似的结构组成。这三个组件具有相似但不相同的设计。每一个都可以进一步分解成更小的组件，比如窗户，窗户可以分解成单独的窗格。这些较小部件的排列或组成定义了三个较大结构之间的差异。

三个结构通过两个较小的狭窄结构/部件连接在一起，这些结构/部件本身可以分解成更小的可重复使用的模式。这些连接部件将三个独立的结构组合成一个更大的整体：房子。

就像我们在架构方面所做的一样，所以我们可以使用一个网络应用。稍后在这个模块中，您将获取细粒度的输入组件，并使用它们创建一个表单组件。然后，您将获取该表单组件并将其放入另一个组件，以构建应用程序级别的功能。

看起来并不像房子那么漂亮，但是构图过程背后的原理非常相似。 在组件和组成方面进行思考是您在整个模块中开发的一项基本技能，每当您使用Lightning组件构建应用程序。

在这里你已经做了一点，但是在我们真的能够构建能够做某事的组件之前，我们需要了解属性，类型，值和表达式。 在此之前，虽然，你的第一个代码挑战！

是!你仍然和我们在一起！我们非常高兴地欢迎您来到Lightning Component派对，这是一个派对。当我们说Lightning组件是我们多年来建立的最令人兴奋和最强大的应用程序开发技术时，这是一个大胆的说法。我们知道这是事实，因为我们使用它构建了Salesforce应用程序和Lightning Experience。我们认为，一旦了解Lightning组件，您就会像使用它一样兴奋。

Lightning组件是为移动和桌面设备开发Web应用程序的UI框架。这是一个现代的框架，用于为Force.com应用程序构建具有动态响应用户界面的单页面应用程序。它在客户端使用JavaScript，在服务器端使用Apex。

这是很多流行语。让我们看看我们是否不能再次尝试，用正常的人使用的话。

“闪电组件是一个开发Web应用程序的框架。”这似乎是可以理解的。应用程序框架是代码和服务的集合，使您可以更轻松地创建自己的自定义应用程序，而无需亲自编写所有代码。有很多不同的Web应用程序框架，比如Ruby on Rails，Grails，AngularJS，Django，CakePHP等等。我们甚至有我们自己的，Visualforce，客户知道和爱。闪电组件是新的，我们认为它是非常特殊的。我们将讨论为什么它更特别，希望在本单元的最后，你会同意！

“移动和桌面设备的网络应用程序。”再次，这似乎很容易掌握。但是…你注意到那里的订单吗？ Lightning组件诞生于并用于构建移动应用程序的Salesforce平台。 Mobile已经成为Lightning组件的核心，它使开发移动和桌面设备的应用程序比许多其他框架更简单。

“这是一个用于构建单页应用程序的现代框架。”好的，现在我们有点嗡嗡了。 “现代”只是营销，对不对？什么是“单页面应用程序”？

我们不认为现代是“只是”营销。在“闪电体验开发”模块中，我们详细地讨论了Web应用程序如何从简单的，逐页面向的体验演变为具有与原生应用程序相同的行为和交互性的高响应性应用程序，在台式机上尤其是在移动设备上。为了实现这些交互式用户体验，现代Web应用程序被构建为从单个URL加载的紧密绑定的代码集合，然后在您使用它时连续运行。这些单页面应用程序的构建与本机应用程序非常相似，其中管道由一个框架处理。像Lightning组件这样的框架。

“Force.com应用程序的动态响应用户界面”只是将上述想法应用于您在Salesforce之上构建的应用程序。最后，“它在客户端使用JavaScript，在服务器端使用Apex”本身就是不言自明的，即使它遗漏了一些关于什么地方的具体细节。我们很快就会做到的

好吧，这是很多谈话谈话，而不是很多的代码。让我们来看看一个真正的Lightning组件，看看这些话题是什么。首先，这是屏幕上显示的组件的外观：

它看起来可能不多，但是还有一点点。这是它的代码;这是我们稍后将详细介绍的一个组件。

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <!-- 如果费用报销 - 将项目变为绿色 -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

• <lightning：card>围绕一组信息创建一个容器。
• <lightning：formattedDateTime>显示格式化的日期和时间。
• <lightning：relativeDateTime>显示当前时间和提供的时间之间的相对时间差。

({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

我们从客户那里得到的问题是：“我应该使用Lightning组件还是Visualforce？”简短的回答是：是的！

Visualforce和Lightning组件各有其优势。这些在Lightning Experience开发模块中进行了讨论，您可以在这里找到关于每个模块适当使用的长篇答案。在这里，让我们去中等。

首先知道这个：Visualforce不会消失。您的Visualforce代码将在很长一段时间内在Salesforce上运行。您无需转换现有的Visualforce应用程序，也无需停止使用Visualforce创建应用程序。

但是，至少在某些情况下，您可能会想要。例如，Visualforce是在手机上的移动应用成为事物之前创建的。虽然您可以使用Visualforce开发移动应用程序，但是没有任何内置组件是精通移动的。这意味着你写更多的代码。另一方面，Lightning组件专门针对移动设备进行了优化。

再次，我们在Lightning Experience模块的开发中介绍了很多具体内容。如果您仍然对Visualforce和Lightning组件有疑问，那么接下来就是一个好的选择。

另一个经常出现的问题是：“Lightning组件如何与MyFavoriteFramework进行比较？”这个最喜欢的框架是另一个现代的JavaScript Web应用框架，比如AngularJS，React或者Ember。

这些都是很好的框架！很多人都认识他们，有很多资源可以学习。您可能会惊讶地发现，我们认为这些框架是构建Force.com应用程序的好方法！

我们建议使用Visualforce，使用我们所谓的容器页面，并将您选择的框架和应用程序代码打包到静态资源中。通过使用空的容器页面，Visualforce可以自由使用，并让您使用所选框架的全部功能。

尽管可以在Lightning组件中使用第三方JavaScript框架，但这有点麻烦。 Lightning组件没有空白页面的概念，并且对于如何执行数据访问以及一些相当具体的安全需求有一些特定的意见。

坦率地说，Lightning组件和大多数现代框架的功能重叠了很多。尽管样式或细节可能不同，但所提供的功能在概念上相似，足以使您有效地运行重复代码。这既不有效也不容易。

另一件需要考虑的事情是：像AngularJS这样的通用框架被设计成与他们在特定数据服务上运行的平台无关。另一方面，Lightning Components设计用于本地连接Salesforce和Force.com平台提供的服务。你认为哪种方法可以帮助你更快地构建应用程序？

您可以使用Lightning组件以多种不同的方式自定义您的Salesforce组织。但是，这不是全部！您可以使用Lightning组件创建托管在Salesforce上的独立应用程序。您甚至可以创建托管在其他平台上的应用程序，包括将这些应用程序从这些平台嵌入到应用程序中。

将应用添加到Lightning Experience应用启动器

您的Lightning组件应用程序和自定义选项卡位于应用程序启动器中，您可以通过单击标题中的“应用程序启动器”图标进行操作。

点击一个自定义的应用程序（1）来激活它。导航栏中显示的应用程序中的项目，包括您添加到应用程序的任何Lightning组件选项卡。请注意，您需要将组件添加到选项卡，以便可以在应用启动器中访问它们。所有项目（2）中均可找到不在应用程序中的闪电组件选项卡。

将应用添加到Lightning Experience和Salesforce App Navigation

如上例所述，您可以将Lightning组件选项卡添加到应用程序，并在应用程序的导航栏中显示为项目。

为Lightning App Builder和社区生成器创建拖放组件

使用您自己的Lightning组件或从AppExchange安装的桌面和移动设备构建自定义用户界面。

添加闪电组件到闪电体验记录页面

正如标题所示，您可以通过添加Lightning组件来自定义Lightning Experience记录页面。

启动闪电组件作为 Quick Action

使用Lightning组件创建动作，然后将动作添加到对象的页面布局，使其可以从记录页面即时访问。

用闪电组件覆盖标准操作

用一个Lightning组件覆盖一个动作，这个动作与Visualforce页面重叠。

创建独立的应用程序

独立应用程序包含使用Salesforce数据的组件，可以独立于标准Salesforce环境使用。

使用闪电在其他平台上运行Lightning组件应用程序

闪电是一个延伸Lightning应用程序的功能。 它在任何远程Web容器中充当闪电组件的桥梁。 这意味着您可以在外部站点（例如Sharepoint或SAP）内使用Lightning组件，在使用Mobile SDK构建的混合应用程序中，甚至在Heroku平台上的其他位置使用Lightning组件。

我们知道。你真是开始了。远离我们的是挫伤任何人对Trailhead的热情！但是在你完成这个模块之前，我们有一些你应该做的事情。我们建议你在开始下一个单位之前先做。这些步骤可能需要一些时间，而更改会渗透到您的组织中，而这些步骤甚至可能会让您离开另一个方向。所以，在你承诺完整的模块之前，首先需要完成这个简单的单元。

我们要做的第一件事就是在Developer Edition中启用“我的域”，或者您正在使用您的挑战。我的域名需要使用Lightning组件进行开发，并且可能需要一点时间才能在30秒到30分钟的任意位置激活。我们不愿吃掉你的Trailhead Time，让你坐下来等着。我们还将在您的组织中创建必要的自定义对象，费用对象。

然后，当我们等待我的域名时，我们可以聊一下你是否想要打开这个模块。没有人喜欢被排除，但真的，这个模块并不适合每个人。所以我们想花一点时间，谈谈这个模块的用途以及你需要完成的技能。

我们知道这听起来像是我们在激动你。我们讨厌和你一样。但我们要尊重你的时间。如果这不是适合你的模块，那么让我们来指点一下Trailhead的另一部分，所以你和我们在一起的时间是有趣而富有挑战性的，而不是令人沮丧的。

要使用Lightning组件，您的组织需要使用“我的域”配置自定义域。

那么什么是自定义域名，为什么你需要有一个使用Lightning组件？首先，一个自定义域名是一种拥有自己的Salesforce服务器的方法。您可以通过自己的自定义URL（而不是通用的Salesforce实例URL）使用Salesforce。也就是说，一旦您拥有一个自定义域名，您将使用https://yourDomain.my.salesforce.com/上的Salesforce，该域名仅供贵组织使用。让其他人继续使用和分享https://na30.salesforce.com/。您的自定义域将您置于您自己的私人互联网岛上。

一个自定义的域也提高了你的组织的安全性，以太复杂的方式进入现在。在这里，我们来谈谈Lightning组件需要的原因。为了为应用程序提供世界级的安全性，我们要求Lightning组件的所有用户使用My Domain，就像我们为其他高级功能（如Salesforce Identity）所做的一样。如果您要使用Lightning组件，则必须在您的组织中启用“我的域”。

Salesforce的优点之一是您可以使用应用程序对其进行自定义。自定义对象和字段，公式，流程，报告，批准甚至用户界面本身 – 您可以在安装程序中完成所有这些工作，而无需编写一行代码，并让用户非常开心。

但Salesforce的某些功能需要代码，而Lightning组件就是其中之一。关于这一点，没有两种方法：要成功使用Lightning组件，您需要能够读取和写入代码。我们将在整个模块中查看大量代码，并且您必须自己写一些相应的代码才能通过这些挑战。

具体来说，我们认为：

• 你应该舒适地阅读和编写JavaScript。尽管Lightning组件也使用HTML风格的标记，但除了“hello world”以外的任何操作都需要JavaScript。
  有大量的资源，免费的，否则，学习JavaScript。我们建议您以正确的方式开始使用JavaScript。但是，如果你的朋友或同事有一个建议，或一本书，他们可以借给你，去为它！ 
• 如果你知道Apex，那将会很棒。从Salesforce读取和写入数据通常使用Apex，这就是我们在这个模块中学到的东西。你可以通过这个模块的挑战，而不是一个Apex的专家，但是当你去写真实的应用程序，你会写很多Apex。
  Apex基础和数据库模块是开始使用Apex的好方法，并且会为您提供该模块所需的一切。

如果这不能描述你，我们不想把你拒之门外。 没有先前的技能，完成这个模块并不是不可能的。 但我们确实认为这将是令人沮丧的。 虽然你可能获得徽章 – 这绝对是很酷！ – 你不会真的准备好使用Lightning组件来编写应用程序。

我们希望Trailhead变得有趣，我们希望它能够帮助人们更完整，更自信地使用Salesforce。 有经验的程序员会从这个模块中获得很多。 但是在没有必要的编程背景的情况下研究它可能不是您的Trailhead时间的最佳使用。

好。 就这样，让我们潜入并开始学习吧！