一：混合開發(fā)模式的背景
APP的三種開發(fā)模式：Native? App句旱、 Web App魄眉、Hybrid App。
1. Native App
Native App燃逻，原生APP序目，使用原生（即Android或iOS）開發(fā)的APP。使用原生開發(fā)有其優(yōu)勢：應用的性能好伯襟，適配起來相對容易猿涨。但原生APP最頭疼的有三個問題：
（1）無法跨平臺：Android和iOS都需要開發(fā)各自平臺的版本——開發(fā)成本高；
（2）升級麻煩：每次升級都要下載安裝包姆怪，Android還好叛赚，反正不需要審核澡绩，下載就下載吧，但iOS就麻煩了俺附，發(fā)布每個版本還得經(jīng)過App
Store的審核肥卡，這導致第三個問題；
（3）Android和iOS很難同步發(fā)布昙读。
2.Web App
所謂的Web App召调，就是把手機當做一個瀏覽器（Android使用WebView，iOS使用UIWebView）蛮浑，做幾個頁面掛在服務器端唠叛，類似于一個小網(wǎng)站。這樣說雖然不太貼切沮稚，但實際上給人的感覺就是這樣的艺沼。雖然開發(fā)成本大大降低，但頁面訪問速度慢蕴掏、操作體驗差障般。于是第三種模式誕生了。
3. Hybrid App
?? 乍一看和Web App沒啥差別盛杰，但涉及到的技術成本挽荡、開發(fā)成本、學習成本比Web App高即供，它綜合了Web App的開發(fā)速度和Native App的高性能體驗定拟。之所以說學習成本高，是因為開發(fā)高性能的Hybrid App有難度逗嫡，網(wǎng)絡資料少青自。我是兩年半前開始接觸混合模式開發(fā)的，當時如何做好屏幕適配驱证、提高UI響應速度延窜、如何最大化使用原生功能等內(nèi)容，網(wǎng)絡幾乎沒有資料抹锄。網(wǎng)上能搜索到的都是很粗略的東西逆瑞，或者就是Hello World級別的東西，涉及到稍微細節(jié)一點的東西幾乎沒有伙单。由于本系列文章都只講Hybrid呆万，故在此不再啰嗦了。
三種開發(fā)模式各自的特點如下面的表格所示：
?? Hybrid
App（混合模式移動應用）是指介于web-app车份、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”牡彻。它雖然看上去是一個Native App扫沼，但只有一個UI WebView出爹，里面訪問的是一個Web App，比如街旁網(wǎng)最開始的應用就是包了個客戶端的殼缎除，其實里面是HTML5的網(wǎng)頁严就，后來才推出真正的原生應用。再徹底一點的器罐，如掌上百度和淘寶客戶端Android版梢为，走的也是Hybrid App的路線，不過掌上百度里面封裝的不是WebView轰坊，而是自己的瀏覽內(nèi)核铸董，所以體驗上更像客戶端，更高效肴沫。
?? Hybrid
App按網(wǎng)頁語言與程序語言的混合粟害，通常分為三種類型：多View混合型，單View混合型颤芬，Web主體型悲幅。
（1）多View混合型
?? 即Native View和Web View獨立展示，交替出現(xiàn)站蝠。2012年常見的Hybrid App是Native View與WebView交替的場景出現(xiàn)汰具。這種應用混合邏輯相對簡單。即在需要的時候菱魔，將WebView當成一個獨立的View（Activity）運行起來留荔，在WebView內(nèi)完成相關的展示操作。這種移動應用主體通常是Native App豌习，Web技術只是起到補充作用存谎。開發(fā)難度和Native App基本相當。
（2）單View混合型
?? 即在同一個View內(nèi)肥隆，同時包括Native View和Web View既荚。互相之間是覆蓋（層疊）的關系栋艳。這種Hybrid App的開發(fā)成本較高恰聘，開發(fā)難度較大，但是體驗較好吸占。如百度搜索為代表的單View混合型移動應用晴叨，既可以實現(xiàn)充分的靈活性，又能實現(xiàn)較好的用戶體驗矾屯。
（3）Web主體型
?? 即移動應用的主體是Web View兼蕊，主要以網(wǎng)頁語言編寫，穿插Native功能的Hybrid App開發(fā)類型件蚕。這種類型開發(fā)的移動應用體驗相對而言存在缺陷孙技，但整體開發(fā)難度大幅降低产禾，并且基本可以實現(xiàn)跨平臺。
?? 從分析可見牵啦，Hybrid App中的Web主體型只要能夠解決用戶體驗差的問題亚情，就可以變成最佳Hybrid App解決方案類型，而這也是目前最難解決的問題哈雏。
二：線下主流混合模式
HybridApp開發(fā)楞件，現(xiàn)階段主流的平臺包括PhoneGap，AppCan裳瘪，appMobi土浸，Titanium等，它們基于webkit開源內(nèi)核盹愚，使用HTML5?標準開發(fā)栅迄，適配機型簡單，支持開發(fā)者自定義插件皆怕，并能很好的應用于商業(yè)毅舆，教育，娛樂等行業(yè)愈腾，成為移動開發(fā)者的首選開發(fā)平臺憋活。
1. PhoneGap（cordova）
PhoneGap是一款Apache的開源移動開發(fā)平臺。目前已經(jīng)將核心代碼貢獻給Apache cordova虱黄，最新版本是5.4.0悦即，它是基于HTML，CSS和JavaScript的橱乱，可以使用一些開源的框架比如jQuery Mobile辜梳，Dojo Mobile，Sencha Touch等等來提高用戶體驗泳叠，也提供了比較豐富的原生插件調用作瞄。
特性：
1.可以使用DreamWeaver 5.5編碼，現(xiàn)在使用appMobi提供的xdk?進行模擬器開發(fā)危纫。
2.代碼開源宗挥，開發(fā)者可以放心使用。
3.兼容性种蝶，一次開發(fā)契耿，多處運行。
4.使用JS+HTML5螃征，成本低搪桂。
優(yōu)點：
1. Native接口比較豐富，通過封裝的API可以直接訪問硬件盯滚，比如說加速，相機，指南針诈胜，GPS竟趾，文件訪問等。
2.接口文檔描述非常詳細泼疑。
3.支持平臺多德绿，包括iOS，Android退渗，Blackberry移稳，Symbian，bada会油，Windows Phone 7个粱，Windows Phone 8?等。
缺點：
1.需要針對相應的平臺環(huán)境配置翻翩，進行編譯都许，打包測試，發(fā)布等等嫂冻。由于使用Hybrid開發(fā)的用戶群胶征，需要對各個平臺的開發(fā)都要需要了解，對硬件等等都要配置桨仿，加大開發(fā)成本睛低。
2.使用效果啟動慢，頁面切換響應慢服傍，數(shù)據(jù)請求慢钱雷。
3.因為是國外的框架，技術支持不夠到位吹零，出現(xiàn)問題罩抗，無法排解，成為技術攻關的難點瘪校。
資料：
· https://www.w3cschool.cn/cordova/
· https://tieba.baidu.com/f?kw=cordova
· http://wiki.jikexueyuan.com/project/apache-cordova-tutorial/creating-cordova-project.html
2. AppCan
AppCan是本土移動開發(fā)中使用最廣的移動平臺澄暮，網(wǎng)絡輿論而言，AppCan是PhoneGap的中國化阱扬，但是從對AppCan實際使用泣懊，以及轉向移動開發(fā)的朋友們互相交流反饋，他們是截然不同的兩個移動平臺麻惶，AppCan不僅封裝了類似于PhoneGap的本地調用功能馍刮，而且封裝了uexWindow多窗口機制，實現(xiàn)了移動端的iframe效果窃蹋，雖然不是開源項目卡啰，但一直都有面向開發(fā)者的免費版静稻，并且也有定位于企業(yè)用戶的企業(yè)版套裝。
特性：
1.提供的集成開發(fā)環(huán)境的IDE進行模擬器開發(fā)匈辱。
2.兼容性振湾，一次開發(fā)，多處運行亡脸。
3.使用JS+HTML5押搪，成本低。
4.在線打包浅碾。
5.代碼加密保護機制大州。
優(yōu)點：
1.支持在線上傳證書打包，對于不了解蘋果垂谢，以及Android?環(huán)境開發(fā)的人是福音厦画。
2.支持更多的原生調用，比如UI控件的封裝滥朱，通訊類（socket）根暑，地圖，支付寶等更多的原生控件支持焚虱。
3.擁有統(tǒng)一數(shù)據(jù)統(tǒng)計平臺购裙，便于運營管理開發(fā)的應用。
4.完善的技術支持鹃栽，官方論壇以及Q群建設較為完善躏率，使開發(fā)者更好的進行交流溝通。
缺點：
1.雖然有中文的開發(fā)文檔民鼓，但描述比較簡單薇芝，希望他們豐富他們的API文檔。
2.免費版本不支持自定義插件（據(jù)說企業(yè)版可以自定義插件）丰嘉。
3.暫時只支持iOS夯到，Android兩大平臺。
4.許多功能需要企業(yè)版才能實現(xiàn)饮亏，不過是收費的耍贾。
資料：
· http://2014appcan.csdn.net
3.APICloud
APICloud是一款“云端一體”的移動開發(fā)平臺，信仰“云端一體”的理念路幸，重新定義了移動應用開發(fā)荐开。APICloud為開發(fā)者從“云”和“端”兩個方向提供API，簡化移動應用開發(fā)技術简肴，讓移動應用的開發(fā)周期從一個月縮短到7天晃听。APICloud由“云API”和“端API”兩部分組成，可以幫助開發(fā)者快速實現(xiàn)移動應用的開發(fā)、測試能扒、發(fā)布佣渴、管理和運營的全生命周期管理。
特性：
APICloud提供的原生模塊初斑，涵蓋UI辛润、系統(tǒng)、交互见秤、影音频蛔、支付等類型。另外秦叛，APICloud還為開發(fā)者提供了APICloud?ID集成開發(fā)環(huán)境，其一鍵真機調試瀑粥、代碼同步挣跋、編譯本地測試包等功能也提高了開發(fā)效率。官方號稱7天做出一個App狞换。
優(yōu)點：
1避咆、方案完整，簡化修噪，上手快查库。
2、IDE整合做的不錯黄琼，直接連接云端樊销，SVN代碼同步，直接連接手機App Loader真機調試脏款，Log可以通過IDE輸出围苫，比模擬器真實，直觀撤师。
3剂府、云編譯很方便，跨平臺打包剃盾，直接生成二維碼腺占。
4、手機底層硬件/組件調用API很實用痒谴，比如語音識別衰伯，都不錯。
5闰歪、文檔完備嚎研，相比開源項目往往缺乏文檔，信息需要東拼西湊來說，APICloud的文檔比較集中和全面临扮。
缺點：
?1论矾、缺乏常見模式App的完整框架Demo，比如：一個帶頭部信息杆勇，底部導航和側邊菜單的應用框架用APICloud的UI組件怎么寫贪壳，頁面間跳轉和參數(shù)傳遞怎么寫，這些都是動手開發(fā)之前最先要解決的問題蚜退。Demo
App里的組件示例有用闰靴，但是框架和基本流程要先跑起來。
2钻注、UI組件不夠豐富蚂且。
3、IDE聯(lián)機調試的Log輸出不穩(wěn)定幅恋，經(jīng)常斷線杏死。
4、文檔層次和細致程度還不夠捆交。文檔現(xiàn)在的層次有點混亂淑翼，不好定位信息，最好分一下類別品追，比如媒體類玄括，通訊類，等等肉瓦。另外還有一些API沒有說明文字遭京。
資料：
· https://docs.apicloud.com
· https://jingyan.baidu.com/article/9f7e7ec0ad3da06f2915544e.html
4. React Native
React Native 是一個 JavaScript 的框架，用來撰寫實時的风宁、可原生呈現(xiàn) iOS 和 Android 的應用洁墙。其是基于React的，而 React 是 Facebook 的用于構建用戶界面的 JavaScript 庫戒财。由 Facebook 開發(fā)并在2013年將其開源热监，React 已經(jīng)得到了頗為廣泛的使用。但是其使用的范圍比較狹窄饮寞，它僅是用于渲染用戶的應用程序的界面孝扛，而不是更大的 MVC 框架。
React Native 也只是 React幽崩，但是是針對移動設備的苦始。也有一些少許的不一樣的地方，比如開發(fā)者需要使用組件而不是
優(yōu)點：
1.把cocoa里面的controller和view統(tǒng)一成了component慌申，其實RN里只有component這個組件概念陌选，既可以扮演頁面級別的組件（controller）理郑，也可以扮演一個模塊級別的組件（UIView)。入門門檻降低了很多咨油。
2.動態(tài)綁定您炉，這個React的基本功能，被帶到了客戶端開發(fā)中來役电，數(shù)據(jù)和視圖是動態(tài)綁定的赚爵，數(shù)據(jù)發(fā)生變化，視圖會跟著變化法瑟，很多操作視圖的代碼都可以省略了冀膝。
3.引入了類似于CSS（一個子集）的樣式管理，可以內(nèi)嵌到模塊霎挟，也可以全局使用窝剖，定義樣式變得非常簡單通用。
4.引入了Flexbox布局酥夭，把ios本身復雜的AutoLayout簡化枯芬，使用很方便，學習起來也更簡單采郎。
5.引入了方便的npm管理，有大量現(xiàn)成的nodejs包可以用（例如moment狂魔，underscore等常用模塊）蒜埋，還可以把自己項目模塊搞到內(nèi)部npm上做通用組件，另外最楷，npm上還有不少別人寫的react native的插件整份。例如下面這個。
6.第三方組件里有一個可以把icon font引入項目的組件籽孙，可以在任何顯示圖標的地方直接用icon font顯示烈评，灰常方便。
7.調試很方便犯建，一次編譯后讲冠，每次改了js代碼，只需要在模擬器里command+R即可重新加載代碼适瓦。有問題會直接報錯竿开，里面有代碼行數(shù)等詳細信息。
8.完整封裝了各種js內(nèi)置的方法玻熙，例如：setTimeout否彩，setInterval，XMLHttpRequest嗦随，localstorage列荔，console.log等，都是用oc原生方法封裝的。
9.引入ES6的支持贴浙，可以使用各種新特性砂吞，例如最常用的箭頭函數(shù)，解決this作用域亂套的問題悬而。
缺點：
1.組件不全呜舒，第三方組件也不全，遇到某些特殊功能笨奠，需要搗鼓很久袭蝗，例如攝像相關的，文件讀寫般婆，文件上傳之類的組件到腥。
?? ? 2.性能并非媲美原生，還是有一些損耗的蔚袍，特別是交換大數(shù)據(jù)的時候乡范，例如讀取相冊。
?
?? ? 3.ios和android代碼并非通用啤咽，有可能會需要維護兩套晋辆，或者在代碼內(nèi)做一些判斷。
?? ? 4.并非網(wǎng)上大家說的宇整，寫一次代碼瓶佳，多端通用，網(wǎng)頁版和客戶端版完全不是一個概念鳞青，只有部分代碼可重用霸饲。
?? ? 5.把代碼都打包到bundle里面，不知道蘋果對這種開發(fā)方式是否會不太喜歡臂拓，甚至拒絕上線厚脉。
??? 6.實際開發(fā)的時候，還是需要了解底層原理胶惰，自己開發(fā)跟原生橋接的組件傻工，這個對普通前端來說是一個很大的挑戰(zhàn)。
資料：
·? http://facebook.github.io/react-native
·? http://www.reactnative.com/
·? github搜索 react native 了解第三方開源組件
·? http://wiki.ecmascript.org/doku.php?id=harmony:proposals
5. Titanium
Titanium移動平臺是所有移動開發(fā)平臺中比較另類的孵滞，它將JavaScript和本地庫鏈接在一起精钮，編譯成字節(jié)碼，針對iOS以及Android兩個平臺分別構建一個軟件包剃斧。應用程序使用HTML轨香，JavaScript和CSS進行開發(fā)，并支持PHP幼东，Ruby和Python臂容。應用程序可以使用?Appcelerator API訪問本地特性科雳。并提供Appcelerator
Studio開發(fā)環(huán)境，由于編譯成本地代碼脓杉，所以用戶體驗是最好的糟秘。
特性：
1.針對不同平臺生成對應的原生包。
2.供Appcelerator Studio開發(fā)球散。
優(yōu)點：
1.針對JS解析生成原生控件尿赚，基本達到純原生的用戶體驗。
2.支持自定義插件蕉堰。
缺點：
1. API文檔為英文凌净，并且比較簡單，對國內(nèi)用戶使用有一定挑戰(zhàn)屋讶。
2.跟PhoneGap同樣冰寻，國外框架，技術支持困難皿渗。
3.支持Android斩芭，iOS，黑莓平臺乐疆。
4.環(huán)境需要用戶自己搭建比較復雜划乖。
資料：
· https://www.cnblogs.com/sipher/articles/2697368.html
· http://tidev.in/forums/kai-fa-zhi-shi
· http://www.titaniumstudios.com
6.AppMobi
appMobi推出了全新開發(fā)工具XDK，這個工具使得開發(fā)者可以使用HTML5構建網(wǎng)絡和移動平臺的應用程序挤土，可以進行屏幕仿真調試迁筛、設備實際調試和遙控調試等。
特性：
1.使用XDK 進行開發(fā)耕挨。
2. HTML5+CSS+JS。
3.一次開發(fā)尉桩，多處運行筒占。
優(yōu)點：
1.本地接口較為豐富，并且推出有游戲加速引擎,主要包括物理引擎蜘犁、離線和動態(tài)緩存翰苫、媒體播放器、驗證和加密这橙、增強現(xiàn)實奏窑、二維碼和QR掃描、更好的顯示支持屈扎。
缺點：
1.國外框架埃唯，技術支持差。
?資料：
· https://appmobi.com/?q=node%2F153
7.WeX5
WeX5遵循Apache開源協(xié)議鹰晨，完全開源免費墨叛，上百個組件框架止毕，全部開放，可視化的組件框架漠趁，開發(fā)者可自定義組件扁凛，集成第三方組件，采用MVC設計模式闯传，數(shù)據(jù)和視圖分離谨朝，頁面描述和代碼邏輯分離，支持瀏覽器調試甥绿、真機調試字币、原生調試，等多種調試模式妹窖，開發(fā)者可掌握每一行代碼纬朝。
WeX5一直堅持采用H5+CSS3+JS標準技術，一次開發(fā)骄呼，多端任意部署共苛，確保開發(fā)者成果始終通用、不受限制蜓萄。WeX5的混合應用開發(fā)模式能輕松調用手機設備隅茎，如相機、地圖嫉沽、通訊錄等辟犀，讓開發(fā)者輕松應對各類復雜數(shù)據(jù)應用，代碼量減少80%绸硕。
優(yōu)點：
1.由于遵循Apache開源協(xié)議堂竟，所以可以使用Apache的插件
缺點：
1.教程不敢恭維，不詳細玻佩，沒針對性出嘹，做教程應該針對某功能詳細介紹。
2.使用操作式布局咬崔，不是代碼的税稼，其實這點好處沒有弊端大，因為開發(fā)者或多或少對HTML5垮斯，代碼還是會的郎仆，反而搞個布局工具，讓我們相當于重新學習開發(fā)工具了兜蠕。老手變新手扰肌。
3.部署方式在線更新，不是很理想熊杨。
4.是從cordova工具基礎上開發(fā)的狡耻，使用的也是它的插件墩剖，個人感覺插件首先不太會用，教程不詳細夷狰，并且插件反饋不也友好岭皂，比如我試過下載插件，下載xx沼头。ZIP爷绘，如果ZIP的url找不到，也不提示錯誤进倍，沒提示要我下部怎么做了土至，下載進度沒不知道是有還是沒有。所以WEx5,就開發(fā)功能而言有很大的局限性猾昆。
資料：
· http://docs.wex5.com/wex5-introduction/
· https://www.w3cschool.cn/wex5/k8u91tes.html
· https://www.cnblogs.com/mehjb/p/6127018.html
另還有Ionic框架陶因、Moblile Angular UI框架、Intel XDK框架垂蜗、Sencha Touch框架楷扬、Kendo UI框架、AppsGeyser框架贴见、AppsBuilder框架烘苹、AppMachine、Kinvey框架等混合框架片部。
