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 <ion-slides pager> 2 <ion-slide> 3 <img src="images/slide1.png" /> 4 </ion-slide> 5 <ion-slide> 6 <img src="images/slide2.png" /> 7 </ion-slide> 8 <ion-slide> 9 <img src="images/slide3.png" /> 10 </ion-slide> 11 <ion-slide> 12 <ion-row> 13 <ion-col> 14 <img src="images/slide4.png" /> 15 </ion-col> 16 </ion-row> 17 <ion-row> 18 <ion-col> 19 <button light (click)="goToHome()">立即启动</button> 20 </ion-col> 21 </ion-row> 22 </ion-slide> 23 </ion-slides>
通过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: `<ion-nav [root]="rootPage"></ion-nav>`, 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
这一篇是我网上找到的，因为希望方便我自己查看所有写出来在博客。
