ionic2入門教程（三）高仿網易公開課（1）

Ionic2系列之高仿網易公開課(1)

0、登陸界面實現截圖和官方圖片對比

個人

官方

一、新建一個blank項目

打開cmd，輸入ionic start Ionic-NetEaseOpenCourse，選擇blank，建立一個空項目

ionic start Ionic-NetEaseOpenCourse

建立完成，轉入項目文件夾：cd .Ionic-NetEaseOpenCourse，運行程序：ionic serve

cd .\Ionic-NetEaseOpenCourse

ionic serve

初始頁面以下

二、在編輯器打開項目，我用的是VSCode

目錄結構以下

簡要解讀目錄結構看這裏（ ionic2入門教程（四）解讀目錄結構）

三、開始吧

0.瞭解IonicPage的使用方式

IonicPage的使用： https://segmentfault.com/a/11...

1.新建一個tabs

打開終端窗口（也可繼續使用cmd）

命令行新建tabs，ionic g type name（關於這個工具，官網介紹請看 這裏）

ionic g tabs tabs

建立的tabs頁面有4個tab，同時對應頁面也建立完成

2.新建一個登陸頁面

ionic g page login

3.修改項目啓動爲tabs界面

打開app.module.ts和app.component.ts，刪除修改標紅位置，由於IonicPage不須要在app.module.ts中導入page，只須要在自身的module.ts中導出了即可以經過字符串傳遞，詳細介紹看這裏（後面添加連接）。

修改後以下

rootPage:any = 'TabsPage';

注意TabsPage是字符串格式，那麼它是從哪裏來的呢，下面打開tabs.module.ts，添加exports:[TabsPage]

exports:[TabsPage]

到這裏就能夠運行成功了

四、完善個人界面

1.圖標修改（官方ICON查找去這裏）

2.圖標顏色修改

若是經過添加color=「secondary」，獲得的效果是這樣的

但這不是咱們要的效果，因此經過覆蓋默認樣式來進行改寫，到這樣已經可以接受了，可是圖標只有一種，沒有切換，這個後面再解決啦。

$tabs-md-tab-text-color: grey;  
$tabs-md-tab-text-color-active : #32db64;  
$tabs-md-tab-icon-color : grey;  
$tabs-md-tab-icon-color-active : #32db64;

3.個人界面

初步結構

最終效果圖

實現代碼去個人 github上看吧，後面會繼續把這個系列作完。

五、登陸界面

六、總結

其實總體上細節仍是沒有很把控的，而後圖標這些用的是ionic自身提供的，爲了方便嘛，還有色彩也是大體選了類似的，這點能夠用取色工具來彌補，圖標想豐富的話也能夠本身去找，替換掉就能夠了，關於邊距和字體大小這個細節，能夠將截圖放到相似ps的工具中去就能夠獲取到一個比較準確的值了。
ionic學習也剛起步，與各位共勉。

個人github點 這裏，歡迎issue，star，fork，持續更新~~