Ionic2環境搭建及文件目錄介紹

[注]轉載自：http://blog.csdn.net/jasonzds/article/details/53821184

1環境搭建

一年前研究混合框架，初步肯定了四種方案給公司選擇，ionic，hbuilder，wex5,react-native這四個框架各有優缺點，ionic和react－native是國外框架，相對好一點，文檔更新很快，就不一一說了，大概的思路都是同樣的，js邏輯實現，同時調用原生功能，h5，css3 UI實現，其實他們都有本身的ui框架，當時選擇了國內的hbuiler，開發了三款應用，iOS和Android都有，今天一樣公司發展的改變，總體框架都變了，ionic2框架從新提上了方案，決定用ionic2開發hybird應用(具體緣由你猜)，後續會有系列的博客分享。

 

安裝ionic最新版本

ionic官網地址：http://ionicframework.com

1.準備工做

下載 Node.js（下載包），WebStorm（IDE，編寫代碼，瀏覽器調試）,JDK（webstorm 運行環境），Android SDK(Android編譯)

Ionic 2 程序主要經過Ionic命令行工具 CLI 來建立和開發，並使用 Cordova 來構建和部署爲原生應用程序。也就是說咱們須要先安裝一些工具來實現程序開發

要建立 Ionic 2 項目，你須要安裝最新版本的 CLI 和 Cordova 。在此以前你須要安裝最新版本的 Node.js 。點這裏 下載安裝 Node.js ，而後繼續安裝 Ionic CLI 和 Cordova 來進行應用程序開發：

命令前面可能須要添加 sudo 提權來進行全局安裝。

安裝 Ionic

npm install -g ionic

 

安裝 Cordova

npm install -g cordova

 

查看ionic版本

ionic –v

 

查看cordova版本

cordova –v

 

更新ionic和cordova包

npm update -g cordova ionic

 

更新已建ionic項目中的js類庫，命令行中先進入項目所在目錄

ionic lib update

 

展示ionic項目結果（顯示在iOS和Android上的樣式）

ionic serve –lab

 

建立項目

ionic start myApp blank（空項目） 

ionic start myApp tabs（帶導航條） 

ionic start myApp sidemenu（帶側滑菜單）

 

添加android/ios平臺

ionic platform add android/ios（添加android平臺/ios） 

ionic platform remove android/ios（移除android平臺/ios） 

ionic build android/ios（編譯項目apk,ipa）

ionic emulate android/ios（運行項目apk 手機鏈接在手機運行 模擬器鏈接在模擬器運行） 

 

生成android／ipa安裝包(生成後apk／ipa的存放路徑在終端種能夠看到)

ionic build android/ios

 

ionicrun android/ios （至關於build + emulate） 

ionicserve （開啓服務調試） 

 

指明一個外部的ip地址，可讓外部用戶查看。

ionic serv --address 68.52.96.10

 

使用設備運行應用，若是無設備可用將自動使用模擬器

ionic run ios [options]

//options的選項包括：

-l livereload， 實時刷新變化。

-c 打印app裏的console

-s 打印設備的console

-p 指定設備的端口

-i 指定livereload的重刷端口

--debug|--release

//當處於livereload模式時，使用r重啓客戶端，使用 g your_url 跳轉到指定url， 使用c啓動或關閉console，使用s啓動或關閉設備的console， 使用q退出。

 

//查看系統狀況

ionic info

 

安卓自帶瀏覽器性能很差，能夠強行安裝一個殼，這將安裝一個Chromium內核。

ionic browser add crosswalk

 

查看可用的browser

ionic browser list

 

刪除安裝的browser

ionic browser revert android

2 項目目錄分析

安裝完成後來建立你的第一個 Ionic 應用：

ionic start MenuDemo sidemenu --v2

MenuDemo能夠替換成你的應用程序名稱。 --v2 表示當前生成的是 Ionic 2 版本的應用，不添加則生成 Ionic 1 應用。

建立完成後 cd 到你的程序目錄中，執行 ionic serve 來啓動你的Ionic應用，並確保測試在瀏覽器中可以正常顯示：

cd MenuDemo

ionic serve

瀏覽器運行起來是這樣的

 

 

 

 

 

 

 

 

 

 

 

 

 

 

項目結構

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

讓咱們來剖析一下Ionic 2應用，在咱們建立的文件夾中，咱們能夠看到一個典型的Cordova項目結構。咱們能夠在其中安裝原生插件，並建立平臺特定的項目文件。

src/index.html

是 Ionic 2 應用的主入口文件，其目的是設置腳本和CSS引導，而後開始運行咱們的應用程序。 咱們不會在這個文件中花費大量的時間。

爲了讓應用正常運做，Ionic 2 會在HTML中尋找 <ion-app> 標記。 在這個例子中，咱們有：

<ion-app></ion-app>

而且在下方咱們還能看到這樣的腳本引用：

<script src="cordova.js"></script>

  <script src="build/polyfills.js"></script>

  <script src="build/main.js"></script>

•  cordova.js 是Cordova應用的需求文件，咱們在開發過程當中這個文件將會提示404錯誤，這不須要擔憂。Cordova將會在構建過程當中自動注入這個文件。

•  build/polyfills.js 是在構建過程當中自動生成的，咱們不須要過多關注。

build/main.js 是一個包含了Ionic, Angular和你的JS腳本的文件。

 

./src/app/app.component.ts

在 app 文件夾中能找到咱們的預編譯代碼。這是Ionic 2應用程序的大部分工做起始的地方。當咱們運行 ionic serve 時， app 中的代碼將被編譯成當前瀏覽器可以執行的JavaScript版本（當前是ES5）。也就是說咱們可使用TypeScript或更高級別的 ES6+ 進行開發，而在編譯時會自動降級爲瀏覽器可識別的版本。

app.component.ts 是應用的入口文件。

在文件中咱們可以看到這樣的結構：

@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  constructor(

  )

}

每一個應用程序都有一個根組件，用於控制應用程序的其他部分。這跟Ionic 1和Angular 1中的 ng-app 很是類似。原先的啓動配置被放倒了app.module.ts 文件中。

在這個組件中，咱們設置了模版文件 app.html，下面咱們來看一下這個文件。

./src/app/app.html

app.html 裏是咱們應用的主模版：

<ion-menu [content]="content">   <ion-header>     <ion-toolbar>       <ion-title>Menu</ion-title>     </ion-toolbar>   </ion-header>
  <ion-content>     <ion-list>       <button menuClose ion-item*ngFor="let p of pages" (click)="openPage(p)">         {{p.title}}       </button>     </ion-list>   </ion-content> </ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with sidemenus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

 

在這個模板中，咱們設置了一個 ion-menu 做爲側面菜單，而後一個 ion-nav 組件做爲主要內容區域。 ion-menu 菜單的 [content] 屬性綁定到了咱們 ion-nav 的本地變量 content 上。因此咱們知道哪裏會發生動做變化。

接下來，咱們來看看如何建立更多頁面並執行基本的導航。

添加頁面

如今咱們對Ionic 2應用的佈局有一個基本的掌握，讓咱們來了解一下在應用中建立和導航到頁面的過程。

讓咱們看一下 app.html 頁面的底部：

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

注意 [root] 屬性綁定。 這本質上是設置了ion-nav組件的「root」頁面。 當ion-nav加載時，變量 rootPage 引用的組件將是根頁面。

在 app.component.ts 中， MyApp 組件在其構造函數中指定：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];
  }
  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

咱們看到 rootPage設置成了 Page1，因此 Page1將是在nav控制器中加載的第一個頁面。

而page1指向的頁面是import { Page1 } from '../pages/page1/page1';

建立一個頁面

接下來，讓咱們看看咱們正在導入的 Page1。在 src/ pages/page1/page1 文件夾中，找到並打開 page1.ts 。

你可能已經注意到每一個頁面都有本身的文件夾，該文件夾以頁面命名。 在每一個文件夾內，咱們還能夠看到一個.html和一個.scss同名文件。 例如，在 page1 / 咱們將找到 page1.ts ， page1 html 和 page1.scss 。 雖然使用這種模式不是必需的，但它能夠有助於保持項目的組織結構。

而後咱們找到 page1類，在建立的頁面中提供了一個Angular組件和已經使用Ionic的導航系統加載的全部Ionic指令。注意，若是頁面是動態加載的，那麼它們沒有選擇器（ selector ）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {
  constructor(public navCtrl: NavController)  
 }
}

全部的頁面都會有一個類和一個關聯的模版。讓咱們再看一下 src/ pages/ page1/ page1.html ，這是一個模版頁面：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

<ion-navbar>是這個頁面中導航欄的模版。當咱們導航到這個頁面，導航欄的按鈕和標題做爲頁面轉換的一部分進行過渡。

模板的其他部分是標準的Ionic代碼，用於設置咱們的內容區域並輸出咱們的歡迎信息。

建立其餘頁面

要建立一個其餘的頁面，咱們不須要太多的事情，只要確保配置標題和咱們指望在導航欄顯示的東西便可。

讓咱們來看一下 src/pages/page2/ page2.ts。在這裏，你會看到一個新的頁面被定義：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2 {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
    // Let's populate this page with some filler content for funzies
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];

    this.items = [];
    for (let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }
  itemTapped(event, item) {
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(Page2, {
      item: item
    });
  }
}

此頁面將建立一個包含多個項目的基本列表頁面。

總的來講，這個頁面和咱們以前看到的 Page1很是類似。在下一節中，咱們將學習如何導航到新頁面！

導航到頁面

回想上一部分咱們在 Page2類中有一個函數，看起來像這樣：

itemTapped(event, item) {   // That's right, we're pushing toourselves!   this.navCtrl.push(Page2, {     item: item   }); }

你可能已經注意到咱們引用了一個page2。本身跳到本身，這是一個包含在教程啓動器中的頁面。

保存好以後。你會發現 ionic serve將從新編譯應用程序並刷新瀏覽器，你的修改將會出如今程序中。讓咱們在瀏覽器中從新訪問咱們的應用程序，當咱們點擊一個項目，它將導航到項目詳細信息頁面！請注意，菜單切換按鈕將被替換爲後退按鈕。這是Ionic遵循的原生風格，但能夠按需配置。

工做原理

Ionic 2導航的工做原理就像一個簡單的堆棧，咱們經過push將一個頁面推到堆棧的頂端，這會讓咱們的應用前進一步並顯示一個返回按鈕。反之，咱們也能夠pop掉一個頁面。由於咱們在構造函數中設置了this.navCtrl，咱們能夠調用this.navCtrl.push() ,並傳遞咱們要導航到的頁面。咱們還能夠傳遞一個數據對象給咱們想要導航到的頁面。使用push導航到新頁面很簡單，並且Ionic的導航系統很是的靈活。你能夠查看導航文檔找到更多高級導航示例。

當涉及到URL，Ionic 2的工做方式有點不一樣於Ionic 1。不使用URL導航，能夠確保咱們能夠老是回到一個頁面（例如應用程序啓動）。這意味着咱們不僅是限於使用href來導航。不管怎樣，咱們仍然能夠選擇在必要時使用網址導航到某個網頁。

•   建議熟悉一下TypeScript的基本語法和使用，包括@types使用和d.ts編寫。

•   掌握Angular2的基本原理和開發思路。

•   熟悉Ionic 2的全部Components和API。

  瞭解Cordova的使用方法和插件。