前言：
目前移動(dòng)端分為三大主流：純?cè)⒒旌祥_(kāi)發(fā)、web App，隨著手機(jī)硬件的升級(jí)，公司們似乎偏好于web頁(yè)面開(kāi)發(fā)，而混合開(kāi)發(fā)相對(duì)純web App似乎更受大公司青睞，所謂混合開(kāi)發(fā)俾人理解為，原生代碼（iOS：OC，Android：java）+ web。OK搞清楚了公司需求的大方向，下面就要確定到底用什么框架來(lái)開(kāi)發(fā)web頁(yè)面，開(kāi)發(fā)web頁(yè)面，目前最火的也就是ionic 和 react native 了吧，這兩者要怎么抉擇呢？
下面有他們的優(yōu)劣的對(duì)比：

IONIC是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。
提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。Ionic是一個(gè)專(zhuān)注于用WEB開(kāi)發(fā)技術(shù)，基于HTML5創(chuàng)建類(lèi)似于手機(jī)平臺(tái)原生應(yīng)用的一個(gè)開(kāi)發(fā)框架。Ionic框架的目的是從web的角度開(kāi)發(fā)手機(jī)應(yīng)用，基于PhoneGap的編譯平臺(tái)，可以實(shí)現(xiàn)編譯成各個(gè)平臺(tái)的應(yīng)用程序。

React Native 使你能夠使用基于 JavaScript 和 React 一致的開(kāi)發(fā)體驗(yàn)在本地平臺(tái)上構(gòu)建世界一流的應(yīng)用程序體驗(yàn)。React Native 把重點(diǎn)放在所有開(kāi)發(fā)人員關(guān)心的平臺(tái)的開(kāi)發(fā)效率上——開(kāi)發(fā)者只需學(xué)習(xí)一種語(yǔ)言就能輕易為任何平臺(tái)高效地編寫(xiě)代碼。Facebook 在多個(gè)應(yīng)用程序產(chǎn)品中使用了 React Native，并將繼續(xù)為 React Native 投資。

native就是使用使用原生java objective-c 開(kāi)發(fā)， 各玩各的,無(wú)法跨平臺(tái)。

優(yōu)劣對(duì)比

    ionic ：

    優(yōu)勢(shì)：
        ios 和 android 基本上可以共用代碼，純web思維，開(kāi)發(fā)速度快，簡(jiǎn)單方便，一次編碼，到處運(yùn)行，如果熟悉web開(kāi)發(fā)，則開(kāi)發(fā)難度較低。
        文檔很全，系統(tǒng)級(jí)支持封裝較好，所有UI組件都是有html模擬，可以統(tǒng)一使用。

        可實(shí)現(xiàn)在線(xiàn)更新 允許加載動(dòng)態(tài)加載web js

        文檔多，開(kāi)發(fā)者多，視頻教程多 容易學(xué)習(xí)    遇到問(wèn)題容易解決  技術(shù)成熟



    劣勢(shì)：

       占用內(nèi)存高一些（不過(guò)手機(jī)內(nèi)存都大了不影響），不適合做游戲類(lèi)型app，   web技術(shù)無(wú)法解決一切問(wèn)題，對(duì)于比較耗性能的地方無(wú)法利用native的思維實(shí)現(xiàn)優(yōu)勢(shì)互補(bǔ)，如高體驗(yàn)的交互，動(dòng)畫(huà)等。

    react-native ：

    優(yōu)勢(shì)：

    1、雖然不能做到一處編碼到處運(yùn)行，但是基本上即使是兩套代碼，也是相同的jsx語(yǔ)法，使用js進(jìn)行開(kāi)發(fā)。用戶(hù)體驗(yàn)，高于html，開(kāi)發(fā)效率較高 2、flexbox 布局 據(jù)說(shuō)比native的自適應(yīng)布局更加簡(jiǎn)單高效
        可實(shí)現(xiàn)在線(xiàn)更新 2015.7.28 AppStore審核政策調(diào)整：允許運(yùn)行于JavascriptCore的動(dòng)態(tài)加載代碼
        更貼近原生開(kāi)發(fā)

    劣勢(shì)：

    1、（引）對(duì)開(kāi)發(fā)人員要求較高，不是懂點(diǎn)web技術(shù)就行的，當(dāng)官方封裝的控件、api無(wú)法滿(mǎn)足需求時(shí) 就必然需要懂一些native的東西去擴(kuò)展，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web，也遠(yuǎn)遠(yuǎn)不如直接寫(xiě)Native code。
    2、（引）官方說(shuō)得很隱晦：learn once, write anywhere。人家可沒(méi)說(shuō)run anywhere。事實(shí)上，從官方的api來(lái)看SliderIOS，SwitchIOS..等等這些控件，之后勢(shì)必會(huì)出現(xiàn)SliderAndroid，SwitchAndroid...，也就是很可能針對(duì)不同的平臺(tái)會(huì)需要寫(xiě)多套代碼。
    3、發(fā)展還不成熟，目前很多ui組件只有ios的實(shí)現(xiàn)，android的需要自己實(shí)現(xiàn)。
        （引）從Native到Web，要做很多概念轉(zhuǎn)換，勢(shì)必造成雙方都要妥協(xié)。比如web要用一套CSS的閹割版，Native通過(guò)css-layout拿到最終樣式再轉(zhuǎn)換成native原生的表達(dá)方式（比如iOS的Constraint\origin\Center等屬性），再比如動(dòng)畫(huà)。
另外，若Android和iOS都要做相同的封裝，概念轉(zhuǎn)換就更復(fù)雜 5、文檔還不夠完整 學(xué)習(xí)曲線(xiàn)偏高
    4.文檔少  學(xué)習(xí)起來(lái)困難


    native ：

    優(yōu)勢(shì)：
        最好的體驗(yàn)以及功能實(shí)現(xiàn)。
        完善成熟的開(kāi)發(fā)文檔以及demo。

    劣勢(shì)：
        android開(kāi)發(fā)學(xué)習(xí)曲線(xiàn)較高。
        各個(gè)平臺(tái)分開(kāi)開(kāi)發(fā) 很難有iOS,android雙平臺(tái)高手。
        開(kāi)發(fā)成本高  開(kāi)發(fā)周期長(zhǎng)

經(jīng)過(guò)你多方考究：如果最終選擇React Native 那么請(qǐng)君留步，專(zhuān)看其他技術(shù)文章。。。。

如果是決定ionic開(kāi)發(fā)，那么咱們就一起愉快的來(lái)往下玩耍，

廢話(huà)不多說(shuō)，開(kāi)始搞起。。。。再說(shuō)一句廢話(huà)：我使用的是Mac
1、配置開(kāi)發(fā)環(huán)境

1> Ionic開(kāi)發(fā)是依賴(lài)于Nodejs環(huán)境的，所以下載安裝：http://nodejs.org/
2> 安裝成功后打開(kāi)終端(PowerShell)，輸入命令node -v和npm -v有對(duì)應(yīng)的版本號(hào)就代表成功了
3> npm install -g cordova ionic   過(guò)程可能有點(diǎn)慢。。。
4> ionic start MyIonic blank  通過(guò)終端創(chuàng)建一個(gè)空ionic項(xiàng)目，MyIonic為項(xiàng)目名稱(chēng)
   ionic start MyIonic tabs 創(chuàng)建一個(gè)帶tabs的項(xiàng)目
如果項(xiàng)目里面部分模塊需要用到ionic，最好先創(chuàng)建blank項(xiàng)目
5> 因?yàn)閯?chuàng)建的時(shí)候默認(rèn)添加了iOS平臺(tái)，如果要對(duì)Android平臺(tái)支持，輸入一下命令： 
ionic platform add android  添加Android平臺(tái)
ionic platform add ios          添加iOS平臺(tái)

ionic platform list                 查看是否添加成功
Installed platforms:
  android 6.0.0
  ios 4.1.1
Available platforms: 
  amazon-fireos ~3.6.3 (deprecated)
  blackberry10 ~3.8.0
  browser ~4.1.0
  firefoxos ~3.6.3
  osx ~4.0.1
  webos ~3.7.0

注：輸入命令過(guò)程中如果碰到：
Error: EACCES: permission denied, open '/Users/XXXX/.config/configstore/bower-github.json'
You don't have access to this file.
解決：命令行前加 sudo 

2、創(chuàng)建項(xiàng)目完成

創(chuàng)建完成

查看自己所創(chuàng)建項(xiàng)目文件：

項(xiàng)目目錄

補(bǔ)充：config.xml 是ionic項(xiàng)目的一些配置文件，后期自定義插件時(shí)需要跟他打交道，這里就不多說(shuō)了。。。

插件文件夾：

插件

下面主要說(shuō)下我們主要用到的www文件夾：

www文件

文件說(shuō)明：
css:存放html中控件的style樣式：例如：width、 height、color、font-size
img: 顧名思義存放ionic項(xiàng)目中用到的圖片
index.html ionic項(xiàng)目的主通道
js: 存放js代碼塊
lib: 存放ionic本身的庫(kù)文件，當(dāng)然你也可以添加一些其他庫(kù)，比如一些cordova庫(kù)
templates: 自己手動(dòng)創(chuàng)建的文件夾，存放一些html文件
其他兩個(gè).json .js文件是一些配置文件，不用管，也不要?jiǎng)?/p>

下面說(shuō)下怎樣將做 混合開(kāi)發(fā) 以iOS為例，在原有原生的基礎(chǔ)上，怎樣將你的ionic代碼放到你的項(xiàng)目中，將圈住的文件放到iOS項(xiàng)目中：

iOS項(xiàng)目中必備文件

我項(xiàng)目中的效果：

實(shí)際項(xiàng)目中效果

既然是混合，肯定避免不了web 與 原生的交互，相互之間的傳值可以通過(guò)自定義插件，也可以通過(guò)橋接，個(gè)人對(duì)比下，寫(xiě)橋接比較好方便，自己摸打滾爬了兩個(gè)月，感覺(jué)這里面的坑還是很多的。。。

今天先到這里吧，有時(shí)間了會(huì)把我碰到坑的解決方法，給大家共享出來(lái)，避免你們?cè)僮咄瑯拥膹澛?，ionic網(wǎng)上的資料不太多，特別是針對(duì)混合開(kāi)發(fā)的，有問(wèn)題大家可以留言討論，OK 下班了。。。