Ionic3开发教程 - 开发（2）

Ionic3开发系列教程
Ionic3开发教程 - 环境准备（1）
Ionic3开发教程 - 开发（2）
Ionic3开发教程 - 发布Android版本（3）
Ionic3开发教程 - 发布IOS版本（4）
Ionic3开发教程 - 更新（5）

本文中介绍的Ionic3.20.0是基于Angular5.2.11的一套App混合开发框架；这里主要介绍Ionic3框架开发基本概念，深入开发请移步：ionic官网

整体使用下来和Angular有以下不同：
1.路由配置方式不同
2.页面加载生命周期钩子不同
3.页面模块化

项目目录结构一览：

image.png

当打开App时，文件加载顺序是：
1、index.html
2、app/main.js
3、app/app.module.ts
4、app/app.component.ts
5、app/app.component.ts中rootPage配置的首页面

常用cli命令：

• 新建项目：Ionic start App tabs
• 运行项目：ionic serve
• 打包：ionic cordova build android/ios
• 查看环境：ionic info
• 新建页面：ionic generate page Login
• 新建组件：ionic generate component dropdownlist
  查看更多：Ionic CLI Documentation

页面制作

一、创建页面
执行命令Ionic g page login，生成4个文件，如下图：

image.png

二、页面跳转
Ionic3中页面跳转由导航控制器（NavController）控制，每个导航控制器存放当前导航下所有页面记录。ion-tabs组件中含有多个彼此独立的导航控制器。
常用操作：push(前进)、pop（回退）、setRoot（设置首页）、popToRoot（回到首页）等等。查看更多方法
代码案例：

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");//清空导航日志栈，添加main到第一个；
  }
  go2() {
    this.navCtrl.push("main", { deftype: 1 });//导航日志栈中添加main页面；
  }
  back() {
    this.navCtrl.pop();//导航日志栈中删除当前页面，回退到上一个页面；
  }
}

要用好Ionic3需要清楚ionicpage、ionicpagemodule作用，他们实现了页面模块化：
https://ionicframework.com/docs/v3/api/navigation/IonicPage/
https://ionicframework.com/docs/v3/api/IonicPageModule/

三、获取参数
在用this.navCtrl.push("main", { deftype: 1 });跳转时，传入的参数可以用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
  }
}

四、使用自定义服务
执行Ionic g provider httppost，会在providers目录生成一个httppost目录，app.module.ts自动在providers配置项添加httppost依赖。
服务调用案例：

//----------LoginPage页面调用http-post服务
import { HttpPostProvider } from './../http-post/http-post';
export class LoginPage {
  constructor(public httpPost: HttpPostProvider) {}
  data(param) {
    return this.httpPost.query(param);
  }
}

//----------http-post服务代码
import { Injectable } from '@angular/core';
@Injectable()
export class HttpPostProvider {
  constructor() { }

  query(urlModel) {
    //。。。代码
  }
}

五、数据绑定

//----------模板文件

  
    Home
  


  
{{title}}
  

    
  
  

    {{keyword}}
  
  

    

      {{item}}
    
  

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  title: String = "这是标题";
  keyword: String;
  data: Array = [3, 4, 5, 6, 7, 8, 9];
  constructor(public navCtrl: NavController) {
  }
}

简单数据绑定演示.gif