## 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); }) } } ```