手機 app 開發的幾種方式 ionic 學習思路以及 ionic 新建的項目分析

手機 app 開發的幾種方式 ionic 學習思路以及
ionic 新建的項目分析

學習要點：
1. 目前開發手機 app 的幾種方式
2. Ionic 學習思路簡介
3. Ionic CSS 框架
4. ionic js 指令 路由 其他 ui 交互效果
5. ionic 命令行/CLI 安裝 調試 打包（ 第三季 第一講已講）
6. ionic 開發包下載 以及命令創建的項目分析

1． 目前開發手機 app 的幾種方式
原生/Native： 使用原生 SDK 開發 App。優點不用說， 當你有足夠的資源，這是最理想的
方式；缺點是對不同的 平臺要分別開發， 學習成本高,開發成本高、 開發周期長、 不易于
web 開發人員和企業建站公司轉型
原生腳本/NativeScript： 將原生 API 封裝成 JavaScript 接口，這有點像前端的 nodejs。
NativeScript 方式 與原生相比性能損失不大（據稱只有 10%左右），優點是開發語言統一使
用 JavaScript， 缺點是 要針對不同的平臺分別開發。

原生+web/ Hybrid： 使用原生技術開發， 部分頁面調用 web。 優點是比純原生開發周期
短， 頁面更新方便， 如支付寶， 還有很多 app 的詳情頁面。 缺點： 需要原生和 web 配合。
混合/Hybrid： 使用 web 技術開發 App，使用 Cordova/PhoneGap 之類進行打包封裝。優
點是采用標準的 web 技術開發， 避免了不同平臺原生開發體系的學習， 學習成本低， 上手
快、 效率高,一次開發 微信 wap app 全部搞定；缺點是 app 在 android 平臺性能上有一些
損失， 但是相信硬件的發展會接近原生。

ionic屬于 hybrid開發模式，本質上是將移動 web應用與瀏覽器打包,優點 MVC 基于 angularjs

運行速度快 UI 漂亮 開發簡單 缺點：學習成本比其他的 html5 框架稍微高一些(比如 jqmobi)
需要具備 angularjs 基礎。 是否采用這種模式，需要根據具體情況綜合考慮。
不過在大多數場景下， 如果你已經具備一定的 web 開發經驗，采用這種方式進入移動 App
開發領域，還是不錯的一個選擇。 畢竟，將產品低成本地開發出來并更快地推向市場，有
時是最重要的事情。

2． Ionic 學習思路簡介
Ionic 簡介： ionic 是一個強大的混合式/hybridHTML5 移動開發框架，特點是使用標準的
HTML、 CSS 和 JavaScript，開發跨平臺（目前支持： Android、iOS，計劃支持： Windows Phone、
Firefox OS） 的原生 App 應用：

ionic 主要包括三個部分：
CSS框架 - 提供原生 App質感的 CSS樣式模擬。ionic這部分的實現使用了 ionicons
圖標樣式庫。
JavaScript 框架 - 提供移動 Web 應用開發框架。ionic 基于 AngularJS 基礎框架開
發，因此 自然地遵循 AngularJS 的框架約束；此外， ionic 使用 AngularJS UI Router
實現前端路由。
命令行/CLI - 命令行工具集用來簡化應用的開發、構造和仿真運行。 ionic 命令行
工具使用了 Cordova，依賴于平臺 SDK（ Android & iOS）實現將移動 web 項目打包
成原生 app。

由于 ionic 使用了 HTML5 和 CSS3 的一些新規范，所以要求 iOS7+/ Android4.1+。 在低于
這些版本的手機上使用 ionic 開發的應用，有時會發生莫名其妙的問題。

3. CSS 框架

如果你對 AngularJS 這樣的東西不感興趣，可以只使用 ionic 的 CSS 框架：直接在 HTML 中
引入 ionic.css 就可以了。
ionic 的 CSS 框架主要提供預定義的 CSS類，來幫助我們快速構建適用于手機端的 UI。 ionic
的預定義 CSS 類主要分四個方面：
基本布局類
ionic 將手機頁面的布局模式基本抽象為三塊：頭、內容、尾?；静季诸愄峁┝?這幾個
區域的 CSS 類。
顏色和圖標類

ionic 定義了幾個配色方案 CSS 類，并使用 ionicons 提供的字體圖標類。
界面組件類
ionic 定義了豐富的界面組件 CSS 類，讓 HTML 元素看起來像移動平臺的 UI 組件。
柵格系統類
和 Bootstrap 一樣， ionic 也提供了柵格系統。不過 ionic 的實現是基于 CSS3 的 FlexBox 模
型，更為靈活。4. ionic js 指令 路由 其他 ui 交互效果5.ionic 命令行/CLI 安裝 調試 打包（ 第三季 第一講已講）

1. 準備環境 安裝 cordova （ 不懂的話,看前面的環境搭建教程 【第二季第一講以及
phonegap3.4 安裝教程】）
2. 安裝 ionic
npm install -g ionic
sudo npm install -g ionic

3.創建運行項目
Ios 創建安裝運行
ionic start myproject
cd myproject

ionic platform add ios
ionic build ios
ionic emulate ios
Android 創建安裝運行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模擬器運行)
ionic run android (連接上手機運行)

6.ionic 開發包下載 以及默認項目分析