Ionic3開發(fā)系列教程
Ionic3開發(fā)教程 - 環(huán)境準(zhǔn)備（1）
Ionic3開發(fā)教程 - 開發(fā)（2）
Ionic3開發(fā)教程 - 發(fā)布Android版本（3）
Ionic3開發(fā)教程 - 發(fā)布IOS版本（4）
Ionic3開發(fā)教程 - 更新（5）

本文中介紹的Ionic3.20.0是基于Angular5.2.11的一套App混合開發(fā)框架聪轿；這里主要介紹Ionic3框架開發(fā)基本概念榴都，深入開發(fā)請移步：ionic官網(wǎng)

整體使用下來和Angular有以下不同：
1.路由配置方式不同
2.頁面加載生命周期鉤子不同
3.頁面模塊化

項(xiàng)目目錄結(jié)構(gòu)一覽：

image.png

當(dāng)打開App時(shí)，文件加載順序是：
1蓖宦、index.html
2皱坛、app/main.js
3握巢、app/app.module.ts
4唐含、app/app.component.ts
5、app/app.component.ts中rootPage配置的首頁面

常用cli命令：

• 新建項(xiàng)目：Ionic start App tabs
• 運(yùn)行項(xiàng)目：ionic serve
• 打包：ionic cordova build android/ios
• 查看環(huán)境：ionic info
• 新建頁面：ionic generate page Login
• 新建組件：ionic generate component dropdownlist
  查看更多：Ionic CLI Documentation

頁面制作

一秕硝、創(chuàng)建頁面
執(zhí)行命令Ionic g page login，生成4個(gè)文件洲尊，如下圖：

image.png

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

@IonicPage(
  { name: "login" }//配置頁面名稱矢渊，用于：this.navCtrl.setRoot(頁面名稱);
)
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  constructor(public navCtrl: NavController) { }

  go1() {
    this.navCtrl.setRoot("main");//清空導(dǎo)航日志棧继准，添加main到第一個(gè)；
  }
  go2() {
    this.navCtrl.push("main", { deftype: 1 });//導(dǎo)航日志棧中添加main頁面矮男；
  }
  back() {
    this.navCtrl.pop();//導(dǎo)航日志棧中刪除當(dāng)前頁面移必，回退到上一個(gè)頁面；
  }
}

要用好Ionic3需要清楚ionicpage毡鉴、ionicpagemodule作用崔泵，他們實(shí)現(xiàn)了頁面模塊化：
https://ionicframework.com/docs/v3/api/navigation/IonicPage/
https://ionicframework.com/docs/v3/api/IonicPageModule/

三、獲取參數(shù)
在用this.navCtrl.push("main", { deftype: 1 });跳轉(zhuǎn)時(shí)猪瞬，傳入的參數(shù)可以用NavParams來獲仍魅场；
代碼演示：

import { Component } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';

@IonicPage({ name: "main" })
@Component({
  selector: 'page-main',
  templateUrl: 'main.html',
})
export class MainPage {
  constructor(public navParams: NavParams) {
    console.log(this.navParams.get("deftype"));//獲取this.navCtrl.push("main", { deftype: 1 });中的deftype
  }
}

四陈瘦、使用自定義服務(wù)
執(zhí)行Ionic g provider httppost幌甘，會(huì)在providers目錄生成一個(gè)httppost目錄，app.module.ts自動(dòng)在providers配置項(xiàng)添加httppost依賴甘晤。
服務(wù)調(diào)用案例：

//----------LoginPage頁面調(diào)用http-post服務(wù)
import { HttpPostProvider } from './../http-post/http-post';
export class LoginPage {
  constructor(public httpPost: HttpPostProvider) {}
  data(param) {
    return this.httpPost.query(param);
  }
}

//----------http-post服務(wù)代碼
import { Injectable } from '@angular/core';
@Injectable()
export class HttpPostProvider {
  constructor() { }

  query(urlModel) {
    //含潘。。线婚。代碼
  }
}

五遏弱、數(shù)據(jù)綁定

//----------模板文件
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>{{title}}</h2>
  <p>
    <ion-input type="text" [(ngModel)]="keyword" placeholder="請輸入賬號(hào)" #username></ion-input>
  </p>
  <p>
    {{keyword}}
  </p>
  <ul>
    <li *ngFor="let item of data">
      {{item}}
    </li>
  </ul>
</ion-content>

//----------js代碼
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  title: String = "這是標(biāo)題";
  keyword: String;
  data: Array<Number> = [3, 4, 5, 6, 7, 8, 9];
  constructor(public navCtrl: NavController) {
  }
}

簡單數(shù)據(jù)綁定演示.gif