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，持续更新~~