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) {
    //。。。代码
  }
}

五、数据绑定

//----------模板文件
<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="请输入账号" #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 = "这是标题";
  keyword: String;
  data: Array<Number> = [3, 4, 5, 6, 7, 8, 9];
  constructor(public navCtrl: NavController) {
  }
}

简单数据绑定演示.gif