簡介

目前的手機(jī) APP 有三類：原生 APP、WebAPP、HybridApp。HybridApp 結(jié)合了前兩類 APP 各自的優(yōu)點，越來越流行。

Ionic 是什么？

Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架，是一個界面樣式庫。通過 SASS 構(gòu)建應(yīng)用程序，仿照原生的 iOS 和 android 界面，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。（ionic 中文網(wǎng)：http://www.ionic.wang/）

在 HTML5 移動 APP 開發(fā)中，速度是很重要的。Ionic 在最新的移動設(shè)備中表現(xiàn)非常卓越，運行非常流暢。 操作最少的 DOM、非 jQuery、和硬件加速過渡讓您感覺到用 HTML5 開發(fā)的 APP 也可以飛起來。

Cordova 是什么？

Cordova 前身是 PhoneGap，主要用它的插件。用于將 html、css 和 javaScript 打包成 APP。

Cordova 就是一個中間件，讓我們把 WebAPP 打包成 HybridAPP，并且它提供了非常多的插件，方便我們使用。（cordova 官網(wǎng)：http://cordova.apache.org）

ngCordova 是什么？

ngCordova 是在 Cordova Api 基礎(chǔ)上封裝的一系列開源的 AngularJS 服務(wù)和擴(kuò)展，讓開發(fā)者可以方便的在 HybridApp 開發(fā)中調(diào)用設(shè)備能力，即可以在 AngularJS 代碼中訪問設(shè)備能力 Api，諸如訪問文件、攝像頭、GPS 等等，這些插件只需要簡單配置就可以在 ionic 中使用。（ngCordova 官方插件：http://ngCordova.com/docs/plugins）

安裝 Ionic 和 Cordova

檢查是否安裝 node.js：

$node -v

如果沒有，首先下載安裝 node.js。（node.js 下載地址：https://nodejs.org/en/download/）

由于 cordova 安裝包的鏡像在國外，國內(nèi)網(wǎng)絡(luò)不行，經(jīng)常出現(xiàn)安裝失敗的情況。這就要使用代理，在命令行輸入命令：

$npm config set registry http://registry.cnpmjs.org

然后就可以安裝 ionic 和 cordova：

$sudo cnpm install -g cordova ionic（-g 表示全局安裝）

完成后檢查是否安裝成功：

$ionic -v

$cordova -v

你也可以輸入以下命令查看安裝信息：

$ionic info

結(jié)果如下圖所示：

ionic info

ios-sim代表模擬器運行環(huán)境，ios-deploy代表真機(jī)運行環(huán)境。

not installed 表示這一項沒有安裝，可通過以下命令安裝：

sudo cnpm install -g ios-sim

新建一個 ionic 項目

創(chuàng)建一個空的 ionic 項目：

$ionic start myApp blank

運行剛剛創(chuàng)建的 ionic 項目：

$cd myApp（進(jìn)入項目路徑）

$ionic platform add ios（添加平臺）

$ionic build ios（build 項目）

$ionic emulate ios （模擬器運行）

$ionic run ios （真機(jī)運行）

$ionic serve（本地調(diào)試）

$ionic serve -l（跨平臺調(diào)試）

安裝 cordova 插件

進(jìn)入項目路徑后，執(zhí)行以下命令即可安裝 cordova 插件到項目中：

$sudo ionic plugin add cordova-plugin-shake --save

注意事項

可能會出現(xiàn)以下提示：

The platform command has been renamed. To find out more, run:
    `ionic cordova platform --help`

出現(xiàn)類似以上提示的原因：前段時間 ionic cli 剛剛發(fā)布了 3.x 的版本，這就導(dǎo)致了前文中的大部分命令無法正常使用了。

解決辦法：

1. 在上文中的命令中的 ionic 后面添加 cordova 后再執(zhí)行即可

2. 降級你的 ionic cli 版本到 ionic cli 2.x 的版本

當(dāng)用 ionic cli 命令行創(chuàng)建項目的時候，這個命令行工具（ionic cli）會到 github 上去下載項目的模板（那個模板在不斷更新），目前那個模板已經(jīng)到了 3.3.x 版本，這個模板的版本號就是 Ionic Framework 的版本號。要使用這個模板，需要在創(chuàng)建項目的時候加 --v2 的參數(shù)（不然 ionic cli 會到 github 上下載 ionic1.x 的模板）。

安裝 ionic cli 2.x：

確認(rèn)你當(dāng)前系統(tǒng)上 ionic cli 的版本 $ionic -v，如果不是 ionic 2.x 版本，使用如下方式降級：

$npm uninstall -g ionic

$npm cache clean

$npm install -g ionic@2

$ionic start myApp blank --v2

ionic cli 2 默認(rèn)會創(chuàng)建 ionic 1.x 的項目，如果要創(chuàng)建 ionic 2+（包括3）的項目，需要添加 --v2 的參數(shù)，@2 會自動下載最新的 2.x 版本，不用給出具體的版本號。

安裝報錯：

1. 安裝 ios-deploy 報錯：

npm ERR! enoent ENOENT: no such file or directory, chmod
   '/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy`

解決辦法：執(zhí)行 $sudo npm install -g ios-deploy --unsafe-perm=true 解決

2. Error: Cannot find module 'q'

解決辦法：執(zhí)行 $sudo npm install --save q && npm install --save nopt 解決