Ionic2入坑基礎教程和安裝指南

時間 2019-12-09

標籤 ionic2 ionic 基礎教程安裝指南简体版

原文原文鏈接

安裝Ionic

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

安裝Ionic CLI 和 Cordova

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

安裝 Ionichtml

npm install -g ionic

安裝 Cordovajava

npm install -g cordova

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

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

ionic start cutePuppyPics --v2

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

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

cd cutePuppyPics
ionic serve

平臺指南

對於那些爲iOS和Android構建原生應用程序（大多數人），每一個平臺都有必定的功能和安裝要求，才能充分利用Ionic和Cordova開發。npm

對於iOS開發人員，請查看Cordova iOS平臺指南，並按照說明安裝或升級Xcode，並註冊開發人員賬戶，開始爲iOS開發應用程序。flask

對於Android開發人員，請查看Cordova Android平臺指南，並按照說明安裝SDK或Android Studio，開始爲Android開發應用程序。

Ionic 2 基礎教程

確保完成以前的安裝並測試啓動成功。下面咱們將啓動新的應用程序，添加頁面，並在這些頁面之間導航等過程。讓咱們開始吧！

啓動一個新的Ionic 2應用

用start命令來建立一個新的Ionic 2應用。別忘了添加--v2來指定這是一個 Ionic 2 的應用程序。再添加一個tutorial參數，指定使用tutorial模版建立該應用。這樣一個基於TypeScript的Ionic 2應用就被成功建立了。

ionic start MyIonic2Project tutorial --v2

在這個過程當中將會下載 Ionic 2 庫包，安裝所需的npm模塊，併爲應用配置好Cordova。若是在建立時不指定tutorial參數，ionic默認使用 tabs模版來建立應用。

在瀏覽器中查看應用

如今你能夠cd到建立好的項目文件夾中，使用serve命令在瀏覽器中預覽你的應用。

cd MyIonic2Project/
ionic serve

若是成功啓動，你將看到上面這樣的歡迎界面。

項目結構

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

./src/index.html

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>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<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 { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
...

export class MyApp {
  ...
  
  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;

    constructor(
      public platform: Platform,
      public menu: MenuController
    ) {
    ...
  }

  ...
}

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

建立一個頁面

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

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

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

import { Component } from '@angular/core';


@Component({
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {

  }
}

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

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button ion-button color="primary" menuToggle>Toggle Menu</button>
  </p>

</ion-content>

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

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

建立其餘頁面

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

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

import { Component } from '@angular/core';

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

import { ItemDetailsPage } from '../item-details/item-details';


@Component({
  templateUrl: 'list.html'
})
export class ListPage {
  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');

    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) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }
}

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

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

導航到頁面

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

itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }

你可能已經注意到咱們引用了一個ItemDetailsPage。這是一個包含在教程啓動器中的頁面。咱們要在list.ts中導入它，咱們能夠這樣導入：

...
import { ItemDetailsPage } from '../item-details/item-details';
...

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

工做原理

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