移動端混合開發----ionic

    目前移動端分爲三大主流：純原生、混合開發、web App，隨着手機硬件的升級，公司們彷佛偏好於web頁面開發，而混合開發相對純web App彷佛更受大公司青睞，所謂混合開發俾人理解爲，原生代碼（iOS：OC，Android：java）+ web。OK搞清楚了公司需求的大方向，下面就要肯定到底用什麼框架來開發web頁面，開發web頁面，目前最火的也就是ionic 和 react native 了吧，這二者要怎麼抉擇呢？
下面有他們的優劣的對比：

IONIC是目前最有潛力的一款 HTML5 手機應用開發框架。經過 SASS 構建應用程序，它提供了不少 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來加強應用。 提供數據的雙向綁定，使用它成爲 Web 和移動開發者的共同選擇。Ionic是一個專一於用WEB開發技術，基於HTML5建立相似於手機平臺原生應用的一個開發框架。Ionic框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，能夠實現編譯成各個平臺的應用程序。

React Native 使你可以使用基於 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在全部開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易爲任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，並將繼續爲 React Native 投資。

native就是使用使用原生java objective-c 開發， 各玩各的,沒法跨平臺。

優劣對比      
    ionic ：      
    優點：         
        ios 和 android 基本上能夠共用代碼，純web思惟，開發速度快，簡單方便，一次編碼，處處運行，若是熟悉web開發，則開發難度較低。         
        文檔很全，系統級支持封裝較好，全部UI組件都是有html模擬，能夠統一使用。          
        可實如今線更新 容許加載動態加載web js          
        文檔多，開發者多，視頻教程多 容易學習    遇到問題容易解決  技術成熟        
    劣勢：         
        佔用內存高一些（不過手機內存都大了不影響），不適合作遊戲類型app，   web技術沒法解決一切問題，對於比較耗性能的地方沒法利用native的思惟實現優點互補，如高體驗的交互，動畫等。      
    react-native ：      
    優點：    
        一、雖然不能作到一處編碼處處運行，可是基本上即便是兩套代碼，也是相同的jsx語法，使用js進行開發。用戶體驗，高於html，開發效率較高 二、flexbox 佈局 聽說比native的自適應佈局更加簡單高效         
        可實如今線更新 2015.7.28 AppStore審覈政策調整：容許運行於JavascriptCore的動態加載代碼         
        更貼近原生開發     
    劣勢：    
        一、（引）對開發人員要求較高，不是懂點web技術就行的，當官方封裝的控件、api沒法知足需求時 就必然須要懂一些native的東西去擴展，擴展性仍然遠遠不如web，也遠遠不如直接寫Native code。    

        二、（引）官方說得很隱晦：learn once, write anywhere。人家可沒說run anywhere。事實上，從官方的api來看SliderIOS，SwitchIOS..等等這些控件，以後勢必會出現SliderAndroid，SwitchAndroid...，也就是極可能針對不一樣的平臺會須要寫多套代碼。    
        三、發展還不成熟，目前不少ui組件只有ios的實現，android的須要本身實現。         （引）從Native到Web，要作不少概念轉換，勢必形成雙方都要妥協。好比web要用一套CSS的閹割版，Native經過css-layout拿到最終樣式再轉換成native原生的表達方式（好比iOS的Constraint\origin\Center等屬性），再好比動畫。 另外，若Android和iOS都要作相同的封裝，概念轉換就更復雜 五、文檔還不夠完整 學習曲線偏高    4.文檔少  學習起來困難       
    native ：      
    優點：         
        最好的體驗以及功能實現。         
        完善成熟的開發文檔以及demo。      
    劣勢：         
        android開發學習曲線較高。         
        各個平臺分開開發 很難有iOS,android雙平臺高手。         
        開發成本高  開發週期長

通過你多方考究：若是最終選擇React Native 那麼請君留步，專看其餘技術文章。。。。

若是是決定ionic開發，那麼我們就一塊兒愉快的來往下玩耍，

廢話很少說，開始搞起。。。。再說一句廢話：我使用的是Mac
一、配置開發環境

1> Ionic開發是依賴於Nodejs環境的，因此下載安裝：http://nodejs.org/
2> 安裝成功後打開終端(PowerShell)，輸入命令node -v和npm -v有對應的版本號就表明成功了
3> npm install -g cordova ionic   過程可能有點慢。。。
4> ionic start MyIonic blank  經過終端建立一個空ionic項目，MyIonic爲項目名稱    
    ionic start MyIonic tabs 建立一個帶tabs的項目
若是項目裏面部分模塊須要用到ionic，最好先建立blank項目
5> 由於建立的時候默認添加了iOS平臺，若是要對Android平臺支持，輸入一下命令：  
ionic platform add android  添加Android平臺
ionic platform add ios          添加iOS平臺
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
注：輸入命令過程當中若是碰到：
Error: EACCES: permission denied, open '/Users/XXXX/.config/configstore/bower-github.json'You don't have access to this file. 
解決：命令行前加 sudo

二、建立項目完成

建立完成

查看本身所建立項目文件：

項目目錄

補充：config.xml 是ionic項目的一些配置文件，後期自定義插件時須要跟他打交道，這裏就很少說了。。。

插件文件夾：

插件

下面主要說下咱們主要用到的www文件夾：

www文件

文件說明：
css:存放html中控件的style樣式：例如：width、 height、color、font-size
img: 顧名思義存放ionic項目中用到的圖片
index.html ionic項目的主通道
js: 存放js代碼塊
lib: 存放ionic自己的庫文件，固然你也能夠添加一些其餘庫，好比一些cordova庫
templates: 本身手動建立的文件夾，存放一些html文件
其餘兩個.json .js文件是一些配置文件，不用管，也不要動

下面說下怎樣將作 混合開發 以iOS爲例，在原有原生的基礎上，怎樣將你的ionic代碼放到你的項目中，將圈住的文件放到iOS項目中：

iOS項目中必備文件

我項目中的效果：

實際項目中效果

既然是混合，確定避免不了web 與 原生的交互，相互之間的傳值能夠經過自定義插件，也能夠經過橋接，我的對比下，寫橋接比較好方便，本身摸打滾爬了兩個月，感受這裏面的坑仍是不少的。。。

今天先到這裏吧，有時間了會把我碰到坑的解決方法，給你們共享出來，避免大家再走一樣的彎路，ionic網上的資料不太多，特別是針對混合開發的，有問題你們能夠留言討論，OK 下班了。。。