這是我寫的一系列文章中的第一篇關(guān)于如何利用Web開發(fā)技術(shù)為iOS和Android系統(tǒng)構(gòu)建混合應(yīng)用程序（Hybrid App）

毫無疑問，用戶在移動(dòng)應(yīng)用上花費(fèi)了比瀏覽器上更多的時(shí)間。考慮到這一點(diǎn)，制作一款屬于你自己的apps就成為了機(jī)會(huì)。但是如何開始呢？能不能利用一些你已經(jīng)掌握的開發(fā)技術(shù)呢？直到目前，如果你想要為目前最流行的兩款手機(jī)操作系統(tǒng)（iOS和Android）制作一款移動(dòng)應(yīng)用。一種方法是通過利用不同系統(tǒng)相應(yīng)的SDK制作原生的App，這種方式意味著你需要為兩個(gè)不同系統(tǒng)制作兩款不同版本的應(yīng)用程序。如果你是一個(gè)獨(dú)立開發(fā)者，你可能不會(huì)對(duì)兩種開發(fā)技術(shù)都很熟練。

有時(shí)，開發(fā)者會(huì)選擇iOS或者Android中的其中一種，然而大的公司一般有兩個(gè)開發(fā)部門，一個(gè)部門對(duì)應(yīng)一個(gè)系統(tǒng)平臺(tái)。現(xiàn)在，通過利用ionic框架（或者其他諸如PhoneGap,MUI,Bootstrap,OnsenUI,Famo.us等框架）和已經(jīng)掌握的開發(fā)技術(shù)你可以只制作一套代碼庫，通過不同的打包方式打包成App發(fā)布在iOS和Android 市場上（App store和安卓市場）。

制作移動(dòng)應(yīng)用（app）的方法

有三種方式可以為手機(jī)制作移動(dòng)應(yīng)用：

－原生應(yīng)用（Native app）

－手機(jī)網(wǎng)站（Mobile website）

－混合應(yīng)用（Hybrid app）

原生應(yīng)用（Native APP）

如上述，你可以根據(jù)不同系統(tǒng)平臺(tái)指定SDK制作對(duì)應(yīng)系統(tǒng)平臺(tái)下的移動(dòng)應(yīng)用，如果你想要為iOS系統(tǒng)創(chuàng)建一款應(yīng)用，你需要：

擁有一臺(tái)蘋果Mac電腦，當(dāng)然其他方法也可以，但是我不推薦。作為初學(xué)者，一臺(tái)廉價(jià)的Mac Mimi就可以了。

從App store下載Xcode

購買蘋果開發(fā)者許可證（Apple Developer license）99刀￥一年（如果你想要在App store上發(fā)布應(yīng)用）

你可以利用Swift語言或者它的前輩ObjectiveC語言創(chuàng)建App，Swift 語言在沉重的ObjectiveC語言上做出了巨大改進(jìn)，如果你決定開發(fā)原生app，相比利用ObjectiveC開發(fā)原生app，Swift更容易上手，特別是當(dāng)你有Web開發(fā)的背景時(shí)。 ? ?

如果你想要為Android系統(tǒng)創(chuàng)建一款原生應(yīng)用，你需要：

擁有一臺(tái)電腦

下載合適的SDKs（后面將會(huì)講到）

購買谷歌開發(fā)者許可證（Google Developer license）25刀￥（如果你想要在Google Play Store上發(fā)布應(yīng)用）

利用原生開發(fā)技術(shù)開發(fā)的應(yīng)用具有速度快和直接利用原生API的優(yōu)勢(shì)（你不需要像開發(fā)混合應(yīng)用一樣【Hybrid App】作任何中間封裝），缺點(diǎn)是，你需要為不同手機(jī)系統(tǒng)平臺(tái)開發(fā)不同版本的移動(dòng)應(yīng)用。（撰寫多套代碼）

手機(jī)網(wǎng)站（mobile website）

通過手機(jī)瀏覽器可以訪問手機(jī)網(wǎng)站，手機(jī)網(wǎng)站可以根據(jù)手機(jī)屏幕大小自適應(yīng)。由于手機(jī)網(wǎng)站比較難以維護(hù)，一種叫做響應(yīng)式網(wǎng)站設(shè)計(jì)（responsive website design）的方法被使用，通過這種方法你擁有一套HTML代碼庫，你可以通過使用媒體查詢（Media queries）根據(jù)不同設(shè)備不同分辨率（resolutions）改變他們的網(wǎng)站外觀。jQuery mobile 是一種出色的移動(dòng)框架。使用它你可以制作一款移動(dòng)版本的Web應(yīng)用程序。移動(dòng)網(wǎng)站一個(gè)顯著的優(yōu)勢(shì)就是你可以根據(jù)需要實(shí)時(shí)更新他們的內(nèi)容，而不用去等待蘋果Apple或者谷歌Google的審核，劣勢(shì)則包括低耦合，更少的特征。

混合app（Hybrid app）

混合應(yīng)用基本上是一款手機(jī)應(yīng)用，它和撰寫網(wǎng)站的程序語言基本相同，唯一不同的就是他們包含在一個(gè)孤立的瀏覽器中（WebView）， 原生應(yīng)用通過WebView運(yùn)行Web應(yīng)用，混合應(yīng)用可以調(diào)用手機(jī)攝像頭、GPS等，通過利用插件，混合應(yīng)用可以調(diào)用手機(jī)其它的硬件功能，你可以利用開發(fā)Web應(yīng)用的技術(shù)開發(fā)混合應(yīng)用。然而，WebView有速度的限制， 制作成熟的3D圖像游戲可能不是最好的選擇。

Ionic是什么 (為什么它如此優(yōu)秀?)

Ionic 不僅僅是一個(gè)UI框架。它允許你：?

－通過使用單一命令 ionic resources為所有不同大小設(shè)備生成圖標(biāo)和啟動(dòng)屏幕

－通過使用ionic run --livereload命令可以把改變的代碼立即應(yīng)用到app上，即使app正在手機(jī)上運(yùn)行。

－通過使用ionic serve --lab命令可以邊構(gòu)建和邊測試iOS和Android版本應(yīng)用，同事觀察它們的變化

－通過ionic share命令你可以和世界各地的客戶、顧客、測試者分享你的ionic apps，而不用通過App store

－通過ngCordova可以輕松的獲取手機(jī)全部的原生功能

同時(shí),Drifty(ionic framework開發(fā)團(tuán)隊(duì)) 正在為ionic app構(gòu)建一種全棧后端服務(wù)和工具，譬如部署（不經(jīng)過apple 的review程序就可以部署一個(gè)新的版本）。ionic命令行接口（CLI）在后端使用Cordova并允許你為iOS和Android構(gòu)建apps（僅僅使用ionic build iOS和ionic build android 命令）。Ionic使用angular作為前端框架，如果你對(duì)angular熟悉就再好不過了。ionic對(duì)于angular 2.0也有很好的支持。

現(xiàn)在，讓我們安裝所有開發(fā)ionic需要的工具軟件然后使用ionic開發(fā)吧！

安裝必備的工具（對(duì)于Mac和Windows平臺(tái)）

為了同時(shí)安裝ionic和Cordova我們需要安裝Node.js和Git。如果你已經(jīng)安裝了這些工具，你可以跳過這個(gè)部分直接安裝ionic。

安裝Node.js

到nodejs官網(wǎng)http://nodejs.org/download/下載Node.js，在Windows上和Mac上安裝非常簡單，下載并運(yùn)行安裝即可。如果你的Mac安裝了brew，你也可以通過brew安裝Node.js。

兩種方式下，Node Pakcege Manager（NPM）都會(huì)在安裝Node.js時(shí)同時(shí)安裝其它的包，為了檢驗(yàn)Node.js是否在Windows上安裝成功，在終端上運(yùn)行下面的命令：

node -v

你會(huì)獲得類似下面的版本信息：

v0.12.7

為了驗(yàn)證是否在Mac上安裝成功，同樣在終端運(yùn)行上面的命令，你會(huì)獲得類似上面的版本信息，即代表安裝成功。

安裝Git

為了安裝Git，請(qǐng)前往here，在Windows和Mac上安裝Git和安裝Node.js同樣簡單。你僅僅需要下載和運(yùn)行它，根據(jù)相應(yīng)的指引安裝即可。?為了驗(yàn)證你是否在Windows/Mac上安裝Git成功，在終端運(yùn)行下面的命令行：

git

你會(huì)獲得如下輸出：

常用的git命令如下：

同時(shí)，git help -a 和 git help -g list 或 git help<concept> 命令可以幫助理解關(guān)于一個(gè)特定的子命令和概念。

不用擔(dān)心，如果你不知道如何使用Git命令，你可能不需要直接用到它（NPM使用它下載包），然而，如果你不想學(xué)，看看這個(gè)CodeSchool出的交互式教程（this interactive tutorial）。

安裝ionic

如果你已經(jīng)安裝了git和Node.js，為了安裝ionic（Mac和Windows相同），你只需要運(yùn)行如下命令：npm install ionic cordova -g，ionic在后臺(tái)使用Cordova，所以它需要它。在這里我們使用-g便簽是為了全局安裝Cordova，為了驗(yàn)證ionic是否安裝成功（Mac和Windows平臺(tái)），你只需要在終端鍵入下面命令：

ionic -v

1.6.4

為了驗(yàn)證Cordova是否安裝成功（Mac和Windows平臺(tái)），你只要在終端鍵入下面的命令：

cordova -v

你會(huì)獲得類似下面的輸出：

4.2.0

如果你之前安裝了Node.js但是沒怎么用它，你可能會(huì)報(bào)出下面的錯(cuò)誤：

為了解決這個(gè)錯(cuò)誤，你只需要更新你的Node.js，要么重新下載它（Windows平臺(tái)）要么執(zhí)行下面的更新命令（在Mac上）：

brew update; brew upgrade node

使用Ionic CLI

如果你在你的終端/cmd運(yùn)行ionic命令，你會(huì)獲得如下的輸出：

?使用ionic -help 或者-h可以獲取更多信息

通過使用ionic CLI同時(shí)閱讀上面的幫助文檔，你可以對(duì)ionic 命令行接口獲得大概的理解。如果你在想CLI是什么，他只是個(gè)Command Line Interface的首字母縮寫，就ionic而言，他只是一個(gè)創(chuàng)建、打包、運(yùn)行和模擬的命令行工具。下面的教程我們將會(huì)講到當(dāng)中的大部分命令，現(xiàn)在我們暫時(shí)不講。

使用已經(jīng)存在的模板創(chuàng)建項(xiàng)目

Ionic CLI 允許你通過使用ionic start 命令創(chuàng)建和初始化你的項(xiàng)目，如果你看過官方文檔（official documentation），你將會(huì)看到對(duì)它的如下定義：ionic start appname [template].

如果你僅僅只運(yùn)行ionic start appname 命令，Ionic CLI將會(huì)構(gòu)建一個(gè)bootstrap應(yīng)用（所有需要的構(gòu)建都會(huì)在appname文件夾里面），伴隨著空的模板，這兒有其他三個(gè)模板包括blank（空模板），sidemenu（側(cè)邊欄）和tabs（底部導(dǎo)航欄），除此之外，你可以使用Github repo starters和Codepen URL starters等模塊，為了獲得更多的starter apps模塊，你可以訪問這邊文章（this post），在我們的例子中，我們將會(huì)使用sidemenu（側(cè)板欄）模板，在終端運(yùn)行下面的命令：

ionic start Ionic_1stTutorial sidemenu

你會(huì)看到如下輸出:（Windows平臺(tái)下）

你的ionic項(xiàng)目就已經(jīng)構(gòu)建成功了! 下面是一些技巧:

-通過cd命令進(jìn)入你的項(xiàng)目:$ cd Ionic_1stTutorial

-設(shè)置項(xiàng)目使用Sass:ionic setup sass

-在瀏覽器中實(shí)時(shí)開發(fā):ionic serve

-添加一個(gè)系統(tǒng)平臺(tái) (ios or Android):ionic platform add iOS [Android]

-注意: iOS 開發(fā)需要OS X系統(tǒng)

-參見詳細(xì)的Android平臺(tái)開發(fā)指南 :Android installation instructions

-編譯你的app:ionic build

-在模擬器上運(yùn)行你的app:ionic emulate

-在真機(jī)上運(yùn)行你的apps:ionic run

-使用ionic打包服務(wù)打包一個(gè)app:ionic package

更多關(guān)于使用ionic 幫助和ionic文檔的，請(qǐng)?jiān)L問Ionic docs，你也可以使用Ionic Push(alpha).為ionic app添加推送通知。

運(yùn)行ionic 應(yīng)用

既然我們已經(jīng)基于側(cè)邊欄構(gòu)建和初始化了我們的ionic應(yīng)用，為了看到ionic CLI產(chǎn)生了什么我們必須運(yùn)行它，首先進(jìn)入我們創(chuàng)建項(xiàng)目名的目錄，在我們的實(shí)例中如下：

Ionic_1stTutorial

C:\Users\Nikola\Desktop\IonicTesting>cd Ionic_1stTutorial

C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>

在接下來的章節(jié)中，我們將花更多的時(shí)間在www文件夾，正因?yàn)閕onic是基于angularJS 框架，你需要知道他的一些基本知識(shí)。下面是一些可以運(yùn)行ionic應(yīng)用的辦法：

-ionic serve- 在本地瀏覽器運(yùn)行

-ionic emulate android- 在Android模擬器上運(yùn)行 (這個(gè)例子使用Android; 你也可以使用iOS如果你有一臺(tái)Mac電腦且安裝了上述條件)

-ionic run android- 安裝應(yīng)用到插入電腦的Android手機(jī)上

-ionic build android- 創(chuàng)建.apk文件，你可以復(fù)制這個(gè)文件到你的Android手機(jī)并運(yùn)行它。（對(duì)于iOS，你必須通過Xcode運(yùn)行到真機(jī)。下一章節(jié)我將會(huì)講到）

接下來，在終端運(yùn)行如下命令：

ionic serve

你可以看到類似如下的輸出:

當(dāng)然，你也可以直接在瀏覽器中輸入地址http://localhost:8100/#/app/playlistsAlso,一旦你自動(dòng)設(shè)定了實(shí)時(shí)重載的功能，一旦你修改代碼，應(yīng)用就會(huì)自動(dòng)重新被加載到瀏覽器里。如果你喜歡，你可以到Github上獲取此項(xiàng)目。

其他的資源

下面是一些我在學(xué)習(xí)ionic時(shí)不可獲缺的資源:

為了快速了解框架，我建議閱讀官方文檔（official documentation）

如果你正在找一本關(guān)于ionic的好書，我推薦Ionic in Action: Hybrid Mobile Apps with Ionic and AngularJS

與編程相關(guān)的最好的咨詢問題的資源就是StackOverflow. 你可以查看關(guān)于ionic對(duì)應(yīng)問題標(biāo)簽的答案，然而我建議你查看StackOverflow幫助頁，如果你是StackOverflow新手。

學(xué)習(xí) AngluarJS, 請(qǐng)點(diǎn)擊這里here.

注意：npm install -g ionic cordova （此處安裝很費(fèi)勁，，，，如果安裝不上，請(qǐng)直接使用國內(nèi)鏡像），也可以安裝cnpm，這樣就容易裝cordova和ionic

npm install -g cordova --registry https://registry.npm.taobao.org

npm install -g ionic --registry https://registry.npm.taobao.org

下面是下一篇文章的鏈接 ---（未完待續(xù)）

本文原出處 https://www.pluralsight.com/blog/software-development/ionic-framework-on-mac-and-windows

如有錯(cuò)誤，歡迎批評(píng)和修正！