摘要：一個完成入門篇二搭建主框架通過第一課的學(xué)習(xí)，你已經(jīng)掌握了如何通過調(diào)試器來跟上的設(shè)計器聯(lián)調(diào)來實時查看設(shè)計效果調(diào)試代碼了，接下來通過一系列的開發(fā)教學(xué)你將很快上手學(xué)習(xí)到如何開發(fā)一個真正的。

一個App完成入門篇（二）-搭建主框架

通過第一課的學(xué)習(xí)，你已經(jīng)掌握了如何通過debug調(diào)試器來跟PC上的設(shè)計器聯(lián)調(diào)來實時查看UI設(shè)計效果、調(diào)試代碼了，接下來通過一系列的demo開發(fā)教學(xué)你將很快上手學(xué)習(xí)到如何開發(fā)一個真正的App。

要開發(fā)App，最重要的就是確定主框架，好的主框架能起到減少工作量、簡化代碼的作用，而頁面通常需要產(chǎn)品人員的UE設(shè)計和美工人員的UI設(shè)計，如下圖所示，這兩個步驟完成后才開始實現(xiàn)功能，由于篇幅限制，本教程不再贅述如何設(shè)計UI和UE，直接通過開發(fā)一個仿微信主頁面的頁面來做示范。

完整的demo請參考下載地址，可以導(dǎo)入到設(shè)計器中學(xué)習(xí)，導(dǎo)入教程：
下載到本地后，解壓到某個目錄中

在設(shè)計器中選擇File-Import-DeviceOne-Existing projects into Workspace點擊Next選擇剛剛解壓后的目錄，再次點擊Next即可將完整的demo導(dǎo)入設(shè)計器中。

在上一節(jié)教程從Hello world開始中大家已經(jīng)學(xué)會了如何創(chuàng)建項目，這里直接使用該項目。

首先在IDE中展開項目層級結(jié)構(gòu)

app.js是整個項目的入口腳本環(huán)境，雙擊該文件在右側(cè)進(jìn)入編輯。需要注意的是app.js較為特殊，如果要在該文件內(nèi)使用DeviceOne的組件，需要先require(“DeviceOne”)，如第一句代碼所示，而其他.js腳本環(huán)境是不需要引用可以直接使用的。在這個腳本環(huán)境中我們要做的操作是打開一個新頁面，需要調(diào)用的是App組件的openPage方法，openPage總共有八個參數(shù)，這里先簡單介紹用到的其中三個，其他參數(shù)的用法詳見App的openPage。這里整段代碼含義就是先定義一個sm類組件分類介紹的App，在App的loaded事件中打開一個新頁。loaded事件會App啟動完成時觸發(fā)，所以我們把打開新頁的打開寫在這里面。其中openPage方法的source參數(shù)表示的是需要打開的頁面的地址（絕對路徑）；statusBarState參數(shù)表示的是頂部狀態(tài)欄顯示狀態(tài)，這里選擇的是transparent，這樣設(shè)置能讓打開的index.ui頁在手機上顯示的為全屏效果，即隱藏手機的頂部狀態(tài)欄；animationType參數(shù)表示的是打開頁面時的過渡動畫類型，這里選擇fade淡入淡出的方式，這樣就能以淡入淡出的過渡動畫全屏打開到index.ui頁面了。

接著我們雙擊打開index.ui，進(jìn)入ui視圖的編輯。

所有的頁面展示都是通過在.ui文件中羅列組件來實現(xiàn)，如上圖綠框所示；若需要添加ui組件，只需在組件列表Components（紅框所示）中拖拽組件到ui畫布上，黃框OutLine中展示的是當(dāng)前頁面的層級關(guān)系，在OutLine中越靠下面的組件會展示在頁面越上層。

再簡單分析一下主界面，整個項目的尺寸是iphone6的尺寸750x1334，分上下兩個部分，底部是一個Bottom Bar導(dǎo)航欄，上面是隨著底部導(dǎo)航切換的界面

Jonh.Felix
Stay hungry Stay foolish

一個App完成入門篇（二）-搭建主框架

通過第一課的學(xué)習(xí)，你已經(jīng)掌握了如何通過debug調(diào)試器來跟PC上的設(shè)計器聯(lián)調(diào)來實時查看UI設(shè)計效果、調(diào)試代碼了，接下來通過一系列的demo開發(fā)教學(xué)你將很快上手學(xué)習(xí)到如何開發(fā)一個真正的App。

要開發(fā)App，最重要的就是確定主框架，好的主框架能起到減少工作量、簡化代碼的作用，而頁面通常需要產(chǎn)品人員的UE設(shè)計和美工人員的UI設(shè)計，如下圖所示，這兩個步驟完成后才開始實現(xiàn)功能，由于篇幅限制，本教程不再贅述如何設(shè)計UI和UE，直接通過開發(fā)一個仿微信主頁面的頁面來做示范。

完整的demo請參考下載地址，可以導(dǎo)入到設(shè)計器中學(xué)習(xí)，導(dǎo)入教程：
下載到本地后，解壓到某個目錄中

在設(shè)計器中選擇File-Import-DeviceOne-Existing projects into Workspace點擊Next選擇剛剛解壓后的目錄，再次點擊Next即可將完整的demo導(dǎo)入設(shè)計器中。

在上一節(jié)教程從Hello world開始中大家已經(jīng)學(xué)會了如何創(chuàng)建項目，這里直接使用該項目。

首先在IDE中展開項目層級結(jié)構(gòu)

app.js是整個項目的入口腳本環(huán)境，雙擊該文件在右側(cè)進(jìn)入編輯。需要注意的是app.js較為特殊，如果要在該文件內(nèi)使用DeviceOne的組件，需要先require(“DeviceOne”)，如第一句代碼所示，而其他.js腳本環(huán)境是不需要引用可以直接使用的。在這個腳本環(huán)境中我們要做的操作是打開一個新頁面，需要調(diào)用的是App組件的openPage方法，openPage總共有八個參數(shù)，這里先簡單介紹用到的其中三個，其他參數(shù)的用法詳見App的openPage。這里整段代碼含義就是先定義一個sm類組件分類介紹的App，在App的loaded事件中打開一個新頁。loaded事件會App啟動完成時觸發(fā)，所以我們把打開新頁的打開寫在這里面。其中openPage方法的source參數(shù)表示的是需要打開的頁面的地址（絕對路徑）；statusBarState參數(shù)表示的是頂部狀態(tài)欄顯示狀態(tài)，這里選擇的是transparent，這樣設(shè)置能讓打開的index.ui頁在手機上顯示的為全屏效果，即隱藏手機的頂部狀態(tài)欄；animationType參數(shù)表示的是打開頁面時的過渡動畫類型，這里選擇fade淡入淡出的方式，這樣就能以淡入淡出的過渡動畫全屏打開到index.ui頁面了。

接著我們雙擊打開index.ui，進(jìn)入ui視圖的編輯。

所有的頁面展示都是通過在.ui文件中羅列組件來實現(xiàn)，如上圖綠框所示；若需要添加ui組件，只需在組件列表Components（紅框所示）中拖拽組件到ui畫布上，黃框OutLine中展示的是當(dāng)前頁面的層級關(guān)系，在OutLine中越靠下面的組件會展示在頁面越上層。

再簡單分析一下主界面，整個項目的尺寸是iphone6的尺寸750x1334，分上下兩個部分，底部是一個Bottom Bar導(dǎo)航欄，上面是隨著底部導(dǎo)航切換的界面

頁面布局示意圖

這節(jié)主要介紹如何實現(xiàn)Botton Bar。

首先打開OutLine，

在RootView中只允許有一個容器類組件，其他組件都是放在這個容器類組件中的，通常我們選擇ALayout絕對布局組件來當(dāng)這個容器組件。我們點擊選中該組件（如上圖紅框所示），通過屬性列表修改該組件的id為do_ALayout_root，默認(rèn)大小是跟整個項目的大小相同的750x1334，再繼續(xù)像該容器內(nèi)添加四個ALayout，id分別修改成do_ALayout_top、do_ALayout_body、do_ALayout_line和do_ALayout_bottom，它們的id對應(yīng)了它們的功能分別如頁面布局示意圖中所示的top、body、line和bottom。分別調(diào)整著四個ALayout的x、y、width、height屬性，以調(diào)整它們在頁面中的位置。再繼續(xù)向do_ALayout_bottom容器中添加四個ALayout，id分別改為do_ALayout_b0/b1/b2/b3，

再分別向這四個ALayout中添加一個Label和ImageView組件，并調(diào)整它們的x、y、width、height以達(dá)到下圖所示效果

此時你的項目中ImageView沒有顯示出圖片，需要在source://image或者創(chuàng)建其他想要存放圖片的目錄將想要展示的圖片放進(jìn)去

再分別選中四個ImageView組件，修改它們的source屬性指向存放圖片的絕對路徑，就能顯示圖片了。
這里需要注意的是，DeviceOne有強大的屏幕適配技術(shù)，但可能會在某些局部對圖片顯示形狀要求嚴(yán)格的地方會稍微有些變形，為了保證點ALayout有一個特殊屬性isStretch，這里將該屬性設(shè)置成false來保證ImageView不變形。

有了頁面效果，接下來就需要使頁面動起來。雙擊index.ui.js進(jìn)入代碼編輯頁，

先通過組件類型定義三個sm組件Notification、Global和Page，在需要的地方可以通過自定義對象名+.的方式來使用該組件的屬性、方法和事件。再將所需要用到的ALayout、ImageView、Label定義一下，ui組件的定義方式跟sm組件類似，不同的是ui(“”)括號里填的是剛剛在.ui頁面修改的對應(yīng)組件的id名。

ImageView和ALayout都有點擊事件（touch），為了讓用戶有更好的體驗，我們加大點擊響應(yīng)范圍，將touch事件訂閱在Bottom的四個ALayout中，并在該事件中通過改變其他ALayout里L(fēng)abel的文字顏色和ImageView圖片source來達(dá)到點擊選中的效果。

另外我們想讓這個demo在android設(shè)備上能通過點擊手機上的“返回”虛擬按鍵來返回到debug首頁，需要用到剛剛我們定義過的Notification、Global和Page組件，還有一個mm組件Timer定時器，mm組件的定義方式跟sm組件相同，只需要組件類型即可定義。
點擊android手機上的“返回”虛擬按鍵會觸發(fā)Page組件的back事件，所以我們訂閱back事件并在back事件里處理返回還是退出。

到這里，一個能響應(yīng)點擊事件并切換圖片的demo就完成了，是不是很簡單易學(xué)呢？！我們可以從上一節(jié)教程中所學(xué)的手機和電腦聯(lián)調(diào)代碼的方法來趕快驗證一下所學(xué)內(nèi)容啦。