移動端混合開發----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 :

    優勢:

    1、雖然不能做到一處編碼到處運行,但是基本上即使是兩套代碼,也是相同的jsx語法,使用js進行開發。用戶體驗,高于html,開發效率較高 2、flexbox 布局 據說比native的自適應布局更加簡單高效
        可實現在線更新 2015.7.28 AppStore審核政策調整:允許運行于JavascriptCore的動態加載代碼
        更貼近原生開發

    劣勢:

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


    native :

    優勢:
        最好的體驗以及功能實現。
        完善成熟的開發文檔以及demo。

    劣勢:
        android開發學習曲線較高。
        各個平臺分開開發 很難有iOS,android雙平臺高手。
        開發成本高  開發周期長

經過你多方考究:如果最終選擇React Native 那么請君留步,專看其他技術文章。。。。

如果是決定ionic開發,那么咱們就一起愉快的來往下玩耍,

廢話不多說,開始搞起。。。。再說一句廢話:我使用的是Mac
1、配置開發環境

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 

2、創建項目完成

創建完成

查看自己所創建項目文件:


項目目錄

補充: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 下班了。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容