1.创建应用：

使用Ionic2创建应用非常简单，只需在V1的命令后跟上--v2即可，如下：

1 ionic start ionic2-welcome --v2

启动流浏览器,查看当前效果

1 ionic serve

2.创建Component

使用命令行创建页面或者自行在创建文件

1 ionic g page welcome

然后打开应用跟组件app.component.ts,导入组件,app.module.ts也一样并配置

1 import { WelcomePage } from '../pages/welcome/welcome';

3.创建模板文件welcome.html

1 
     
       2 
      
        3 
        4 
       5 
      
        6 
        7 
       8 
      
        9 
       10 
      11 
      
       12 
       
        13 
        
         14 
         15 
        16 
       17 
       
        18 
        
         19 
         立即启动20 
        21 
       22 
      23 
     

通过ionic自带的ion-slides可以很方便的创建一个欢迎页面

4.创建welcome.scss

1 ion-slide {2  3 }4 ion-slide img {5 height: 70vh !important;6 width: auto !important;7 }

5.创建welcome.ts

1 import { Component } from '@angular/core'; 2 import {NavController} from 'ionic-angular'; 3 import {HomePage} from '../home/home'; 4 @Component({ 5 templateUrl: 'welcome.html' 6 }) 7 export class WelcomePage { 8 constructor(public navCtr: NavController){ 9 }10 goToHome(){11 this.navCtr.setRoot(HomePage);12 }13 }

6.在根组件导入welcome组件，编辑app.moudle.ts

1 import { Component } from '@angular/core'; 2 import { Platform } from 'ionic-angular'; 3 import { StatusBar } from 'ionic-native'; 4 import { HomePage } from '../pages/home/home'; 5 import { WelcomePage } from '../pages/welcome/welcome'; 6 import { Storage } from '@ionic/storage'; 7 @Component({ 8 template: `
     `, 9 })10 export class MyApp {11 rootPage: any;12 constructor(platform: Platform, public storage: Storage) {13 this.storage.get('firstIn').then((result) => {14 if(result){15 this.rootPage = HomePage;16 }17 else{18 this.storage.set('firstIn', true);19 this.rootPage = WelcomePage;20 }21 }22 );23 platform.ready().then(() => {24 // Okay, so the platform is ready and our plugins are available.25 // Here you can do any higher level native things you might need.26 StatusBar.styleDefault();27 });28 }29 }

这里判断是否是第一次开启app采用的是native的storage组件，第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页，注意ionic2开始storage默认使用的是IndexedDB，而不是LocalStorage

这一篇是我网上找到的，因为希望方便我自己查看所有写出来在博客。