摘要：全新SNS項目啟動罐脊，現(xiàn)ionic更新到了3.0版本定嗓，angular更新到了4.0版本，博主隨著這項目萍桌，帶著大家領(lǐng)略一番ionic的相關(guān)技術(shù)細(xì)節(jié)上的問題
1宵溅、全新項目下載操作：
在新版本下，ionic得到的健碩性的更新上炎，angular卻減少了自己的體積恃逻，正所謂：“ionic吃好了，angular減肥了”于是我們也可以拋棄以前的一些坑藕施，直接進(jìn)入流暢性的操作了寇损。
1.1、重新構(gòu)建項目：
在https://nodejs.org/en/ 【官方網(wǎng)址】下載最新版本的nodeJS裳食，保證使用的sass為4.5以上矛市，這樣在win7,8,10的環(huán)境下可以滿足編譯環(huán)境，無需再做任何關(guān)于環(huán)境配置的操作诲祸，即使在mac上也是如此浊吏。統(tǒng)一化環(huán)境后即可開始我們的項目構(gòu)建憨愉。
1.1.1、創(chuàng)建項目
npm install -g ionic cordova 下載必要的ionic 組件與cordova打包依賴
ionic start demo --v3 創(chuàng)建3版本的ionic項目
這里ionic 很人性化的給了幾個選項進(jìn)行篩選其各類項目分別是：1卿捎、tabs-->帶底部導(dǎo)航欄項目配紫；2、blank-->空項目午阵；3躺孝、sidemenu-->默認(rèn)主頁面有側(cè)滑欄的項目；4底桂、super-->從預(yù)建頁面到打包完成最適合練習(xí)上手的項目植袍；5、conference-->圖像展示的項目籽懦；6于个、tutorial-->包含有教程的項目，其中項目里還含有ionic文檔暮顺；7厅篓、aws-->集成了亞馬遜SDK的項目。這些項目的歸納很好的讓我們開發(fā)人員深入研究與學(xué)習(xí)進(jìn)去捶码。作為實際交付項目的需要羽氮，以及對需求的適合度，我選擇了tabs項目惫恼。點擊回車档押，進(jìn)行項目下載并下載依賴，這得等一段時間來完成祈纯。
1.1.2令宿、演示項目
ionic serve 老配方，熟悉的味道腕窥，這里不需要過多解釋粒没，直接等待幾許過后便在瀏覽器中打開項目演示，這里要注意的是油昂，一定要選擇帶有chrome內(nèi)核的瀏覽器革娄，這樣可以方便自己按F12進(jìn)行真機模擬查看，并且默認(rèn)為極速模式【特別注意冕碟，千萬不要將自己的瀏覽器設(shè)置為IE兼容，不然看不出效果】
1.1.3匆浙、build與打包
ionic cordova platform add android / ios 這里老玩家得注意了安寺，與原命令相比較ionic platform add android / ios新添加了帶有cordova命令，這加完依賴后如果是Android可以直接進(jìn)行build ionic cordova build android了首尼。而IOS還有新的坑挑庶，即在這里會報錯需要用到root 權(quán)限：sudo ionic platform build ios言秸，這里處理IOS權(quán)限問題，可以看看 “軍神” 的文章：http://www.reibang.com/p/f60d28adb468 我就不必贅述了迎捺。IOS打包其實在build后就可以用xcode打開文件目錄：demo/platforms/ios/這樣便可以直接使用Xcode進(jìn)行熟練的打包操作了举畸。
2、新增一個導(dǎo)航界面
在項目進(jìn)行中要進(jìn)行對底部導(dǎo)航欄目的修改凳枝，在項目中默認(rèn)為三個導(dǎo)航抄沮，可是項目需求需要四個，我們需要ionic g page newPage//這里的newPage為我們開發(fā)人員自定義的名稱自動生成頁面岖瑰。在這里我生成的名稱是"my"：
這里我們還需要對此頁面進(jìn)行注冊：
我們再將此頁面添加到tab上去：
于是有了以下頁面：
3叛买、更改底部導(dǎo)航的顏色
由于項目使用橙色為主題色，最開始我不知道在哪里修改底部導(dǎo)航欄的顏色蹋订，于是去官網(wǎng)上尋找答案：http://ionicframework.com/docs/api/components/tabs/Tabs/ 這里它明確指出sass variables里面有八大屬性：
//ios variables
$tabs-ios-tab-icon-color: #000000;// 圖標(biāo)未按下顯示的顏色
$tabs-ios-tab-icon-color-active: #FFFFFF; // 圖標(biāo)按下顯示的顏色
$tabs-ios-tab-text-color:#000000; // 文字未按下顯示的顏色
$tabs-ios-tab-text-color-active: #FFFFFF;// 文字按下顯示的顏色
//android variables
$tabs-md-tab-icon-color: #000000;// 圖標(biāo)未按下顯示的顏色
$tabs-md-tab-icon-color-active: #FFFFFF; // 圖標(biāo)按下顯示的顏色
$tabs-md-tab-text-color:#000000; // 文字未按下顯示的顏色
$tabs-md-tab-text-color-active: #FFFFFF;// 文字按下顯示的顏色
于是我在這里尋找答案的突破率挣。這些屬性出現(xiàn)肯定是在scss里面進(jìn)行設(shè)置的，很多情況下會誤認(rèn)為在：項目名/src/app/app.scss 里面露戒，其實不然椒功，經(jīng)過一番的苦苦尋找最終在： 項目名/theme/variables.scss 里尋找了答案：
最終項目顯示的效果:
4傻铣、結(jié)尾的話
作為公司項目此項目不應(yīng)開源枷遂，但是我會在項目進(jìn)行中將比比較精華的部分分享給大家，希望同路人喜歡上這樣的UI框架姑躲，也希望ionic 在今后能改變我們大部分的工作方式撩鹿！
