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

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

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

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

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

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

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

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

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

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

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

從App store下載Xcode

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

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

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

擁有一臺電腦

下載合適的SDKs（后面將會講到）

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

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

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

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

混合app（Hybrid app）

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

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

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

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

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

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

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

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

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

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

安裝必備的工具（對于Mac和Windows平臺）

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

安裝Node.js

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

兩種方式下锯茄，Node Pakcege Manager（NPM）都會在安裝Node.js時同時安裝其它的包厢塘，為了檢驗Node.js是否在Windows上安裝成功，在終端上運行下面的命令：

node -v

你會獲得類似下面的版本信息：

v0.12.7

為了驗證是否在Mac上安裝成功肌幽，同樣在終端運行上面的命令晚碾，你會獲得類似上面的版本信息，即代表安裝成功喂急。

安裝Git

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

git

你會獲得如下輸出：

常用的git命令如下：

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

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

安裝ionic

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

ionic -v

1.6.4

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

cordova -v

你會獲得類似下面的輸出：

4.2.0

如果你之前安裝了Node.js但是沒怎么用它技健，你可能會報出下面的錯誤：

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

brew update; brew upgrade node

使用Ionic CLI

如果你在你的終端/cmd運行ionic命令雌贱，你會獲得如下的輸出：

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

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

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

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

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

ionic start Ionic_1stTutorial sidemenu

你會看到如下輸出:（Windows平臺下）

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

-通過cd命令進入你的項目:$ cd Ionic_1stTutorial

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

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

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

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

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

-編譯你的app:ionic build

-在模擬器上運行你的app:ionic emulate

-在真機上運行你的apps:ionic run

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

更多關(guān)于使用ionic 幫助和ionic文檔的，請訪問Ionic docs杖们，你也可以使用Ionic Push(alpha).為ionic app添加推送通知悉抵。

運行ionic 應(yīng)用

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

Ionic_1stTutorial

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

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

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

-ionic serve- 在本地瀏覽器運行

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

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

-ionic build android- 創(chuàng)建.apk文件谈飒，你可以復(fù)制這個文件到你的Android手機并運行它岂座。（對于iOS，你必須通過Xcode運行到真機杭措。下一章節(jié)我將會講到）

接下來费什，在終端運行如下命令：

ionic serve

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

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

其他的資源

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

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

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

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

學(xué)習(xí) AngluarJS, 請點擊這里here.

注意：npm install -g ionic cordova （此處安裝很費勁辕漂，呢灶，，钉嘹，如果安裝不上鸯乃，請直接使用國內(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

如有錯誤缨睡，歡迎批評和修正！