ionic3 教程（一）安裝和配置

連接：
ionic3 教程（一）安裝和配置
ionic3 教程（二）登陸頁製做
ionic3 教程（三）設置頁製做
ionic3 教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網絡請求

內容已跟進到 ionic3.5.0 最新版本

學習本教程前你須要瞭解如下內容：

• 前端基本知識（HTML五、JavaScript、CSS）
• TypeScript
• Angular

TypeScript的話至少須要瞭解基本語法，能夠看看
TS 中文官方文檔

對 Angular 不太熟悉的能夠點這裏：
Angular 4.0 架構詳解
Angular 4.0 內置指令全攻略

什麼是 ionic？他和 Cordova、Angular2 有什麼聯繫？

ionic = Cordova + Angular + ionic CSS
Cordova 提供了使用 JavaScript 調用 Native 功能，ionic CSS 是一套 UI 框架，ionic 對 Angular 進行了封裝。

ionic3

ionic 基於 AngularJS 開發。因爲 AngularJS1.x 版本在性能上已經很難有較大提高，Google 推出了全新設計的 Angular 2，ionic 也對應着出了2。

ionic2 與一代相比有較大的變化，基於最新的 Angular 2 ，使用 TypeScript 進行開發，若是您沒有接觸過 AngularJS 或 Ionic1.x，徹底不用擔憂，直接從 ionic2 開始學習便可。

ionic3 是 Angular4.0 推出以後的跟進版本，變化幅度不大。

安裝和運行

若是沒有安裝過 Node.js，先去官網下載一下。

// 安裝（失敗的話 Mac 嘗試使用 sudo，Windows 嘗試管理員身份運行 cmd）
$ npm install -g cordova ionic
// 安裝後能夠驗證一下 ionic cli 版本
$ ionic -version
3.5.0

// 建立應用
// cd 到要建立項目的目錄，輸入如下內容建立ionic項目
// ionic3Demo 是項目名，tabs是模板（默認是tabs，其餘還有blank的單頁等）
$ ionic start ionic3Demo tabs

// 安裝依賴
// 會生成一個 node_modules 文件夾，並在裏面安裝 package.json 上寫下的文件
$ cd ionic3Demo/
$ npm install

// 在瀏覽器中運行項目
$ ionic serve
複製代碼

有的朋友可能對 cli 不太熟悉，簡單說兩句。 -g 表明全局安裝、install 能夠簡寫爲 i、-version 能夠簡寫爲 -v 剩下的還有 --save、--dev 等，想要了解更多能夠參考官方文檔 http://ionicframework.com/docs/cli/

如圖：

在web上運行 iOS、Android、WindowsPhone 項目

把瀏覽器中的地址改成：
http://localhost:8100/ionic-lab
複製代碼

不喜歡使用命令行的朋友，能夠試一試 ionic lab，他是桌面版的開發環境。不過我沒有嘗試過，感興趣的能夠下載看看。 下載地址：http://lab.ionic.io

// 若是須要在手機運行，則執行如下命令
// 添加iOS項目
$ ionic platform add ios
// 把src裏的內容同步到ios項目中(src後面會講到)
$ ionic cordova build ios
// 運行iOS項目,至關於在Xcode裏面按Command+R
$ ionic cordova emulate ios

//安卓的話同理，把ios替換爲android便可
$ ionic platform add android
$ ionic cordova build android
$ ionic cordova emulate android
複製代碼

成功後目錄結構以下，platform 裏面是你添加的 iOS 和 Android 項目。

src 就是之後開發寫代碼主要的地方。每次寫完要同步到手機項目中，須要使用

$ ionic cordova build ios
$ ionic platform add android
複製代碼

同步到 iOS 和 Android 平臺裏。

Tabs 分析

打開 app.component.ts 能夠看到這句代碼

rootPage:any = TabsPage;
複製代碼

這個至關於 iOS 的 rootViewController 和 Android 的 MainActivity。

回憶一下咱們一開始選擇的 Tabs 模板，因此這裏生成的是 tabs。打開 src/pages/tabs/tabs.ts，能夠看到這些代碼：

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

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}
複製代碼

這個 TabsPage，就表明了應用最下面的三個 TabBar。上面分別指出了他們的路徑。

Ionic 3 的導航和 iOS 同樣是一個棧，push 到新界面，pop 回舊界面。咱們在構造函數中設置了 this.navCtrl 屬性，咱們能夠調用 this.navCtrl.push() 方法，來導航到一個新的頁面。

好了，這一節內容就到這裏。

補充

最近有不少朋友私信問我，如何升級 ionic 版本和 ionic cli 版本，也搞不清楚這兩個東西的區別和聯繫，這裏統一進行解釋。

ionic 版本是 package.json 中的 ionic-angular。

// 升級方法：
// 修改 ionic-angular 的版本號，並在項目目錄下執行如下命令
npm install 
複製代碼

ionic cli 版本是一套 ionic 的命令行界面，用於執行各類命令行的命令。

// 升級方法：
// 在任意目錄下，執行如下命令
npm install -g ionic@lastest
複製代碼