1環(huán)境搭建

一年前研究混合框架，初步確定了四種方案給公司選擇，ionic，hbuilder，wex5,React-native這四個框架各有優(yōu)缺點，ionic和react－native是國外框架，相對好一點，文檔更新很快，就不一一說了，大概的思路都是一樣的，js邏輯實現(xiàn)，同時調(diào)用原生功能，h5，CSS3 UI實現(xiàn)，其實他們都有自己的ui框架，當(dāng)時選擇了國內(nèi)的hbuiler，開發(fā)了三款應(yīng)用，iOS和Android都有，今天同樣公司發(fā)展的改變，整體框架都變了，ionic2框架重新提上了方案，決定用ionic2開發(fā)hybird應(yīng)用(具體原因你猜)，后續(xù)會有系列的博客分享。

安裝ionic最新版本

ionic官網(wǎng)地址：http://

1.準備工作

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

Ionic 2 程序主要通過Ionic命令行工具 CLI 來創(chuàng)建和開發(fā)，并使用 Cordova 來構(gòu)建和部署為原生應(yīng)用程序。也就是說我們需要先安裝一些工具來實現(xiàn)程序開發(fā)

要創(chuàng)建 Ionic 2 項目，你需要安裝最新版本的 CLI 和 Cordova 。在此之前你需要安裝最新版本的 Node.js 。點這里 下載安裝 Node.js ，然后繼續(xù)安裝 Ionic CLI 和 Cordova 來進行應(yīng)用程序開發(fā)：

命令前面可能需要添加 sudo 提權(quán)來進行全局安裝。

安裝 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

展現(xiàn)ionic項目結(jié)果（顯示在iOS和Android上的樣式）

ionic serve –lab

創(chuàng)建項目

ionicstart myApp blank（空項目） 

ionicstart myApp tabs（帶導(dǎo)航條） 

ionicstart myApp sidemenu（帶側(cè)滑菜單）

添加android/ios平臺

ionicplatform add android/ios（添加android平臺/ios） 

ionicplatform remove android/ios（移除android平臺/ios） 

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

ionicemulate android/ios（運行項目apk 手機連接在手機運行 模擬器連接在模擬器運行） 

生成android／ipa安裝包(生成后apk／ipa的存放路徑在終端種可以看到)

ionic build android/ios

ionicrun android/ios （相當(dāng)于build + emulate） 

ionicserve （開啟服務(wù)調(diào)試） 

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

ionic serv --address 68.52.96.10

使用設(shè)備運行應(yīng)用，如果無設(shè)備可用將自動使用模擬器

ionic run ios [options]

//options的選項包括：

-l livereload， 實時刷新變化。

-c 打印app里的console

-s 打印設(shè)備的console

-p 指定設(shè)備的端口

-i 指定livereload的重刷端口

--debug|--release

//當(dāng)處于livereload模式時，使用r重啟客戶端，使用 g your_url 跳轉(zhuǎn)到指定url， 使用c啟動或關(guān)閉console，使用s啟動或關(guān)閉設(shè)備的console， 使用q退出。

//查看系統(tǒng)情況

ionic info

安卓自帶瀏覽器性能不好，可以強行安裝一個殼，這將安裝一個Chromium內(nèi)核。

ionic browser add crosswalk

查看可用的browser

ionic browser list

刪除安裝的browser

ionic browser revert android

2 項目目錄分析

安裝完成后來創(chuàng)建你的第一個 Ionic 應(yīng)用：

ionic start MenuDemo sidemenu --v2

MenuDemo可以替換成你的應(yīng)用程序名稱。 --v2 表示當(dāng)前生成的是 Ionic 2 版本的應(yīng)用，不添加則生成 Ionic 1 應(yīng)用。

創(chuàng)建完成后 cd 到你的程序目錄中，執(zhí)行 ionic serve 來啟動你的Ionic應(yīng)用，并確保測試在瀏覽器中能夠正常顯示：

cd MenuDemo

ionic serve

瀏覽器運行起來是這樣的

項目結(jié)構(gòu)

讓我們來剖析一下Ionic 2應(yīng)用，在我們創(chuàng)建的文件夾中，我們可以看到一個典型的Cordova項目結(jié)構(gòu)。我們可以在其中安裝原生插件，并創(chuàng)建平臺特定的項目文件。

src/index.html

是 Ionic 2 應(yīng)用的主入口文件，其目的是設(shè)置腳本和CSS引導(dǎo)，然后開始運行我們的應(yīng)用程序。 我們不會在這個文件中花費大量的時間。

為了讓應(yīng)用正常運作，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應(yīng)用的需求文件，我們在開發(fā)過程中這個文件將會提示404錯誤，這不需要擔(dān)心。Cordova將會在構(gòu)建過程中自動注入這個文件。

·  build/polyfills.js 是在構(gòu)建過程中自動生成的，我們不需要過多關(guān)注。

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

./src/app/app.component.ts

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

app.component.ts 是應(yīng)用的入口文件。

在文件中我們能夠看到這樣的結(jié)構(gòu)：

@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  constructor(

  )

}

每個應(yīng)用程序都有一個根組件，用于控制應(yīng)用程序的其余部分。這跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的啟動配置被放倒了app.module.ts 文件中。

在這個組件中，我們設(shè)置了模版文件 app.html，下面我們來看一下這個文件。

./src/app/app.html

app.html 里是我們應(yīng)用的主模版：

<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>

在這個模板中，我們設(shè)置了一個 ion-menu 作為側(cè)面菜單，然后一個 ion-nav 組件作為主要內(nèi)容區(qū)域。 ion-menu 菜單的 [content] 屬性綁定到了我們 ion-nav 的本地變量 content 上。所以我們知道哪里會發(fā)生動作變化。

接下來，我們來看看如何創(chuàng)建更多頁面并執(zhí)行基本的導(dǎo)航。

添加頁面

現(xiàn)在我們對Ionic 2應(yīng)用的布局有一個基本的掌握，讓我們來了解一下在應(yīng)用中創(chuàng)建和導(dǎo)航到頁面的過程。

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

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

注意 [root] 屬性綁定。 這本質(zhì)上是設(shè)置了ion-nav組件的“root”頁面。 當(dāng)ion-nav加載時，變量 rootPage 引用的組件將是根頁面。

在 app.component.ts 中， MyApp 組件在其構(gòu)造函數(shù)中指定：

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設(shè)置成了 Page1，所以 Page1將是在nav控制器中加載的第一個頁面。

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

創(chuàng)建一個頁面

接下來，讓我們看看我們正在導(dǎo)入的 Page1。在 src/ pages/page1/page1 文件夾中，找到并打開 page1.ts 。

你可能已經(jīng)注意到每個頁面都有自己的文件夾，該文件夾以頁面命名。 在每個文件夾內(nèi)，我們還可以看到一個.html和一個.scss同名文件。 例如，在 page1 / 我們將找到 page1.ts ， page1 html 和 page1.scss 。 雖然使用這種模式不是必需的，但它可以有助于保持項目的組織結(jié)構(gòu)。

然后我們找到 page1類，在創(chuàng)建的頁面中提供了一個Angular組件和已經(jīng)使用Ionic的導(dǎo)航系統(tǒng)加載的所有Ionic指令。注意，如果頁面是動態(tài)加載的，那么它們沒有選擇器（ 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)  
 }
}

所有的頁面都會有一個類和一個關(guān)聯(lián)的模版。讓我們再看一下 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:///docs/v2">docs</a> will show you the way.
  </p>

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

<ion-navbar>是這個頁面中導(dǎo)航欄的模版。當(dāng)我們導(dǎo)航到這個頁面，導(dǎo)航欄的按鈕和標題作為頁面轉(zhuǎn)換的一部分進行過渡。

模板的其余部分是標準的Ionic代碼，用于設(shè)置我們的內(nèi)容區(qū)域并輸出我們的歡迎信息。

創(chuàng)建其他頁面

要創(chuàng)建一個其他的頁面，我們不需要太多的事情，只要確保配置標題和我們期望在導(dǎo)航欄顯示的東西即可。

讓我們來看一下 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
    });
  }
}

此頁面將創(chuàng)建一個包含多個項目的基本列表頁面。

總的來說，這個頁面和我們之前看到的 Page1非常相似。在下一節(jié)中，我們將學(xué)習(xí)如何導(dǎo)航到新頁面！

導(dǎo)航到頁面

回想上一部分我們在 Page2類中有一個函數(shù)，看起來像這樣：

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

你可能已經(jīng)注意到我們引用了一個page2。自己跳到自己，這是一個包含在教程啟動器中的頁面。

保存好之后。你會發(fā)現(xiàn) ionic serve將重新編譯應(yīng)用程序并刷新瀏覽器，你的修改將會出現(xiàn)在程序中。讓我們在瀏覽器中重新訪問我們的應(yīng)用程序，當(dāng)我們點擊一個項目，它將導(dǎo)航到項目詳細信息頁面！請注意，菜單切換按鈕將被替換為后退按鈕。這是Ionic遵循的原生風(fēng)格，但可以按需配置。

工作原理

Ionic 2導(dǎo)航的工作原理就像一個簡單的堆棧，我們通過push將一個頁面推到堆棧的頂端，這會讓我們的應(yīng)用前進一步并顯示一個返回按鈕。反之，我們也可以pop掉一個頁面。因為我們在構(gòu)造函數(shù)中設(shè)置了this.navCtrl，我們可以調(diào)用this.navCtrl.push() ,并傳遞我們要導(dǎo)航到的頁面。我們還可以傳遞一個數(shù)據(jù)對象給我們想要導(dǎo)航到的頁面。使用push導(dǎo)航到新頁面很簡單，而且Ionic的導(dǎo)航系統(tǒng)非常的靈活。你可以查看導(dǎo)航文檔 找到更多高級導(dǎo)航示例。

當(dāng)涉及到URL，Ionic 2的工作方式有點不同于Ionic 1。不使用URL導(dǎo)航，可以確保我們可以總是回到一個頁面（例如應(yīng)用程序啟動）。這意味著我們不只是限于使用href來導(dǎo)航。無論怎樣，我們?nèi)匀豢梢赃x擇在必要時使用網(wǎng)址導(dǎo)航到某個網(wǎng)頁。

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

·   掌握Angular2的基本原理和開發(fā)思路。

·   熟悉Ionic 2的所有Components和API。

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