Lightning-组件（3）创建组件

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

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

闪电体验	Salesforce 经典

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

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

<p>Hello Lightning!</p>

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

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

<c:helloWorld/>

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

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

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

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

<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应用程序。有点奇怪，但它是。

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

<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)