Lightning-组件（3）创建组件

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

编写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组件构建应用程序。

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