時(shí)間：2017-02-25 00:45:53
作者：zhongxia
好吧，剩下的筆者先占坑位，后面寫。 先好好學(xué)習(xí)下如何使用，有一定的掌握程度在來學(xué)筆記，才有自己的感悟在里面,不然就是為了寫筆記而寫筆記了。
更新時(shí)間：2017-03-07 17:59:25
閑下來了，然后繼續(xù)學(xué)習(xí)，寫筆記吧。
一、項(xiàng)目結(jié)構(gòu)分析
繼續(xù)上一節(jié)，根據(jù)Ionic2提供的腳手架創(chuàng)建一個(gè)項(xiàng)目。
只需要關(guān)注 src 目錄即可，其他目錄不需要我們?nèi)バ薷摹?/p>
1.1 src一級目錄
src
app #入口文件，布局框架
assets #資源目錄
pages #模塊頁面
theme #主題樣式
index.html
1.2 src/app 目錄
Ionic2開發(fā)的HybridApp，其他就是一個(gè)SPA頁面，因此需要有一個(gè)入口文件。 一個(gè)布局頁面，比如（底部選項(xiàng)卡的布局，右滑出現(xiàn)導(dǎo)航菜單）等布局
app
app.component.ts # 布局頁面的控制器
app.html # 布局頁面的頁面
app.scss # 布局頁面的樣式
app.module.ts # 所有模塊（頁面，組件，服務(wù)，等）都需要在這里配置
main.ts # 入口文件
注意：所有使用到的頁面，組件，服務(wù)都需要配置到（app.module.ts）過來哈,否則用不了。就類似要使用某個(gè)組件，我們需要先配置
1.3 pages目錄
這里面每一個(gè)文件夾 就是一個(gè)頁面。（也就是APP里面的一屏）
創(chuàng)建一個(gè)頁面，使用命令創(chuàng)建，會(huì)自動(dòng)創(chuàng)建好html，css，js文件
# 生成一個(gè)頁面
ionic g page hello-ionic
創(chuàng)建好文件，還要集成到項(xiàng)目中
- 在 app.modules.ts 里面配置
- 在 app.component.ts 創(chuàng)建一個(gè)新的導(dǎo)航，然后跳轉(zhuǎn)到該頁面
具體的代碼，可以參考Ionic2生成的項(xiàng)目腳手架代碼
二、Ionic2組件的嘗試
這里可以去 Ionic2 官網(wǎng)看例子，然后復(fù)制代碼，到項(xiàng)目中，具體使用下，看效果如何。
這里就不一一列舉怎么使用了，大概說下步驟。
//1. 引入組件
import { Platform, ActionSheetController, AlertController, LoadingController } from 'ionic-angular';
...
// 2. 在構(gòu)建函數(shù)傳入?yún)?shù)
constructor(
public platform: Platform,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController,
public actionsheetCtrl: ActionSheetController
) { }
...
// 3. 編寫對應(yīng)的方法【如果不是交互組件，則不需要編寫操作邏輯，寫數(shù)據(jù)賦值即可】
showAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['OK']
});
alert.present();
}
2.1 Angular2 的常用知識點(diǎn)
1. 綁定事件
(事件名稱)="函數(shù)名"
<!--常規(guī)方式的事件綁定-->
<button ion-button block (click)="openMenu()">
Show Action Sheet
</button>
<!--事件觸發(fā)的時(shí)候，傳遞參數(shù)-->
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
2. 屬性賦值
//在頁面對應(yīng)的js文件里面的構(gòu)造函數(shù)賦值對象
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.list = [];
for (var i = 0; i < 100; i++) {
this.list.push({
img: 'http://ionicframework.com/dist/preview-app/www/assets/img/card-saopaolo.png',
title: '中國' + i,
subtitle: '北京' + i * 2
})
}
<div class="card-title">{{list[0].title}}</div>
3. 判斷
<div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b>
</div>
4. 循環(huán)
*ngFor="let item for list"
<ion-content padding class="card-background-page">
<ion-card *ngFor="let item of list">
<div class="card-title">{{item.title}}</div>
<div class="card-subtitle">{{item.subtitle}}</div>
</ion-card>
</ion-content>
5. 雙向數(shù)據(jù)綁定[針對表單等組件，有輸入的組件]
[(ngModel)]="info.name"
把表單輸入的值，綁定到控制器的info對象里面的name字段里面. 記得在控制器的構(gòu)造函數(shù)里面，創(chuàng)建info對象。
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController
) {
this.info = {}
}
<ion-item>
<ion-label>UserName</ion-label>
<ion-input type="text" placeholder="please input username..." [(ngModel)]="info.name" name="name"></ion-input>
</ion-item>
三、路由跳轉(zhuǎn)
// 1. 引入路由控制組件
import { NavController, NavParams } from 'ionic-angular';
// 2. 傳遞到構(gòu)造函數(shù)
constructor(public navCtrl: NavController, public navParams: NavParams) {
// 3. 使用跳轉(zhuǎn)，參數(shù)1，組件 ，參數(shù)2：跳轉(zhuǎn)傳遞的參數(shù)
this.navCtrl.push(ItemDetailsPage, {
item: item
});
// 4. 獲取傳遞的參數(shù)
this.selectedItem = navParams.get('item');
3.1 打開APP的廣告或者宣傳圖片如何跳轉(zhuǎn)
如果用上面的 this.navCtrl.push 來跳轉(zhuǎn)的話，左上角會(huì)又一個(gè) back，返回的按鈕。 但是我們從App打開的動(dòng)畫跳轉(zhuǎn)到主頁面的時(shí)候，當(dāng)然不希望有back這個(gè)按鈕了。畢竟是主頁面。
因此找了下Ionic路由的方法，又一個(gè)
this.navCtrl.setRoot(HelloIonicPage);
四、Ionic頁面的生命周期
// 頁面被加載完成后調(diào)用的函數(shù)，切換頁面時(shí)并不會(huì)進(jìn)行重新加載，因?yàn)橛衏ache的存在
onPageLoaded() {
console.log('page 1: page loaded.');
}
// 頁面即將進(jìn)入的時(shí)候
onPageWillEnter() {
// 在這里可以做頁面初始化的一些事情
console.log('page 1: page will enter.');
}
// 頁面已經(jīng)進(jìn)入的時(shí)候
onPageDidEnter() {
console.log('page 1: page did enter.');
}
// 頁面即將離開的時(shí)候
onPageWillLeave() {
console.log('page 1: page will leave.');
}
// 頁面已經(jīng)離開的時(shí)候
onPageDidLeave() {
console.log('page 1: page did leave.');
}
// 從 DOM 中移除的時(shí)候執(zhí)行的生命周期
onPageWillUnload() {
}
// 從 DOM 中移除執(zhí)行完成的時(shí)候
onPageDidUnload() {
}
