1環(huán)境搭建

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

安裝ionic最新版本

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

1.準(zhǔn)備工作

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

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

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

命令前面可能需要添加 sudo 提權(quán)來進(jì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項(xiàng)目中的js類庫，命令行中先進(jìn)入項(xiàng)目所在目錄

ionic lib update

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

ionic serve –lab

創(chuàng)建項(xiàng)目

ionicstart myApp blank（空項(xiàng)目） 

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（編譯項(xiàng)目apk,ipa）

ionicemulate android/ios（運(yùn)行項(xiàng)目apk 手機(jī)連接在手機(jī)運(yùn)行 模擬器連接在模擬器運(yùn)行） 

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

ionic build android/ios

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

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

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

ionic serv --address 68.52.96.10

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

ionic run ios [options]

//options的選項(xiàng)包括：

-l livereload， 實(shí)時(shí)刷新變化。

-c 打印app里的console

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

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

-i 指定livereload的重刷端口

--debug|--release

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

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

ionic info

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

ionic browser add crosswalk

查看可用的browser

ionic browser list

刪除安裝的browser

ionic browser revert android

2 項(xiàng)目目錄分析

安裝完成后來創(chuàng)建你的第一個(gè) 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 來啟動(dòng)你的Ionic應(yīng)用，并確保測試在瀏覽器中能夠正常顯示：

cd MenuDemo

ionic serve

瀏覽器運(yùn)行起來是這樣的

項(xiàng)目結(jié)構(gòu)

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

src/index.html

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

為了讓應(yīng)用正常運(yùn)作，Ionic 2 會在HTML中尋找 <ion-app> 標(biāo)記。 在這個(gè)例子中，我們有：

<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ā)過程中這個(gè)文件將會提示404錯(cuò)誤，這不需要擔(dān)心。Cordova將會在構(gòu)建過程中自動(dòng)注入這個(gè)文件。

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

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

./src/app/app.component.ts

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

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

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

@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  constructor(

  )

}

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

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

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

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

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

添加頁面

現(xiàn)在我們對Ionic 2應(yīng)用的布局有一個(gè)基本的掌握，讓我們來了解一下在應(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加載時(shí)，變量 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控制器中加載的第一個(gè)頁面。

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

創(chuàng)建一個(gè)頁面

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

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

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

所有的頁面都會有一個(gè)類和一個(gè)關(guān)聯(lián)的模版。讓我們再看一下 src/ pages/ page1/ page1.html ，這是一個(gè)模版頁面：

<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>是這個(gè)頁面中導(dǎo)航欄的模版。當(dāng)我們導(dǎo)航到這個(gè)頁面，導(dǎo)航欄的按鈕和標(biāo)題作為頁面轉(zhuǎn)換的一部分進(jìn)行過渡。

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

創(chuàng)建其他頁面

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

讓我們來看一下 src/pages/page2/ page2.ts。在這里，你會看到一個(gè)新的頁面被定義：

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)建一個(gè)包含多個(gè)項(xiàng)目的基本列表頁面。

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

導(dǎo)航到頁面

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

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

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

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

工作原理

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

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

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

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

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

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