Ionic 學習筆記

本文爲原創，轉載請註明出處： cnzt       文章：cnzt-p

http://www.cnblogs.com/zt-blog/p/7831153.html

 

注：

本篇學習筆記基於Ionic 3.18.0 版本。

官網： http://ionicframework.com/

 

正文：

新版的Ionic基於angular（gt 2.X），下面的截圖是Ionic tutorial項目的目錄結構。

 

 index.html -- 爲主入口html文件，主要包含<ion-app></ion-app>標籤，以及引入js,css文件。引入的文件最重要的兩個是：

　　<ion-app></ion-app>

　　......

　　<script src="cordova.js"></script> -- build時期纔會注入，本地開發時不存在此文件。

　　<script src="build/main.js"></script> -- 引入跟模塊，並啓動應用程序。

 

main.js -- 主入口js文件，引入跟模塊，並啓動應用程序。

 

src目錄 -- 存放源代碼，爲編譯的代碼。當運行ionic serve命令的時候，src目錄下的文件會被轉譯成瀏覽器能識別的ES5。

 

src/app/app.module.ts -- 定義根模塊；設置根組件；啓動app

　　@NgModule({ declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage], imports: [ BrowserModule, IonicModule.forRoot(MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage], providers: [] }) export class AppModule {}

 

src/app/app.component.ts -- 根組件，在根模塊中設置的。

 

src/app/app.html -- app.component引用的模板。

　　

 

　　模板裏用了一些Ionic組件： （menu和nev的關聯）

　　　　ion-menu: 定義了側邊欄菜單。  [content]="content"

　　　　ion-nav: 定義了對應的內容區域。 #content

　　ion-nav組件的[root]屬性指定本組件的第一個頁面rootPage。rootPage在app.component.ts有定義（指向src/pages/hello-ionic/hello-ionic.html）。

　　

src/pages/hello-ionic/hello-ionic.html -- rootPage 指定的頁面。

　　ion-navbar: 本頁面的導航欄，會跟隨頁面切換而變化。

 

導航（路由）相關：    （區別於angular以及ionic1.X的url路由方式）

　　1. import {NavController, NavParams} from 'ionic-angular';

　　

　　獲取參數： this.selectedItem = navParams.get('item');

　　導航：this.navCtrl.push(ItemDetailsPage /*組件名*/ , { item: item } /*參數*/);

 

　　導航可隨着頁面切換菜單/返回按鈕，這個是ionic風格的導航實現的，是可配置的。

　　導航工做原理是利用stack棧，push新page並顯示返回按鈕，點擊返回時，從棧頂pop一個page。

 

　　2. 根組件的導航： 根組件沒法依賴NavController，能夠經過ion-nav的引用建立一個nav實例進行導航。

　　　　@ViewChild(Nav) nav: Nav;

　　

　　　　nav .push(.......)

 

　　3. 此外，ion-tab也能夠綁定[root]來作路由，每一個ion-tab擁有本身的歷史棧，且每一個ion-tab對應的navController實例是惟一的。