摘要：全新SNS項(xiàng)目啟動，現(xiàn)ionic更新到了3.0版本，angular更新到了4.0版本，博主隨著這項(xiàng)目，帶著大家領(lǐng)略一番ionic的相關(guān)技術(shù)細(xì)節(jié)上的問題

1、全新項(xiàng)目下載操作：

在新版本下，ionic得到的健碩性的更新，angular卻減少了自己的體積，正所謂：“ionic吃好了，angular減肥了”于是我們也可以拋棄以前的一些坑，直接進(jìn)入流暢性的操作了。

1.1、重新構(gòu)建項(xiàng)目：

在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)境后即可開始我們的項(xiàng)目構(gòu)建。

1.1.1、創(chuàng)建項(xiàng)目

npm install -g ionic cordova 下載必要的ionic 組件與cordova打包依賴
ionic start demo --v3 創(chuàng)建3版本的ionic項(xiàng)目

效果圖.png

這里ionic 很人性化的給了幾個選項(xiàng)進(jìn)行篩選其各類項(xiàng)目分別是：1、tabs-->帶底部導(dǎo)航欄項(xiàng)目；2、blank-->空項(xiàng)目；3、sidemenu-->默認(rèn)主頁面有側(cè)滑欄的項(xiàng)目；4、super-->從預(yù)建頁面到打包完成最適合練習(xí)上手的項(xiàng)目；5、conference-->圖像展示的項(xiàng)目；6、tutorial-->包含有教程的項(xiàng)目，其中項(xiàng)目里還含有ionic文檔；7、aws-->集成了亞馬遜SDK的項(xiàng)目。這些項(xiàng)目的歸納很好的讓我們開發(fā)人員深入研究與學(xué)習(xí)進(jìn)去。作為實(shí)際交付項(xiàng)目的需要，以及對需求的適合度，我選擇了tabs項(xiàng)目。點(diǎn)擊回車，進(jìn)行項(xiàng)目下載并下載依賴，這得等一段時間來完成。

1.1.2、演示項(xiàng)目

ionic serve 老配方，熟悉的味道，這里不需要過多解釋，直接等待幾許過后便在瀏覽器中打開項(xiàng)目演示，這里要注意的是，一定要選擇帶有chrome內(nèi)核的瀏覽器，這樣可以方便自己按F12進(jìn)行真機(jī)模擬查看，并且默認(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.itdecent.cn/p/f60d28adb468 我就不必贅述了。IOS打包其實(shí)在build后就可以用xcode打開文件目錄：demo/platforms/ios/這樣便可以直接使用Xcode進(jìn)行熟練的打包操作了。

2、新增一個導(dǎo)航界面

在項(xiàng)目進(jìn)行中要進(jìn)行對底部導(dǎo)航欄目的修改，在項(xiàng)目中默認(rèn)為三個導(dǎo)航，可是項(xiàng)目需求需要四個，我們需要ionic g page newPage//這里的newPage為我們開發(fā)人員自定義的名稱自動生成頁面。在這里我生成的名稱是"my"：

生成項(xiàng)目目錄的變化

這里我們還需要對此頁面進(jìn)行注冊：

注冊我的頁面.png

我們再將此頁面添加到tab上去：

添加my頁面步驟1

添加my頁面步驟2.png

于是有了以下頁面：

修改后結(jié)果.png

3、更改底部導(dǎo)航的顏色

由于項(xiàng)目使用橙色為主題色，最開始我不知道在哪里修改底部導(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)為在：項(xiàng)目名/src/app/app.scss 里面，其實(shí)不然，經(jīng)過一番的苦苦尋找最終在： 項(xiàng)目名/theme/variables.scss 里尋找了答案：

修改variables.png

最終項(xiàng)目顯示的效果:

改變點(diǎn)擊色.png

4、結(jié)尾的話

作為公司項(xiàng)目此項(xiàng)目不應(yīng)開源，但是我會在項(xiàng)目進(jìn)行中將比比較精華的部分分享給大家，希望同路人喜歡上這樣的UI框架，也希望ionic 在今后能改變我們大部分的工作方式！