Ionic - 環境搭建

---

---

本章將向您展示如何開始使用 Ionic 框架。下表包含開始使用 Ionic 所需的元件列表。

安裝 Cordova 和 Ionic

在本教程中，我們將使用 Windows 命令提示符。相同的步驟可以應用於 OSX 終端。開啟您的命令視窗以安裝 Cordova 和 Ionic：

C:\Users\Username> npm install -g cordova ionic

建立應用程式

在 Ionic 中建立應用程式時，您可以從以下三個選項中選擇：

• 標籤頁應用程式
• 空白應用程式
• 側邊選單應用程式

在您的命令視窗中，開啟您要建立應用程式的資料夾，然後嘗試以下選項之一。

標籤頁應用程式

如果您要使用 Ionic 標籤頁模板，則該應用程式將使用標籤選單、頁首和一些有用的螢幕和功能構建。這是預設的 Ionic 模板。開啟您的命令視窗並選擇您要建立應用程式的位置。

C:\Users\Username> cd Desktop

此命令將更改工作目錄。該應用程式將在桌面上建立。

C:\Users\Username\Desktop> ionic start myApp tabs

Ionic **Start** 命令將建立一個名為 **myApp** 的資料夾並設定 Ionic 檔案和資料夾。

C:\Users\Username\Desktop> cd myApp

現在，我們要訪問我們剛剛建立的 **myApp** 資料夾。這是我們的根資料夾。

現在，讓我們為 Android 平臺新增 Cordova 專案並安裝基本的 Cordova 外掛。以下程式碼允許我們在 Android 模擬器或裝置上執行應用程式。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是構建應用程式。如果您在執行以下命令後遇到構建錯誤，則可能沒有安裝 Android SDK 及其依賴項。

C:\Users\Username\Desktop\myApp> ionic build android

安裝過程的最後一步是執行您的應用程式，這將啟動連線的移動裝置，或者如果沒有連線裝置，則啟動預設模擬器。Android 預設模擬器速度很慢，因此我建議您安裝 Genymotion 或其他流行的 Android 模擬器。

C:\Users\Username\Desktop\myApp> ionic run android

這將產生以下結果，這是一個 Ionic 標籤頁應用程式。

空白應用程式

如果您想從頭開始，您可以安裝 Ionic 空白模板。我們將使用上面解釋的相同步驟，使用 **ionic start myApp blank** 代替 **ionic start myApp tabs**，如下所示。

C:\Users\Username\Desktop> ionic start myApp blank

Ionic **Start** 命令將建立一個名為 **myApp** 的資料夾並設定 Ionic 檔案和資料夾。

C:\Users\Username\Desktop> cd myApp

讓我們為 Android 平臺新增 Cordova 專案並安裝如上所述的基本 Cordova 外掛。

C:\Users\Username\Desktop\myApp>ionic platform add android

下一步是構建我們的應用程式：

C:\Users\Username\Desktop\myApp> ionic build android

最後，我們將使用以下程式碼啟動應用程式：

C:\Users\Username\Desktop\myApp> ionic run android

這將產生以下結果，這是一個 Ionic 空白應用程式。

側邊選單應用程式

您可以使用的第三個模板是側邊選單模板。步驟與前兩個模板相同；我們只需在啟動應用程式時新增 **sidemenu**，如下面的程式碼所示。

C:\Users\Username\Desktop> ionic start myApp sidemenu

Ionic **Start** 命令將建立一個名為 **myApp** 的資料夾並設定 Ionic 檔案和資料夾。

C:\Users\Username\Desktop> cd myApp

讓我們使用以下程式碼為 Android 平臺新增 Cordova 專案並安裝基本的 Cordova 外掛。

C:\Users\Username\Desktop\myApp> ionic platform add android

下一步是使用以下程式碼構建我們的應用程式。

C:\Users\Username\Desktop\myApp> ionic build android

最後，我們將使用以下程式碼啟動應用程式。

C:\Users\Username\Desktop\myApp> ionic run android

這將產生以下結果，這是一個 Ionic 側邊選單應用程式。

在瀏覽器中測試應用程式

由於我們使用的是 JavaScript，因此您可以在任何 Web 瀏覽器中執行您的應用程式。這將加快您的構建過程，但您應始終在原生模擬器和裝置上測試您的應用程式。鍵入以下程式碼以在 Web 瀏覽器中執行您的應用程式。

C:\Users\Username\Desktop\myApp> ionic serve

上述命令將在 Web 瀏覽器中開啟您的應用程式。Google Chrome 提供了用於移動開發測試的裝置模式功能。按 **F12** 訪問開發者控制檯。

控制檯視窗左上角的單擊具有“切換裝置模式”圖示。下一步是單擊右上角的“停靠到右側”圖示。重新整理頁面後，您應該準備好進行 Web 瀏覽器測試。

專案資料夾結構

Ionic 為所有型別的應用程式建立以下目錄結構。對於任何 Ionic 開發人員來說，瞭解每個目錄和下面提到的檔案的用途非常重要：

讓我們快速瞭解上圖所示專案資料夾結構中所有資料夾和檔案。

• **Hooks** - Hooks 是可以在構建過程中觸發的指令碼。它們通常用於 Cordova 命令自定義和構建自動化流程。在本教程中，我們不會使用此資料夾。

• **Platforms** - 這是建立 Android 和 IOS 專案的資料夾。在開發過程中，您可能會遇到一些平臺特定問題，這將需要這些檔案，但大多數情況下，您應該保持它們不變。

• **Plugins** - 此資料夾包含 Cordova 外掛。當您最初建立 Ionic 應用程式時，將安裝一些外掛。我們將在後續章節中向您展示如何安裝 Cordova 外掛。

• **Resources** - 此資料夾用於向您的專案新增資源，例如圖示和啟動畫面。

• **Scss** - 由於 Ionic 核心是用 Sass 構建的，因此這是您的 Sass 檔案所在的資料夾。為了簡化流程，在本教程中我們不會使用 Sass。我們的樣式將使用 CSS 完成。

• **www** - www 是 Ionic 開發人員的主要工作資料夾。他們大部分時間都在這裡工作。Ionic 為我們在 'www' 內提供了他們的預設資料夾結構，但開發人員始終可以更改它以適應他們自己的需求。開啟此資料夾時，您將找到以下子資料夾：

  • **css** 資料夾，您將在其中編寫 CSS 樣式。

  • **img** 資料夾用於儲存影像。

  • **js** 資料夾包含應用程式的主要配置檔案 (app.js) 和 AngularJS 元件（控制器、服務、指令）。所有 JavaScript 程式碼都將位於這些資料夾中。

  • **libs** 資料夾，您的庫將放置在此處。

  • **templates** 資料夾用於您的 HTML 檔案。

  • **index.html** 作為應用程式的起點。

• **其他檔案** - 由於這是一個初學者教程，我們只提及一些其他重要檔案及其用途。

  • **.bowerrc** 是 bower 配置檔案。

  • **.editorconfig** 是編輯器配置檔案。

  • **.gitignore** 用於指示在您要將應用程式推送到 Git 儲存庫時應忽略應用程式的哪個部分。

  • **bower.json** 將包含 bower 元件和依賴項（如果您選擇使用 bower 包管理器）。

  • **gulpfile.js** 用於使用 gulp 任務管理器建立自動化任務。

  • **config.xml** 是 Cordova 配置檔案。

  • **package.json** 包含有關應用程式、它們的依賴項以及使用 NPM 包管理器安裝的外掛的資訊。

在下一章中，我們將討論 Ionic 開源框架中可用的不同顏色。