Ionic建立混合App(二)

ionic 2 啓動應用進入歡迎引導頁

1.首先，使用CLI命令，建立引導頁面

ionic  g page welcome

 

2.需改welcome.html模板文件

<ion-slides pager>
 
  <ion-slide>
    <img src="assets/images/slide1.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="assets/images/slide2.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="assets/images/slide3.png" />
  </ion-slide>
 
  <ion-slide>
    <ion-row>
        <ion-col>
            <img src="assets/images/slide4.png" />
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <button light ion-button (click)="goToHome()">當即啓動</button>
        </ion-col>
    </ion-row>
  </ion-slide>
 
</ion-slides>

　　

3.修改welcome.scss樣式文件

ion-slide {
	background-color: #ffffff;
}

 

4.修改welcome.ts文件

 

5.安裝 Storage 插件——cordova-sqlite-storage ，具體用法參考官方文檔 http://ionicframework.com/docs/storage/；ionic2 默認的storage在手機上運行使用手機自己的SQLite存儲,運行Web應用時，storage將按照順序嘗試使用IndexedDB，WebSQL和localstorage

　　1> 安裝插件

ionic cordova plugin add cordova-sqlite-storage

　　2> 安裝軟件包

npm install --save @ionic/storage

 

6.項目根模塊導入

 

7.編輯項目 根組件

 

最終效果：