手機(jī) app 開發(fā)的幾種方式 ionic 學(xué)習(xí)思路以及 ionic 新建的項(xiàng)目分析

手機(jī) app 開發(fā)的幾種方式 ionic 學(xué)習(xí)思路以及
ionic 新建的項(xiàng)目分析

學(xué)習(xí)要點(diǎn)：
1. 目前開發(fā)手機(jī) app 的幾種方式
2. Ionic 學(xué)習(xí)思路簡介
3. Ionic CSS 框架
4. ionic js 指令 路由 其他 ui 交互效果
5. ionic 命令行/CLI 安裝 調(diào)試 打包（ 第三季 第一講已講）
6. ionic 開發(fā)包下載 以及命令創(chuàng)建的項(xiàng)目分析

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

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

ionic屬于 hybrid開發(fā)模式，本質(zhì)上是將移動 web應(yīng)用與瀏覽器打包,優(yōu)點(diǎn) MVC 基于 angularjs

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

2． Ionic 學(xué)習(xí)思路簡介
Ionic 簡介： ionic 是一個強(qiáng)大的混合式/hybridHTML5 移動開發(fā)框架，特點(diǎn)是使用標(biāo)準(zhǔn)的
HTML、 CSS 和 JavaScript，開發(fā)跨平臺（目前支持： Android、iOS，計劃支持： Windows Phone、
Firefox OS） 的原生 App 應(yīng)用：

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

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

3. CSS 框架

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

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

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

3.創(chuàng)建運(yùn)行項(xiàng)目
Ios 創(chuàng)建安裝運(yùn)行
ionic start myproject
cd myproject

ionic platform add ios
ionic build ios
ionic emulate ios
Android 創(chuàng)建安裝運(yùn)行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模擬器運(yùn)行)
ionic run android (連接上手機(jī)運(yùn)行)

6.ionic 開發(fā)包下載 以及默認(rèn)項(xiàng)目分析