ionic项目实战（二）

预言

上篇有讲到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）效果图

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	当页面将要销毁同时页面上元素移除时触发

后记

貌似还有很多很多，不过都是些小细节的把握，下篇可能会讲下ionic+cordova结合的一些应用。