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

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

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

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

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

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

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

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

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

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

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

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

Jonh.Felix
Stay hungry Stay foolish

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

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

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

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

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

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

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

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

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

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

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

頁(yè)面布局示意圖

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

首先打開OutLine，

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

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

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

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

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

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

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

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

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