lightning的組件區分標准組件、自定義組件和AppExchange組件。標准組件由SF提供，自定義組件由developer自行開發，AppExchange組件由合作伙伴建立。下面我們寫一個簡單的列表demo來學習下自定義開發組件Component。
第一步：新建一個對象：電影，API:Movie__c,下表是其相關的字段
| 字段名 | 字段API | 字段類型 | 描述 |
| 電影名稱 | Name | 文本 | |
| 主演 | ToStar__c | 文本（255） | |
| 主題曲 | Theme__c | 文本（255） | |
| 導演 | Director__c | 文本（255） | |
| 上映時間 | ShowTime__c | 日期 |
第二步：創建一個Component，命名為MyTest_Movie
這時候想必已經有注意到在右側欄有一列屬性如下圖：
可以點擊這些選項卡看看里面都是什么內容
COMPONENT：
類似與H5頁面，將H5頁面進行框架式（aura）封裝，並能夠與Js Controller和Helper進行交互，通過Css進行渲染，也可以調用slds提供的標准樣式， 理解為view，叫做組件；
CONTROLLRT：
view層的控制層，能夠與view層進行數據交互，是對Js的封裝，進行異步頁面處理，能夠調用helper層的邏輯；
HELPER：
從開發規范來說，是邏輯層，將邏輯代碼封裝在此供Js Controller進行調用，可以寫一些公共方法，同時可以進行與后台apex類進行交互；
STYLE：
針對cmp組件進行渲染，實現頁面效果；
簡單說，每一個選項卡對應的都是Component的一個子文件，把這些合並在一起我們稱之為Bundle。Bundle翻譯過來是一批，捆之類的詞，也就是說，一個Bundle是包含了component，controller，Helper，Style等文件的一個集合。
下面我們完善MyTest_Movie.cmp
1 <aura:component controller="MyTestMovieController"> 2 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 3 4 <aura:attribute name="results" type="List" description="電影列表"/> 5 <aura:attribute name="count" type="Integer" default="0" description="電影記錄數"/> 6 <div> 7 8 <table id="mTable"> 9 <thead> 10 <tr> 11 <th><div>電影名</div></th> 12 <th><div>導演</div></th> 13 <th><div>主演</div></th> 14 <th><div>主題曲</div></th> 15 <th><div>上映時間</div></th> 16 </tr> 17 </thead> 18 <tbody> 19 <aura:iteration items="{!v.results}" var="item"> 20 <tr> 21 <td><div>{!item.Name}</div></td> 22 <td><div>{!item.Director__c}</div></td> 23 <td><div>{!item.To_Star__c}</div></td> 24 <td><div>{!item.Theme__c}</div></td> 25 <td> 26 <lightning:formattedDateTime value="{!item.Release_Time__c}" year="numeric" month="numeric" day="numeric" /> 27 </td> 28 </tr> 29 </aura:iteration> 30 </tbody> 31 </table> 32 <div> </div> 33 <span style="float:right;">共{!v.count}條記錄</span> 34 </div> 35 </aura:component>
其中的 “<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>”調用了MyTest_MovieController.js中的doInit方法，其中"c"代表的
JS文件中的Controller，其中MyTest_MovieController.js文件如下
1 ({ 2 doInit : function(component, event, helper) { 3 4 } 5 })
可以看到現在的doInit方法是空的，然后我們將MyTest_Movie添加到應用程序MyTest.app中進行查看，（Ctrl+Shift+A查看當前所有lightning組件）
<aura:application >
<c:MyTest_Movie />
</aura:application>
點擊預覽，界面如下
界面效果可以說是很簡陋了，然后呢，我們在MyTest_Movie.css中添加一點點樣式，設置全局默認字體大小與顏色，控制表格樣式，看看CSS是如何控制這個頁面顯示的
1 .THIS { 2 font-size: 12px; 3 color:red; 4 } 5 .THIS table th{ 6 border: 1px solid blue; 7 color:blue; 8 padding:15px; 9 border-width:1px 1px 1px 1px; 10 }
其中要注意的是，“.THIS”是lightning的component的選擇器，必須有，不寫則會提示錯誤
|
Failed to save MyTest_Movie.css: Issue(s) found by CSS Parser (0Ad7F000000rGrH): CSS selector must begin with '.cMyTest_Movie' or '.THIS' (line 5, col 1)
|
重新預覽頁面效果
第三步是創建一個Apex類，MyTestMovieController
1 /********* 2 * Author:ricardo 3 * Time:2018-03-21 4 * Function:MyTest_Movie 后台控制類 5 * Test: 6 */ 7 public class MyTestMovieController{ 8 //初始化 9 @AuraEnabled 10 public static List<Movie__c> GetAll(){ 11 List<Movie__c> movieList = new List<Movie__c>(); 12 movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50]; 13 return movieList; 14 } 15 }
接下來完善MyTest_MovieController.js
1 ({ 2 doInit : function(component, event, helper) { 3 helper.Init(component,event); 4 } 5 })
完善MyTest_MovieHelper.js
1 ({ 2 // 初始化加載 3 Init : function(component,event){ 4 // 調用后台類 5 var action = component.get("c.GetAll"); 6 // 設置回調函數 7 action.setCallback(this,function(response){ 8 // 返回狀態 9 var state = response.getState(); 10 if(state == 'SUCCESS'){ 11 var movieList = response.getReturnValue(); 12 if(movieList == 0){ 13 component.set("v.message",true); 14 }else{ 15 component.set("v.message",false); 16 } 17 //參數傳遞 18 component.set("v.results",movieList);20 component.set("v.count",movieList.length); 21 } 22 }); 23 // 隊列處理 24 $A.enqueueAction(action); 25 } 26 })
此時初始頁面就開發完成了，我們可以查看存儲在系統中的電影列表了
到這里為止，我們從系統中獲取數據，並顯示在頁面已經完成了（雖然頁面丑的令人難以直視QAQ）,那么接下來我們將回顧下這段代碼中的運行流程。
不同於傳統的MVC架構，Salesforce的lightning使用的架構是VCCM架構
數據從服務器的數據庫（M）到頁面（V）上被顯示出來還經過了后台控制器（APEX Controller）與前端控制器（JAVASCRIPT Controller）兩層控制。以上面的Movie為例
具體的運行過程如圖所示，需要注意一點的是，APEX類中的方法需要與lightning組件進行交互，則必須加注解： @AuraEnabled
最后，對於這個簡陋的頁面，我們來使用一次lightning自帶的樣式庫修飾一番
1 <aura:component controller="MyTestMovieController"> 2 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 3 4 <aura:attribute name="results" type="List" description="電影列表"/> 5 <aura:attribute name="count" type="Integer" default="0" description="電影記錄數"/> 6 <div> 7 8 <table class="slds-table slds-table--bordered slds-table--cell-buffer"> 9 <thead> 10 <tr class="slds-text-title--caps"> 11 <th scope="col"><div class="slds-truncate">電影名</div></th> 12 <th scope="col"><div class="slds-truncate">導演</div></th> 13 <th scope="col"><div class="slds-truncate">主演</div></th> 14 <th scope="col"><div class="slds-truncate">主題曲</div></th> 15 <th scope="col"><div class="slds-truncate">上映時間</div></th> 16 </tr> 17 </thead> 18 <tbody> 19 <aura:iteration items="{!v.results}" var="item"> 20 <tr> 21 <td><div class="slds-truncate">{!item.Name}</div></td> 22 <td><div class="slds-truncate">{!item.Director__c}</div></td> 23 <td><div class="slds-truncate">{!item.ToStar__c}</div></td> 24 <td><div class="slds-truncate">{!item.Theme__c}</div></td> 25 <td> 26 <lightning:formattedDateTime value="{!item.ShowTime__c}" year="numeric" month="numeric" day="numeric" /> 27 </td> 28 </tr> 29 </aura:iteration> 30 </tbody> 31 </table> 32 <div> </div> 33 <span class="slds-size_small" style="float:right;">共{!v.count}條記錄</span> 34 </div> 35 </aura:component>
最后要注意的一點是，給組件加上相關的樣式后，在預覽之前，要給MyTest.app繼承lightning的樣式庫文件：extends="force:slds"
<aura:application extends="force:slds"> <c:MyTest_Movie /> </aura:application>
預覽相關頁面如下
總結：本篇主要介紹了component組件的基本開發，以及組件與后台之間的數據交互問題，有錯誤的地方歡迎指出，有疑問的歡迎在評論區留言