预言
上篇有讲到ionic的安装及打包成apk的整个流程，今天这篇就偏向于项目了，简单的说下ionic开发需要经历的一些东西吧！
1、样式问题
首先就是ionic封装了一套css(一般是main.css)，当用到ionic的一些样式时，譬如ion-item或tabs的一些样式。这些样式是没办法更改的，而且每次ionic serve的时候就会重载www/build的文件，所以没办法进行永久更改，这就需要在其内重写这些样式或者利用angular语法去定义。
2、路由注册
用ionic g page login方法创建的文件需要在app.ts下注册才能生效，定义的service也一样。
3、baidu-map的引入
首先安装百度地图：
npm install angular2-baidu-map --save
然后需要申请秘钥在index.html下写入，
安装之后就可在相关ts文件下进行引用。
4、图表Echarts引入
这个问题其实挺坑的，有两个方法吧！
（1）命令行安装
npm install echarts --save//下载ECharts
npm install @types/echarts --save//在ts文件下定义
（2）文件引入
从http://echarts.baidu.com/下载需要的，然后放assets/js下，最后在ts文件下引入即可。
5、自定义的弹框
（1）在ts文件引入：
import { AlertController } from 'ionic-angular';
（2）使用（以登出为例）：
let prompt = this.alertCtrl.create({
title: '确认退出',
message: '',
buttons: [
{
text: '确认',
handler: data => {
}
},
{
text: '取消',
handler: data => {
}
}
]
});
prompt.present();
}
（3）效果图
6、设置登录页之后进行自定义路由操作
import { ViewChild} from '@angular/core';
@ViewChild('mainTabs') tabRef: TabsPage;
tab1Root = HomePage;
tab2Root = UnifyPage;
tab3Root = DiscPage;
tab4Root = ReportPage;
tab5Root = PersonPage;
在进入加载的时候进行定义
ionViewDidLoad() { this.tabRef.select(2); } //此处对应DiscPage
7、ionic页面生命周期
| Event | Desc |
|---|---|
| ionViewDidLoad | 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发 |
| ionViewWillEnter | 当将要进入页面时触发 |
| ionViewDidEnter | 当进入页面时触发 |
| ionViewWillLeave | 当将要从页面离开时触发 |
| ionViewDidLeave | 离开页面时触发 |
| ionViewWillUnload | 当页面将要销毁同时页面上元素移除时触发 |
后记
貌似还有很多很多，不过都是些小细节的把握，下篇可能会讲下ionic+cordova结合的一些应用。
