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"  
在主页面引入跳转的页面  并且对navPush的值赋值为跳转页面
定义userInfo的数据       在详情页面获取值的方法是   this.navParams.data.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<result.length;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下拉刷新

<ion-refresher (ionRefresh)="doRefresher($event)">
      <ion-refresher-content
           pullingIcon="arrow-down"    下拉之前的样式
           pullingText="下拉刷新" 
           refreshingSpinner="circle"   下拉之后的样式
           refreshingText="数据加载中" >
       </ion-refresher-content>
</ion-refresher>

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

}

时间插件
ionic3

<ion-datetime displayFormat="YYYY/MM/DD" min="2012" max="2018-12-22"></ion-datetime>
displayFormat 日期格式      min  最小日期    max 最大日期

进度条
ionic3

<ion-range pin=true min="1" max="100" step="10" snaps="true"></ion-range>
pin 用户在控制滑动的时候是否显示字     min 最小值     max 最大值  step 步数  snaps 在范围上标刻度

去掉返回键

<ion-navbar hideBackButton="true">

ionic3 在渲染数据得时候 如果害怕数据为空的时候报错 一般做法是{{item?title}} 在itenm后面添加？