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

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

我的

官方

1、新建一個blank項目

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

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

初始頁面如下

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

目錄結構如下

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

3、開始吧

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]

到這里就可以運行成功了

4、完善我的界面

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上看吧，后面會繼續把這個系列做完。

5、登錄界面

6、總結

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

我的github點 這里，歡迎issue，star，fork，持續更新~~

總結

以上是生活随笔為你收集整理的ionic2入门教程（三）高仿网易公开课（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。