ionic2——ionic3 navigation imagepicker 启动图标 数据缓存 页面跳转得方式 请求 下拉刷新

## ionic2/3 整体变化总结

*ionic2/3的navigation用法*

```

## A 页面跳转带参数

ionic2 父页面用法                                 

引入 navController                                 

import {NavController} from "ionic-angular"       

static get parameters(){                           

  return [[NavController]]                                         

}                                                                           

constroctor(){                                                           

  this.nav = nav                                                     

}

onPageDidLoad(){

    this.nav.push(ContentPage---(页面),{item:id}---(传递的参数))

}

ionic2 子页面接收                                             

引入  NavParams                                               

import {NavParams} from "ionic-angular" 

static get parameters(){                                       

  return [[NavParams]]                                     

}                                                                             

constroctor(params){                                                               

  this.item= params.data.item                                                   

}   

---------------------------------------------------------------------------------------------------------------

ionic3 父页面用法

引入NavController 

import {NavController} from "ionic-angular"

constroctor(public navCtrl:NavController){}

  ionViewDidLoad(){

    this.nav.push(ContentPage,{item:id})     

  }

ionic3 子页面接收参数   

引入  NavParamsController 

import {NavParamsController } from "ionic-angular"

  constroctor(public navparamsCtrl:NavParamsController ){}

  ionViewDidLoad(){

    this.item = this.navparamsCtrl.get('item') 

  }

  ---------------------------------------------------------------------------------------------------------------------

## B modal 传递参数

  ionic2 modal用法                                                         

  引入modal                                                                       

  let modal = Modal.create(Page,{item:id})                                 

  this.nav.present(modal)

  -----------------------------------------------------------------------------------------------------------------

  ionic3 modal用法

  引入ModalController   

  constroctor  声明     

  let modal = this.modalCtrl.create(Page,{item:id})         

  modal.present()

  子页面接收同上面一致

  子页面modal关闭  父页面刷新 

  modal.present()之前 

  modal.onDidDismiss(){

      页面请求

}

  -----------------------------------------------------------------------------------------------------------------   

## C html 页面跳转 传值

ionic3 html中页面跳转传值

[navPush]="ChatPages" --------------跳转页面

[navParams]="userInfo" 

js中   

引入ChatPage 

chatPages:any

this.chatPages = ChatPage

```

*ionic2/3 数据暂存用法*

```

    ionic2 localstorage

    localstorage.username= this.username    存储

    localstorage.username=“”  移除

    ionic3 storage

    import {Storage} from "@ionic/storage"

    constroctor(public storage:Storage){}

    this.storage.get('Id').then(()=>{})

```

*ionic2/3 imagepicker*

```

import {ImagePicker} from "ionic-native"

ImagePicker.getPictures().then((result)=>{

    for(var i=0;i

        this.user.head = result[i]

    }

})

```

ionic2/3  图标

```

ionic resources --icon      192*192

ionic resources --splash    2208*2208

cordova pluign add cordova-plugin-splashscreen      生成 config中的 A/I

```

*ionic3下拉刷新*

```

     

          pullingIcon="arrow-down"    下拉之前的样式

          pullingText="下拉刷新"

          refreshingSpinner="circle"  下拉之后的样式

          refreshingText="数据加载中" >

     

doRefresher(refresher){

  refresher.complete()  加载完成

}

```

ionic 2的http请求

```

import {Http} from "angular2/http"

static get parameters(){

  return [[Http]]

}

constroctor(http){

    this.http = http

}

this.http.get('url').subscribe((data)=>{

},error=>{})

```

ionic 3 请求

```

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpProvider {

  path: string = 'https://randomuser.me/api/?results=25';

  constructor(public http: Http) {

    console.log('Hello HttpProvider Provider');

  }

  loadUsers(){

    return this.http.get(this.path).map(res => res.json(), err => {

      console.log(err);

    })

  }

}

```