还记得Ionic 1中的state和router吗？他们两兄弟配合起来完成页面导航的功能，虽然它们使用起来并不算复杂## 标题 ##，概念也很清晰，不过当页面增多、state嵌套等问题出现后复杂度也会增加，当复杂程度到达一定程度时工程必然难以维护和理解。而Ionic 2效仿原生页面堆栈的概念解决了上述问题。
页面与组件
页面是应用的基石，是交互的基本单位，Ionic 2中页面是通过组件构成的，Ionic 2中实现了很多常用组件用于更快地构建应用，如Modal、Popup等。在中我们接触到了修饰器的概念，并且简单介绍了@App和@Pipe的相关使用方式，使用组件也需要先使用修饰器@Component定义，下面是其基本使用方式：
import {Component} from '@angular/core';
@Component({
templateUrl: "template.html"
export class PageName(){
constructor(){
使用@Component首先需要使用import导入，并使用templateUrl或template指定其页面构成。
堆栈的概念大家都很熟悉，其基本原则是：先入后出。页面堆栈也不例外，可以将页面堆栈视为书箱，具体的页面视为不同的待放入书箱的书籍，每一次水平放入一本书，先放的书必然被后来的书“挡住”从而看不到了，想要重新看到就需要先将上面的书拿开。
其实Ionic 2中与其说是页面堆栈，不如说是组件堆栈，组件包括但不限于页面，而类似于Modal、Popup、Alert等相关的组件也是由堆栈维护的，下面提及的页面其实是组件的意思。
Ionic 2中使用NavController操作页面堆栈。
import {Component} from '@angular/core';
@Component({
templateUrl: "my-page.html"
export class MyPage(){
constructor(public navCtrl: NavController) {
这里创造NavController的实例是为了在类中任意地方都能够使用。
NavController最基本的就是“放书”的push操作和“拿书”的pop操作，其具体操作类似于Array：
push操作将一个页面放到页面堆栈的最顶层，使其对用户可见：
this.navCtrl.push(OtherPage)
使用push操作页面，只需要提供其页面组件的引用即可，当然首先要使用import将其导入：
import {OtherPage} from '../other-page/other-page';
页面间传值
大多情况下，页面之间需要通信，即页面之间需要进行数据传递，可以为push操作指定第二个参数作为页面间传递的参数：
// my-page.ts
this.navCtrl.push(OtherPage, {
key1: value1,
key2: value2
在OtherPage中可以使用NavParams获取到其他页面传至本页面的值：
import {Component} from '@angular/core';
@Component({
templateUrl: "other-page.html"
export class OtherPage(){
constructor(public navCtrl: NavController, public navParams: NavParams) {
const data = this.navParams.
const value1 = this.navParams.get('key1');
const value2 = this.navParams.get('key2');
和push对应的是pop操作，其实很多时候并不需要手动执行pop操作，Ionic 2中使用push操作时，导航栏上会加上返回按钮用于回到上一页面，也就是说pop操作会被自动执行。当然手动pop操作也是必要的，如用户注销需要跳转至登录页面等场景均需要手动调用pop操作：
this.navCtrl.pop()
NavController的功能很多很强大，这里只介绍了其最基本的功能，请大家移步。
参考文档：
ionic3的页面的三种跳转
第一次写，编辑的时候看着顺眼，发上来后有点乱。
假设从page first 跳转到 page second
（1）NavController
1.在first.ts中，先导入NavContr...
ionic2中 NavController导航组件用法方法关于页面的导航
1.NavController概述
NavController是导航控制器组件的基类，如Nav和Tab。 您可以使用导航控制器导航到应用程序中的页面。 在基本级别，导航控制器是表示特定...
ionic2 pop 传参数
ionic中返回刷新问题
最近做ionic项目，发现自带的返回按钮返回回去不会刷新页面，会显示缓存的页面，我数字改变了也没办法 于是发现有个ionic中ionicView的生命周期
onicView的生命周期的事件调用在...
ionic状态改变时动态（强制）刷新页面
$state.go(stateName,params,config);使用这个方法调到某个状态后，有时需要强制刷新当前页面，使其向后台发起请求，获取最新数据。
1.这种需求的场景举例：
ionic 处理页面导航条返回事件，返回指定页面
ionic：返回上一页面的方法
this.navCtrl.pop();
ionic：返回指定页面的方法：
// 第一步：导入ViewChild 和 Navbar
import { C...
Ionic 中使用iframe嵌入外网页面整理
一、Ionic是单页应用，有时候需要处理外网页面，可以使用iframe标签
特别说明：
1.目前来说如果iframe中的页面都是当前窗口的话建议使用
2.如果iframe中页面的链接有targe...
ionic2 返回按钮
在 ionic2 的开发中，经常会遇到与返回按钮相关的操作，本篇介绍了如何全局配置返回按钮的文字与图标，以及如何使用自定义的按钮作为返回按钮，以及隐藏特定页面的返回按钮。...
移动应用框架 ionic2 自学须知的基本知识点
官方文档：http://ionicframework.com/docs/v2/
Ionic(ionicframework)一款接近原生的Html5移动App开发框架。
Ionic2踩坑记录（一）
首先为了兼容对Ionic尚且不了解的人，允许我对ionic做一个介绍。
众所周知，在当今主流的移动应用开发中，android和ios平台采用的是完全不同的开发语言，android主流使用java和k...
没有更多推荐了，本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情：
查看todo列表
添加新的todo项
查看todo详情
保存 todo到持久化存储
0 开始之前
本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。
1 创建新的Ionic 2工程
我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。
运行以下命令创建新项目
ionic start ionic-todo blank
一旦代码生成,在文本编辑器打开项目。可以看到Ionic 2项目的基本结构， 这些是由Ionic CLI生成的代码。
基本上,我们的应用程序中的所有组件(我们的应用程序将由不同的组件组成)将在 src 文件夹中(包括app文件夹中的根组件和在pages文件夹中我们所有的页面组件)。一个组件将包括一个模板（.html文件)，类定义(.ts文件)，或者一些样式(.scss文件)。同组件类似，您还可能创建诸如服务services(如稍后我们将创建的数据服务)，但没有模板和样式，但在结构上类似一个正常的组件。这些服务也被称作“providers”将被放置在一个providers文件夹。
现在,只有一个HomePage组件,设置一个虚拟视图。在我们的应用程序中我们要修改这个来显示的所有待办事项列表。
先从自动生成的**src/app/app.component.ts文件开始来看一下：
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
@Component({
template: `&ion-nav [root]="rootPage"&&/ion-nav&`
export class MyApp {
rootPage = HomeP
constructor(platform: Platform) {
platform.ready().then(() =& {
StatusBar.styleDefault();
app.component.ts文件中定义了根组件（root component）。相比其他组件该组件是特殊的,因为它是第一个组件被加载到应用程序,从那里我们可以显示更多的组件,可以添加更多的组件等等。基本上,我们的应用程序结构就像一棵树，根组件就是树的根。
因此,重要的是我们的根组件（root component）知道在哪里可以找到我们的HomePage主页,因为需要将它设置为root page根页面。注意,我们导入(importing)HomePage 在这个文件主页的顶部,然后在下面的代码中设置它作为根页面（ root page**）:
rootPage: any = HomePage;
我们可以在构造函数上面声明变量，像上面这样的使其成员变量 member variables,这意味着他们可以通过引用this.myVal在整个类中被被访问，同时，它也将在您的模板中可用。 ： any 只是一个TypeScript语言的内容，意味着rootPage可以是任何(any)类型。如果你不适应 TypeScript，并感到困惑，那也不用担心——你可以把类型抛开，您的应用程序仍然会工作的很好。我不会在本教程中使用类型，除了依赖注入是不可替代的地方(我们将稍后介入)。如果你想知道更多关于在Ionic 2中使用类型，应该学习TypeScript或ECMAScript 6相关知识。root page 根页面是您应用程序显示的第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中的视图可以通过改变这一根页面,或 push 推或 pop弹出视图。推一个视图将会改变展现，弹出它将删除当前视图并回到前面的视图。关于导航的更详细的解释,我推荐看看一个相关的Ionic 2导航指南。
2. 设置主页（Home page）
现在我们已经建立了基本的应用程序，让故事开始吧。首先,让我们建立todo列表模板。
2.1 创建模板
按照下面的内容修改 src/pages/home/home.html ：
color="secondary"&
ion-button icon-only (click)="addItem()"& name="add-circle"&&&
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
注意这里使用的语法在列表中使用*ngFor*，创建了一个速记到嵌入的模板中。这样就不用迭代输出了:
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
根据DOM(文档对象模型)，嵌入式模板将会为每个项（items）创建特定的数据。所以,如果我们的items数组(稍后将定义在类定义)有4项，那么& ion-item &将渲染四次。还要注意,我们使用的 let item ，循环分配一个items数组项给item。这允许我们引用其属性,并传递到viewItem函数。
我们将标题设置为Todos（待办事项）!我们设计一个按钮使用& ion-buttons &。因为这里有个end属性，按钮将被放置在end的位置。不同属性的行为可能会有所不同，取决于在什么平台上运行，以iOS为例,将end会将按钮放到导航栏的右边。还要注意,按钮本身我们给它一个属性的ion-button将会使用Ionic 2 的按钮样式，而icon-only样式将会让按钮只包含一个图标没有文本。
我们使用 (click) 来附加一个点击监听器到这个元素，这里将在在home.ts中调用addItem()函数。
2.2 创建类
按如下修改src/pages/home/home.ts：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
constructor(public navCtrl: NavController) {
ionViewDidLoad(){
this.items = [
{title: 'hi1', description: 'test1'},
{title: 'hi2', description: 'test2'},
{title: 'hi3', description: 'test3'}
addItem(){
viewItem(){
还记得大明湖畔的夏雨荷吗？哦不是，还记得之前我们如何给homePage分配一个any类型变量吗?现在我们在构造函数中分配一个NavController类型给navCtrl参数。这就是Ionic 2 的依赖注入工作模式，基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字在它面前,它会自动创建一个成员变量。这意味着我们现在可以引用NavController通过在类里任意使用this.navCtrl。
现在我们已经建立了一些假的数据(我们使用ionViewDidLoad生命周期钩子，这将在页面加载时被触发)，您应该能够看到它已经在列表中渲染了：
Todos 列表页面
在运行 ionic serve 时，因为既然我们导入了NavController服务，我们就可以在这个组件push或pop视图，如下所示：
.navCtrl.push();
ionic g page AddItemPage
我们已经创建了添加和查看项目的方法，在更进一步之前我们不得不先创建 AddItemPage andItemDetailPage 组件。
2.3 添加项目
我们将要创建一个新组件让我们添加新的todo项。当然，这只是一个简单的表单提供了标题和描述来创建todo。
运行如下命令来生成一个add-item页面
ionic g page AddItemPage
任何时候当我们创建一个新页面，我们需要确保该页面被导入（imported）到我们的 app.module.ts，然后在entryComponents和declarations数组中被声明。
按如下修改 src/app/app.module.ts ：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
@NgModule({
declarations: [
AddItemPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage
providers: []
export class AppModule {}
就像上次，我们先创建组件的模版。
2.4 建立新增项目模版
按如下内容修改 src/pages/add-item-page/add-item-page.html :
color="secondary"&
ion-button icon-only (click)="close()"& name="close"&&&
floating&Title&
type="text" [(ngModel)]="title"&&
floating&Description&
type="text" [(ngModel)]="description"&&
full ion-button color="secondary" (click)="saveItem()"&Save&
这里没有什么太疯狂的开始。这次我们定义了另一个按钮,简单地调用了定义在add-item-page.ts中的saveItem函数。我们还有另一个按钮指向一个close方法——因为这个页面作为一个Mode模式的页面，我们希望能把页面关闭，所以我们也会在add-item-page.ts定义这个方法。现在我们有一些输入框了，它们又有[(ngModel)]属性，这个就是双向绑定。任何作用到title字段的改变都将立即影响到add-tiem-page.ts（我们马上要讲到）里面的this.title成员变量。反之亦然，任何this.title上的改变都将立即影响到模版。同样注意到我们的保存按钮上使用了full属性，这个方便的小属性帮助我们设置按钮宽度为full。
2.5 建立添加项的类
现在我们将要建立一个类给我们的添加项组件。
按如下内容修改 add-item-page.ts：
import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
@Component({
selector: 'page-add-item-page',
templateUrl: 'add-item-page.html'
export class AddItemPage {
constructor(public navCtrl: NavController, public view: ViewController) {
saveItem(){
let newItem = {
title: this.title,
description: this.description
this.view.dismiss(newItem);
this.view.dismiss();
这里我们导入了一个怪异的服务：ViewController，可以用于模态（Modals）页面的关闭（dismiss）。
除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前的标题和描述值(即我们建立双向数据绑定，无论用户输入什么)，然后我们关闭视图，同时我们也传入了newItem在dismiss方法中。这将允许我们建立一个侦听器，当回到主页(就是那个启动这个页面的另外一个页面)时获取数据。通过这种方式,我们可以从一个页面传递数据到另一个页面(然而，记住，模态不需要在页面之间传递数据)。
2.6 在主页保存新增项
就像我提到的，我们把要保存的数据返回发送给HomePage。我们现在导入import我们新增的AddItemPage组件到HomePage，当用户点击新增时我们就创建出该视图。
按如下内容修改 src/pages/home/home.ts :
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
viewItem(item){
你看上面这个文件的顶部，可以发现我们现在导入import了AddItemPage组件。这时我们就可以用这个页面创建模态页面了，具体看addItem方法。注意我们这里建立了一个onDidDismiss监听器，这样就可以获取模态关闭时回传的数据，并通过saveItem方法保存。现在，我们仅通过将数据push到items数组，最终，我们将保存到数据库。我们已经移除了假数据，因为现在用户输入通过saveItem方法被添加到了this.items。我们将items初始为空。
2.7 查看项目
现在，我们想要一个功能，就是用户点击todo列表里面的某一项，然后可以看到该项的细节信息（例如：这里只有描述可以看了，实际可以根据需要扩展，呵呵）。要做这个我们应该知道这是又要创建一个新组件了啊。
还记得如何创建页面吗，运行下面的代码创建一个 item-detail 页面:
ionic g page ItemDetailPage
time and time again，我们需要在 app.module.ts 文件中设置一下，三件事：import，declarations， entryComponents：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: []
export class AppModule {}
按照顺序是该写模版了，开始：
千篇一律，按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.html :
color="secondary"&
{{description}}
相比其他模版，这里相当的直白。我们只是使用& ion-card &指令简单装饰下，并输出标题和描述，值将在item-detail-page.ts中定义。
好，继续按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.ts ：
import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
@Component({
selector: 'page-item-detail-page',
templateUrl: 'item-detail-page.html'
export class ItemDetailPage {
constructor(public navParams: NavParams){
ionViewDidLoad() {
this.title = this.navParams.get('item').
this.description = this.navParams.get('item').
当我们把这个页面将传入的数据项,点击,然后我们把物品的标题和描述,使用NavParams。
现在我们要做的是在home.ts 内设置 viewItem 函数和导入新的细节页面。
src/pages/home/home.ts 修改如下：
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
添加的导入代码放在 src/pages/home/home.ts 的顶部：
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
这时就可以push出项目的细节页面，然后传入被点击的项目。如果你现在点击存在于列表中的项目，你可能看到如下界面：
项目细节页面
3 持久化数据保存
Todo应用程序现在将基本工作,但数据没有被存储在任何地方只要你刷新应用程序你将失去你所有的数据(不理想)。
现在我们要做的是创建一个服务被称为Data用来处理存储和检索数据。我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用。
这意味着,如果您正在设备上运行，安装了SQLite插件，那么它将使用一个本地SQLite数据库进行存储，否则它将退回到使用基于浏览器的存储(可能被操作系统擦除)。
运行下面代码创建服务
ionic g provider Data
data.ts 代码修改如下：
import { Storage } from '@ionic/storage';
import {Injectable} from '@angular/core';
@Injectable()
export class Data {
constructor(public storage: Storage){
getData() {
return this.storage.get('todos');
save(data){
let newData = JSON.stringify(data);
this.storage.set('todos', newData);
这个是有点不同于我们已经创建的组件(它可能更合适认为是service)。我们不使用@component装饰，而使用@Injectable声明这个类。
在构造函数中,我们建立一个 Storage 服务的引用。
数组中save函数简单地将所有的项放入数组并保存到存储，每当项目变化我们将调用这个函数。
我们还将需要设置的Storage服务,以及 Data provider,在我们 app.module.ts 文件。
src/app/app.module.ts 修改如下：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
import { Storage } from '@ionic/storage';
import { Data } from '../providers/data';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: [Storage, Data]
export class AppModule {}
请注意,我们已经声明这些在providers的数组,而不是declarations或entryComponents数组。
现在我们需要更新。ts使用这项新服务。
src/pages/home/home.ts 文件修改如下：
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
import { Data } from '../../providers/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) {
this.dataService.getData().then((todos) =& {
if(todos){
this.items = JSON.parse(todos);
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
this.dataService.save(this.items);
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
这是我们最后的一些代码。再次,我们importing数据服务,通过传递给构造函数。我们依然设置 items 开始是空的，使用数据服务获取数据。重要的是要注意getData 返回promise而不是数据本身。抓取的数据存储是异步的，这意味着我们的应用程序将继续运行当数据加载时。promise让我们数据完成加载时执行一些操作,而不需要暂停整个应用程序。
最后,我们还添加一个调用save 函数保存在数据服务当一个新的条目被添加。现在该函数将马上更新我们的新数据条目数组，但items也将被复制保存到数据服务,以便下次我们回到应用程序是可用。
在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能：
监听和处理事件
视图之间的导航
在视图之间传递数据
建立双向数据绑定
显然还有很多我们可以做，使这个应用程序更漂亮，添加删除和编辑笔记的能力等等。
浏览: 425781 次
来自: 昆明
[b][/b][flash=200,200][flash=20 ...
我们https://yunba.io/也是基于MQTT协议实现 ...
GoEasyweb 推送基于websocket 和pollin ...
tedeum 写道produces 注意版本问题，老的版本不支 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'移动应用框架 ionic2 自学须知的基本知识点
我的图书馆
移动应用框架 ionic2 自学须知的基本知识点
官方文档：
& & & & Ionic(ionicframework)一款接近原生的移动App开发框架。
IONIC 是目前最有潜力的一款
手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用
MVVM 框架和 来增强应用。提供数据的双向绑定，使用它成为
Web 和者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
注意：这里讲的是ionic2的知识点，毕竟它与ionic 1.0有着较显著的区别。
Ionic2的版本更新介绍：
Ionic2 Iclic Labs：
Ionic2 项目参考：
Ionic2的文档学习：来自&&的&
Ionic2 APP启动慢？ 参考：&
（一）Ionic
的安装与运行
1、&下载安装 ，可以在命令行中使用node–v命令查看当前安装的node.js的版本；
2、&使用 npm install ionic –g命令可以安装Ionic，不过需要注意的是此时安装的版本为Ionic
1.0版本。可以使用npm install ionic@beta–g安装beta版本，如可以使用npm
install&–g安装beta.22版本；
（ 现在直接npm install ionic -g即可安装到 Ionic2）
3、&安装Ionic
后，可以使用 ionic start ionicdemo --v2初始化一个空项目，默认采用tabs template作为初始化项目的模板，如果需要其他的模板，那么在项目名称后面添加上对应的模板名称即可，如：ionic
start ionicdemo tutorial --v2；（--v2参数明确了使用2.0版本去初始化项目）
4、&使用 ionic serve可以运行Ionic项目；
5、&使用 ionic platform add 或ionic platform add 命令可以添加两个手机平台的部署文件（使用ionicplatform
list 命令可以查看当前的平台信息）；
6、&在项目中添加了两个平台的部署文件，可以通过platform文件夹下进行查看，相应地，在Xcode导入ios部署文件或在Android
studio导入Android部署文件，可以进行相应地真机调试；
1）更新 node_modules/ionic-native 到最新的命令：
npm&i&--save&ionic-native@latest&&or
cnpm&i&--save&ionic-native@latest&&有时可能遇到 ionic-native中插件不能使用的问题，可能是由于当前项目中ionic-native版本过低，我们需要将其更新到最新版本。需要注意：更新到最新版本后，可能出现其他问题哦~
2）查看ionic-native版本：
npm&list&ionic-native&&or
cnpm&list&ionic-native&&
3）在ionic start项目时，可能出现如下错误：
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
解决方案：
After this error, run npm install , if get some error related to
, than follow below steps, it resolved for me:
to https://git-for-windows.github.io/ and install git
than open git cmd
run below command:&
git config --global url."https://".insteadOf git://
（二）Ionic页面的生命周期
[javascript]
//&页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在&&onPageLoaded()&{&&&&console.log('page&1:&page&loaded.');&&}&&&&//&页面即将进入的时候&&onPageWillEnter()&{&&&&//&在这里可以做页面初始化的一些事情&&&&console.log('page&1:&page&will&enter.');&&}&&&&//&页面已经进入的时候&&onPageDidEnter()&{&&&&console.log('page&1:&page&did&enter.');&&}&&&&//&页面即将离开的时候&&onPageWillLeave()&{&&&&console.log('page&1:&page&will&leave.');&&}&&&&//&页面已经离开的时候&&onPageDidLeave()&{&&&&console.log('page&1:&page&did&leave.');&&}&&&&//&从&DOM&中移除的时候执行的生命周期&&onPageWillUnload()&{&&&&}&&&&//&从&DOM&中移除执行完成的时候&&onPageDidUnload()&{&&&&}&&
（三）Ionic组件
1、Tab控件
&ion-tabs&&&&&&ion-tab&[root]="tab1Root"&tabTitle="Home"&tabIcon="home"&&/ion-tab&&&&&&ion-tab&[root]="tab2Root"&tabTitle="About"&tabIcon="information-circle"&&/ion-tab&&&&&&ion-tab&[root]="tab3Root"&tabTitle="Contact"&tabIcon="contacts"&&/ion-tab&&&&/ion-tabs&&&
&ion-tabs&&&&&&ion-tab&[root]="tab1Root"&tabTitle="Home"&tabIcon="home"&&/ion-tab&&&&&&ion-tab&[root]="tab2Root"&tabTitle="About"&tabIcon="information-circle"&&/ion-tab&&&&&&ion-tab&[root]="tab3Root"&tabTitle="Contact"&tabIcon="contacts"&tabBadge="3"&&/ion-tab&&&&/ion-tabs&&&
&ion-tabs&&&&&&ion-tab&[root]="tab1Root"&tabTitle="Home"&tabIcon="home"&&/ion-tab&&&&&&ion-tab&[root]="tab2Root"&tabTitle="About"&tabIcon="information-circle"&&/ion-tab&&&&&&ion-tab&[root]="tab3Root"&tabTitle="Contact"&tabIcon="contacts"&tabBadge="3"&tabBadgeStyle="danger"&&/ion-tab&&&&/ion-tabs&&&
默认首先进入第三个tab页面：
&ion-tabs&selectedIndex="2"&&&&&&ion-tab&[root]="tab1Root"&tabTitle="Home"&tabIcon="home"&&/ion-tab&&&&&&ion-tab&[root]="tab2Root"&tabTitle="About"&tabIcon="information-circle"&&/ion-tab&&&&&&ion-tab&[root]="tab3Root"&tabTitle="Contact"&tabIcon="contacts"&tabBadge="3"&tabBadgeStyle="danger"&&/ion-tab&&&&/ion-tabs&&&
&ion-tabs&#mainTabs&&&&&&ion-tab&[root]="tab1Root"&tabTitle="Home"&tabIcon="home"&&/ion-tab&&&&&&ion-tab&[root]="tab2Root"&tabTitle="About"&tabIcon="information-circle"&tabBadge="3"&tabBadgeStyle="danger"&&/ion-tab&&&&&&ion-tab&[root]="tab3Root"&tabTitle="用户中心"&tabIcon="person"&&/ion-tab&&&&/ion-tabs&&&
[javascript]
import&{Component}&from&'@angular/core';&&import&{HomePage}&from&'../home/home';&&import&{AboutPage}&from&'../about/about';&&import&{ContactPage}&from&'../contact/contact';&&&&import&{Tabs}&from&'ionic-angular';&&import&{Injectable,&ViewChild}&from&'@angular/core';&&&&@Component({&&&&templateUrl:&'build/pages/tabs/tabs.html'&&})&&export&class&TabsPage&{&&&&@ViewChild('mainTabs')&tabRef:&T&&&&&&private&tab1Root:&&&&&private&tab2Root:&&&&&private&tab3Root:&&&&&&&constructor()&{&&&&&&//&this&tells&the&tabs&component&which&Pages&&&&&&//&should&be&each&tab's&root&Page&&&&&&this.tab1Root&=&HomeP&&&&&&this.tab2Root&=&AboutP&&&&&&this.tab3Root&=&ContactP&&&&}&&&&&&ionViewDidEnter()&{&&&&&&this.tabRef.select(2);&&&&}&&}&&
2、Button控件
&button&Basic&Button&/button&&&&button&gray&Gray&Button&/button&&&&button&danger&Danger&Button&/button&&&&button&outline&Outline&Button&/button&&&&button&clear&Clear&Button&/button&&&&button&round&Round&Button&/button&&&&button&block&Block&Button&/button&&&&button&small&Small&Button&/button&&&&button&large&Large&Button&/button&&&&button&&&&&&ion-icon&name="home"&&/ion-icon&&&&&Button&&&/button&&&&button&&&&&Button&&&&&ion-icon&name="home"&&/ion-icon&&&&/button&&&&button&&&&&&ion-icon&name="home"&&/ion-icon&&&&/button&&&
3、Input控件
&ion-list&&&&&&ion-item&&&&&&&&ion-label&floating&用户名&/ion-label&&&&&&&&ion-input&type="text"&value=""&[(ngModel)]="user.username"&&/ion-input&&&&&&/ion-item&&&&&&ion-item&&&&&&&&ion-label&stacked&密码&/ion-label&&&&&&&&ion-input&type="password"&value=""&[(ngModel)]="user.password"&&/ion-input&&&&&&/ion-item&&&&/ion-list&&&&button&block&(click)="showFill()"&登录&/button&&&
[javascript]
export&class&ContactPage&{&&&&public&user&=&{&&&&&&username:&'parry',&&&&&&password:&''&&&&};&&&&&&constructor(private&navCtrl:&NavController)&{&&&&&&}&&&&&&showFill()&{&&&&&&alert(this.user.username);&&&&&&console.log(this.user.password);&&&&}&&}&&
4、Loading控件、Alert控件
[javascript]
import&{Component}&from&'@angular/core';&&import&{NavController,&LoadingController,&AlertController}&from&'ionic-angular';&&&&@Component({&&&&templateUrl:&'build/pages/contact/contact.html'&&})&&export&class&ContactPage&{&&&&public&user&=&{&&&&&&username:&'parry',&&&&&&password:&''&&&&};&&&&&&constructor(private&navCtrl:&NavController,&&&&&&&&&&&&&&&&private&loadingCtrl:&LoadingController,&&&&&&&&&&&&&&&&private&alertCtrl:&AlertController)&{&&&&&&this.navCtrl&=&navC&&&&}&&&&&&showFill()&{&&&&&&alert(this.user.username);&&&&&&console.log(this.user.password);&&&&}&&&&&&login()&{&&&&&&/*//&创建&loading&窗口，模拟3秒后登录成功，&loading&窗口消失&&&&&let&loading&=&Loading.create({&&&&&&&content:&'正在登录...',&&&&&&&duration:&3000,&//单位是毫秒&&&&&});&&&&&&this.navCtrl.present(loading);&&&&&&//&真实的逻辑应该是：去请求登录的&API，返回结果后，进行loading窗口的隐藏&&&&&setTimeout(()&=&&{&&&&&&&loading.dismiss();&&&&&},&3000);*/&&&&&&&&if(this.user.username&==&''&||&this.user.username.length&&=&3)&{&&&&&&&&//&alert&提醒用户注意用户名的正确性&&&&&&&&let&alertUserNameError&=&this.alertCtrl.create({&&&&&&&&&&title:&'用户中心',&&&&&&&&&&subTitle:&'输入的用户名格式不正确！',&&&&&&&&&&buttons:&['OK']&&&&&&&&});&&&&&&&&&&alertUserNameError.present();&&&&&&}&else&{&&&&&&&&let&loading&=&this.loadingCtrl.create({&&&&&&&&&&content:&'Please&wait...',&&&&&&&&&&spinner:&'dots',&&&&&&&&&&duration:&3000,&//单位是毫秒&&&&&&&&});&&&&&&&&&&loading.present();&&&&&&&&&&setTimeout(()&=&&{&&&&&&&&&&loading.dismiss();&&&&&&&&},&3000);&&&&&&}&&&&&&}&&&&}&&
5、Toast控件
[javascript]
//&2.&使用&Toast&控件&&let&toast&=&this.toastCtrl.create({&&&&message:&'输入的用户名格式不正确！',&&&&duration:&3000,&&});&&toast.present();&&
6、Grid布局
[javascript]
&ion-row&&&&&&ion-col&&&&&&&&div&class="textAlignRight&marginTop10"&&button&clear&还没有账号？点击注册&/button&&/div&&&&&&/ion-col&&&&/ion-row&&&
7、&modal控件
[javascript]
//&导入注册页面&&import&{Register}&from&'../contact/register';&&
[javascript]
//&打开注册页面&&openRegisterPage()&{&&&&let&modal&=&this.modalCtrl.create(Register);&&&&modal.present();&&}&&
[javascript]
import&{Component}&from&'@angular/core';&&&&@Component({&&&&templateUrl:&'build/pages/contact/register.html'&&})&&export&class&Register&{&&&&}&&
8、&Toolbar控件
[javascript]
&ion-toolbar&&&&&&ion-title&用户注册&/ion-title&&&&&&ion-buttons&end&&&&&&&&button&(click)="dismiss()"&&&&&&&&&&span&showWhen="ios"&取消&/span&&&&&&&&&&ion-icon&name="md-close"&showWhen="android,windows"&&/ion-icon&&&&&&&&/button&&&&&&/ion-buttons&&&&/ion-toolbar&&&
&ion-header&&&&&&ion-toolbar&&&&&&&&ion-title&用户注册&/ion-title&&&&&&&&ion-buttons&end&&&&&&&&&&button&(click)="dismiss()"&&&&&&&&&&&&span&showWhen="ios"&取消&/span&&&&&&&&&&&&ion-icon&name="md-close"&showWhen="android,windows"&&/ion-icon&&&&&&&&&&/button&&&&&&&&/ion-buttons&&&&&&/ion-toolbar&&&&/ion-header&&&&&&&&ion-content&padding&&&&&&&&h5&Parameters&passed:&/h5&&&&/ion-content&&&
9、&List控件
&ion-list&&&&&&ion-item&&&&&&&&ion-avatar&item-left&&img&src="../images/1.jpg"&alt="头像"&&/ion-avatar&&&&&&&&h2&哈哈&/h2&&&&&&&&p&(ˇ?ˇ)&想～&/p&&&&&&/ion-item&&&&&&ion-item&&&&&&&&ion-avatar&item-left&&img&src="../images/2.jpg"&alt="头像"&&/ion-avatar&&&&&&&&h2&美女&/h2&&&&&&&&p&(ˇ?ˇ)&想～&/p&&&&&&/ion-item&&&&/ion-list&&&
绑定数据源：
数据源的声明
[javascript]
//&一般数据源都是从&api&进行获取，这里我们只是模拟一些已经取到了数据&&public&contacts&=&[&&&&{'contactid':&1,&'contactname':&'梦小白',&'contacttext':&''},&&&&{'contactid':&2,&'contactname':&'梦小白2',&'contacttext':&''},&&&&{'contactid':&3,&'contactname':&'梦小白3',&'contacttext':&''},&&&&{'contactid':&4,&'contactname':&'梦小白4',&'contacttext':&''},&&&&{'contactid':&5,&'contactname':&'梦小白5',&'contacttext':&''},&&&&{'contactid':&6,&'contactname':&'梦小白6',&'contacttext':&''},&&&&&&{'contactid':&1,&'contactname':&'梦小白7',&'contacttext':&''},&&&&{'contactid':&2,&'contactname':&'梦小白8',&'contacttext':&''},&&&&{'contactid':&3,&'contactname':&'梦小白9',&'contacttext':&''},&&&&{'contactid':&4,&'contactname':&'梦小白10',&'contacttext':&''},&&&&{'contactid':&5,&'contactname':&'梦小白11',&'contacttext':&''},&&&&{'contactid':&6,&'contactname':&'梦小白12',&'contacttext':&''},&&];&&
&ion-list&&&&&&ion-item&*ngFor="#contact&of&contacts"&(click)="itemClick($event,&contact)"&&&&&&&&ion-avatar&item-left&&img&src="../images/{{contact.contactid}}.jpg"&alt="头像"&&/ion-avatar&&&&&&&&h2&{{contact.contactname}}&/h2&&&&&&&&p&{{contact.contacttext}}&/p&&&&&&/ion-item&&&&/ion-list&&&
10、卡片布局
&ion-card&&&&&&ion-item&&&&&&&&ion-avatar&item-left&&&&&&&&&&img&src="../images/6.jpg"&alt="头像"&&&&&&&&/ion-avatar&&&&&&&&h2&Elon&Musk&/h2&&&&&&&&p&来自&iPhone&6s&/p&&&&&&/ion-item&&&&&&img&src="../images/c1.jpg"&alt="图片"&&&&&&ion-card-content&&&&&&&&p&我又发布了一辆新车，上天入地舍我其谁？呵呵&/p&&&&&&/ion-card-content&&&&&&ion-item&&&&&&&&button&primary&clear&item-left&&ion-icon&name="thumbs-up"&&/ion-icon&&div&888&赞&/div&&/button&&&&&&&&button&primary&clear&item-left&&ion-icon&name="text"&&/ion-icon&&div&600&评论&/div&&/button&&&&&&&&ion-note&item-right&&&&&&&&&1小时前&&&&&&&/ion-note&&&&&&/ion-item&&&&/ion-card&&&
11、navigation控件
[javascript]
itemClick(event,&contact)&{&&&&//console.log(event);&&&&//console.dirxml(contact);&&&&//alert(contact.contactname);&&&&&&this.navCtrl.push(ContactDetails,&{item:&contact});&&}&&
ContactDetails页面
[javascript]
/**&&*&Created&by&Administrator&on&&0023.&&*/&&import&{Component}&from&'@angular/core';&&import&{NavParams}&from&'ionic-angular';&&&&@Component({&&&&templateUrl:&'build/pages/about/contactdetails.html'&&})&&export&class&ContactDetails&{&&&&private&item&=&'';&&&&&&constructor(public&params:&NavParams)&{&&&&&&this.item&=&params.data.&&&&}&&}&&
&ion-header&&&&&&ion-navbar&&&&&&&&ion-title&{{item.contactname}}&/ion-title&&&&&&/ion-navbar&&&&/ion-header&&&&ion-content&padding&&&&&{{item.contactname}}&的手机号码为：{{item.contacttext}}&&&/ion-content&&&
（四）Cordova组件介绍
1、Image Picker组件
2、Geolocation组件
[javascript]
//&获取位置信息&&Geolocation.getCurrentPosition().then((resp)&=&&{&&&&console.log(resp.coords.latitude);&&&&console.log(resp.coords.longitude);&&});&&
3、Local Notifications组件
[javascript]
//&本地提醒组件&&LocalNotifications.schedule({&&&&text:&'本地化提醒-您启动了Ionic&App',&&&&at:&new&Date(new&Date().getTime()&+&10000),&&&&sound:&null&&});&&
（五）项目实战
1、快速生成App图标和启动页面
MakeAppicon
Ios.hvims.com
Launcher Icon Generator
iconhandbook.co.uk/reference/chart/android
2、使用localStorage存储状态信息
localStorage.setItem(key, value)
localStorage.getItem(key)
注：Modal页面的关闭需要使用到ViewController中的dismiss方法。
3、Modal关闭后父页面的概念和方法
4、Ionic中的网络请求
跨域请求问题： &（当然在App中不会出现，只会在浏览器调试的过程中出现）
[javascript]
//&这里是请求&API&的实现，注意跨域请求的问题，请参见&http://enable-cors.org/&&this.http.get('http://xxx/account/Login?email='&+&this.user.username&+&'&password='&+&this.user.password)&&&&.subscribe(data&=&&{&&&&&&let&res&=&data.json();&&&&&&if(res.LoginStatus&==&1)&{&&&&&&&&localStorage.setItem('username',&this.user.username);&&&&&&&&localStorage.setItem('logined',&'true');&&&&&&&&//自身&modal&隐藏&&&&&&&&this.viewCtrl.dismiss(this.user.username);&&&&&&&&loading.dismiss();&//登录进度隐藏&&&&&&}&else&{&&&&&&&&let&toast&=&this.toastCtrl.create({&&&&&&&&&&message:&'登录失败！',&&&&&&&&&&duration:&2000,&&&&&&&&});&&&&&&&&toast.present();&&&&&&}&&&&&&},&err&=&&{&&&&&&let&toast&=&this.toastCtrl.create({&&&&&&&&message:&'登录失败！',&&&&&&&&duration:&2000,&&&&&&});&&&&&&toast.present();&&&&&&});&&
5、List中滑动删除数据
&ion-list&&&&&&ion-item-sliding&*ngFor="#contact&of&contacts"&&&&&&&&ion-item&(click)="itemClick($event,&contact)"&&&&&&&&&&ion-avatar&item-left&&img&src="images/{{contact.contactid}}.jpg"&alt="头像"&&/ion-avatar&&&&&&&&&&h2&{{contact.contactname}}&/h2&&&&&&&&&&p&{{contact.contacttext}}&/p&&&&&&&&/ion-item&&&&&&&&ion-item-options&&&&&&&&&&button&danger&(click)="removeContact(contact)"&&&&&&&&&&&&span&padding&&ion-icon&name="trash"&&/ion-icon&&删除&/span&&&&&&&&&&/button&&&&&&&&/ion-item-options&&&&&&/ion-item-sliding&&&&/ion-list&&&
6、集成极光推送实现消息推送
// 设置客户端的别名，用于定向接收消息的推送
window.plugins.jPushPlugin.setAlias(‘Client’&+ loginResult.UserId);
// Client（只能是单一值）：单独的一台设备绑定到jPush，就相当于设备的ID号码，server端推送的时候只能推送到ID级别的。
var arrayObj = new Array(‘Tags’&+ loginResult.UserId);
window.plugins.jPushPlugin.setTags(arrayObj);
//Tags：其实就是分组的意思，那么这样指定后，在用户登录的时候 分配一个分组名给用户，那么推送消息的时候，就可以推送给这个分组。 应用场景：如果用户有多个设备，并且这些设备上可以同时登录app，那么我们推送消息应该推送给这几个设备。
//Client –&1，只是这一台设备收到通知。
//Tag –&1，多台设备都设置叫
Tag –&1。
7、iOS打包与AppStore上架
8、Android打包与发布
参考学习：
推一荐：&&|&&
喜欢该文的人也喜欢