預言
上篇有講到ionic的安裝及打包成apk的整個流程，今天這篇就偏向于項目了，簡單的說下ionic開發(fā)需要經(jīng)歷的一些東西吧殉摔！
1州胳、樣式問題
首先就是ionic封裝了一套css(一般是main.css)，當用到ionic的一些樣式時逸月，譬如ion-item或tabs的一些樣式栓撞。這些樣式是沒辦法更改的，而且每次ionic serve的時候就會重載www/build的文件碗硬，所以沒辦法進行永久更改瓤湘，這就需要在其內(nèi)重寫這些樣式或者利用angular語法去定義。
2肛响、路由注冊
用ionic g page login方法創(chuàng)建的文件需要在app.ts下注冊才能生效，定義的service也一樣惜索。
3特笋、baidu-map的引入
首先安裝百度地圖：
npm install angular2-baidu-map --save
然后需要申請秘鑰在index.html下寫入，
安裝之后就可在相關(guān)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、設(shè)置登錄頁之后進行自定義路由操作
import { ViewChild} from '@angular/core';
@ViewChild('mainTabs') tabRef: TabsPage;
tab1Root = HomePage;
tab2Root = UnifyPage;
tab3Root = DiscPage;
tab4Root = ReportPage;
tab5Root = PersonPage;
在進入加載的時候進行定義
ionViewDidLoad() { this.tabRef.select(2); } //此處對應(yīng)DiscPage
7窒朋、ionic頁面生命周期
| Event | Desc |
|---|---|
| ionViewDidLoad | 當頁面加載的時候觸發(fā)搀罢，僅在頁面創(chuàng)建的時候觸發(fā)一次，如果被緩存了侥猩，那么下次再打開這個頁面則不會觸發(fā) |
| ionViewWillEnter | 當將要進入頁面時觸發(fā) |
| ionViewDidEnter | 當進入頁面時觸發(fā) |
| ionViewWillLeave | 當將要從頁面離開時觸發(fā) |
| ionViewDidLeave | 離開頁面時觸發(fā) |
| ionViewWillUnload | 當頁面將要銷毀同時頁面上元素移除時觸發(fā) |
后記
貌似還有很多很多榔至，不過都是些小細節(jié)的把握，下篇可能會講下ionic+cordova結(jié)合的一些應(yīng)用欺劳。
