ionic项目实战（二） ionic项目实战（二）

预言上篇有讲到ionic的安装及打包成apk的整个流程，今天这篇就偏向于项目了，简单的说下ionic开发需要经历的一些东西吧！
1、样式问题首先就是ionic封装了一套css(一般是main.css)，当用到ionic的一些样式时，譬如ion-item或tabs的一些样式。这些样式是没办法更改的，而且每次ionic serve的时候就会重载www/build的文件，所以没办法进行永久更改，这就需要在其内重写这些样式或者利用angular语法去定义。
2、路由注册 【ionic项目实战（二）】用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）效果图

文章图片
image.png 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	当页面将要销毁同时页面上元素移除时触发