ionic2入门教程（三）高仿网易公开课（1）

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