一：混合開發(fā)模式的背景
APP的三種開發(fā)模式：Native? App、 Web App、Hybrid App。
1. Native App
Native App，原生APP，使用原生（即Android或iOS）開發(fā)的APP。使用原生開發(fā)有其優(yōu)勢：應(yīng)用的性能好，適配起來相對容易。但原生APP最頭疼的有三個問題：
（1）無法跨平臺：Android和iOS都需要開發(fā)各自平臺的版本——開發(fā)成本高；
（2）升級麻煩：每次升級都要下載安裝包，Android還好，反正不需要審核，下載就下載吧，但iOS就麻煩了，發(fā)布每個版本還得經(jīng)過App
Store的審核，這導(dǎo)致第三個問題；
（3）Android和iOS很難同步發(fā)布。
2.Web App
所謂的Web App，就是把手機(jī)當(dāng)做一個瀏覽器（Android使用WebView，iOS使用UIWebView），做幾個頁面掛在服務(wù)器端，類似于一個小網(wǎng)站。這樣說雖然不太貼切，但實際上給人的感覺就是這樣的。雖然開發(fā)成本大大降低，但頁面訪問速度慢、操作體驗差。于是第三種模式誕生了。
3. Hybrid App
?? 乍一看和Web App沒啥差別，但涉及到的技術(shù)成本、開發(fā)成本、學(xué)習(xí)成本比Web App高，它綜合了Web App的開發(fā)速度和Native App的高性能體驗。之所以說學(xué)習(xí)成本高，是因為開發(fā)高性能的Hybrid App有難度，網(wǎng)絡(luò)資料少。我是兩年半前開始接觸混合模式開發(fā)的，當(dāng)時如何做好屏幕適配、提高UI響應(yīng)速度、如何最大化使用原生功能等內(nèi)容，網(wǎng)絡(luò)幾乎沒有資料。網(wǎng)上能搜索到的都是很粗略的東西，或者就是Hello World級別的東西，涉及到稍微細(xì)節(jié)一點的東西幾乎沒有。由于本系列文章都只講Hybrid，故在此不再啰嗦了。
三種開發(fā)模式各自的特點如下面的表格所示：
?? Hybrid
App（混合模式移動應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。它雖然看上去是一個Native App，但只有一個UI WebView，里面訪問的是一個Web App，比如街旁網(wǎng)最開始的應(yīng)用就是包了個客戶端的殼，其實里面是HTML5的網(wǎng)頁，后來才推出真正的原生應(yī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)。這種應(yīng)用混合邏輯相對簡單。即在需要的時候，將WebView當(dāng)成一個獨立的View（Activity）運行起來，在WebView內(nèi)完成相關(guān)的展示操作。這種移動應(yīng)用主體通常是Native App，Web技術(shù)只是起到補充作用。開發(fā)難度和Native App基本相當(dāng)。
（2）單View混合型
?? 即在同一個View內(nèi)，同時包括Native View和Web View?；ハ嘀g是覆蓋（層疊）的關(guān)系。這種Hybrid App的開發(fā)成本較高，開發(fā)難度較大，但是體驗較好。如百度搜索為代表的單View混合型移動應(yīng)用，既可以實現(xiàn)充分的靈活性，又能實現(xiàn)較好的用戶體驗。
（3）Web主體型
?? 即移動應(yīng)用的主體是Web View，主要以網(wǎng)頁語言編寫，穿插Native功能的Hybrid App開發(fā)類型。這種類型開發(fā)的移動應(yīng)用體驗相對而言存在缺陷，但整體開發(fā)難度大幅降低，并且基本可以實現(xiàn)跨平臺。
?? 從分析可見，Hybrid App中的Web主體型只要能夠解決用戶體驗差的問題，就可以變成最佳Hybrid App解決方案類型，而這也是目前最難解決的問題。
二：線下主流混合模式
HybridApp開發(fā)，現(xiàn)階段主流的平臺包括PhoneGap，AppCan，appMobi，Titanium等，它們基于webkit開源內(nèi)核，使用HTML5?標(biāo)準(zhǔn)開發(fā)，適配機(jī)型簡單，支持開發(fā)者自定義插件，并能很好的應(yīng)用于商業(yè)，教育，娛樂等行業(yè)，成為移動開發(fā)者的首選開發(fā)平臺。
1. PhoneGap（cordova）
PhoneGap是一款A(yù)pache的開源移動開發(fā)平臺。目前已經(jīng)將核心代碼貢獻(xiàn)給Apache cordova，最新版本是5.4.0，它是基于HTML，CSS和JavaScript的，可以使用一些開源的框架比如jQuery Mobile，Dojo Mobile，Sencha Touch等等來提高用戶體驗，也提供了比較豐富的原生插件調(diào)用。
特性：
1.可以使用DreamWeaver 5.5編碼，現(xiàn)在使用appMobi提供的xdk?進(jìn)行模擬器開發(fā)。
2.代碼開源，開發(fā)者可以放心使用。
3.兼容性，一次開發(fā)，多處運行。
4.使用JS+HTML5，成本低。
優(yōu)點：
1. Native接口比較豐富，通過封裝的API可以直接訪問硬件，比如說加速，相機(jī)，指南針，GPS，文件訪問等。
2.接口文檔描述非常詳細(xì)。
3.支持平臺多，包括iOS，Android，Blackberry，Symbian，bada，Windows Phone 7，Windows Phone 8?等。
缺點：
1.需要針對相應(yīng)的平臺環(huán)境配置，進(jìn)行編譯，打包測試，發(fā)布等等。由于使用Hybrid開發(fā)的用戶群，需要對各個平臺的開發(fā)都要需要了解，對硬件等等都要配置，加大開發(fā)成本。
2.使用效果啟動慢，頁面切換響應(yīng)慢，數(shù)據(jù)請求慢。
3.因為是國外的框架，技術(shù)支持不夠到位，出現(xiàn)問題，無法排解，成為技術(shù)攻關(guā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)絡(luò)輿論而言，AppCan是PhoneGap的中國化，但是從對AppCan實際使用，以及轉(zhuǎn)向移動開發(fā)的朋友們互相交流反饋，他們是截然不同的兩個移動平臺，AppCan不僅封裝了類似于PhoneGap的本地調(diào)用功能，而且封裝了uexWindow多窗口機(jī)制，實現(xiàn)了移動端的iframe效果，雖然不是開源項目，但一直都有面向開發(fā)者的免費版，并且也有定位于企業(yè)用戶的企業(yè)版套裝。
特性：
1.提供的集成開發(fā)環(huán)境的IDE進(jìn)行模擬器開發(fā)。
2.兼容性，一次開發(fā)，多處運行。
3.使用JS+HTML5，成本低。
4.在線打包。
5.代碼加密保護(hù)機(jī)制。
優(yōu)點：
1.支持在線上傳證書打包，對于不了解蘋果，以及Android?環(huán)境開發(fā)的人是福音。
2.支持更多的原生調(diào)用，比如UI控件的封裝，通訊類（socket），地圖，支付寶等更多的原生控件支持。
3.擁有統(tǒng)一數(shù)據(jù)統(tǒng)計平臺，便于運營管理開發(fā)的應(yīng)用。
4.完善的技術(shù)支持，官方論壇以及Q群建設(shè)較為完善，使開發(fā)者更好的進(jìn)行交流溝通。
缺點：
1.雖然有中文的開發(fā)文檔，但描述比較簡單，希望他們豐富他們的API文檔。
2.免費版本不支持自定義插件（據(jù)說企業(yè)版可以自定義插件）。
3.暫時只支持iOS，Android兩大平臺。
4.許多功能需要企業(yè)版才能實現(xiàn)，不過是收費的。
資料：
· http://2014appcan.csdn.net
3.APICloud
APICloud是一款“云端一體”的移動開發(fā)平臺，信仰“云端一體”的理念，重新定義了移動應(yīng)用開發(fā)。APICloud為開發(fā)者從“云”和“端”兩個方向提供API，簡化移動應(yīng)用開發(fā)技術(shù)，讓移動應(yīng)用的開發(fā)周期從一個月縮短到7天。APICloud由“云API”和“端API”兩部分組成，可以幫助開發(fā)者快速實現(xiàn)移動應(yīng)用的開發(fā)、測試、發(fā)布、管理和運營的全生命周期管理。
特性：
APICloud提供的原生模塊，涵蓋UI、系統(tǒng)、交互、影音、支付等類型。另外，APICloud還為開發(fā)者提供了APICloud?ID集成開發(fā)環(huán)境，其一鍵真機(jī)調(diào)試、代碼同步、編譯本地測試包等功能也提高了開發(fā)效率。官方號稱7天做出一個App。
優(yōu)點：
1、方案完整，簡化，上手快。
2、IDE整合做的不錯，直接連接云端，SVN代碼同步，直接連接手機(jī)App Loader真機(jī)調(diào)試，Log可以通過IDE輸出，比模擬器真實，直觀。
3、云編譯很方便，跨平臺打包，直接生成二維碼。
4、手機(jī)底層硬件/組件調(diào)用API很實用，比如語音識別，都不錯。
5、文檔完備，相比開源項目往往缺乏文檔，信息需要東拼西湊來說，APICloud的文檔比較集中和全面。
缺點：
?1、缺乏常見模式App的完整框架Demo，比如：一個帶頭部信息，底部導(dǎo)航和側(cè)邊菜單的應(yīng)用框架用APICloud的UI組件怎么寫，頁面間跳轉(zhuǎn)和參數(shù)傳遞怎么寫，這些都是動手開發(fā)之前最先要解決的問題。Demo
App里的組件示例有用，但是框架和基本流程要先跑起來。
2、UI組件不夠豐富。
3、IDE聯(lián)機(jī)調(diào)試的Log輸出不穩(wěn)定，經(jīng)常斷線。
4、文檔層次和細(xì)致程度還不夠。文檔現(xiàn)在的層次有點混亂，不好定位信息，最好分一下類別，比如媒體類，通訊類，等等。另外還有一些API沒有說明文字。
資料：
· https://docs.apicloud.com
· https://jingyan.baidu.com/article/9f7e7ec0ad3da06f2915544e.html
4. React Native
React Native 是一個 JavaScript 的框架，用來撰寫實時的、可原生呈現(xiàn) iOS 和 Android 的應(yīng)用。其是基于React的，而 React 是 Facebook 的用于構(gòu)建用戶界面的 JavaScript 庫。由 Facebook 開發(fā)并在2013年將其開源，React 已經(jīng)得到了頗為廣泛的使用。但是其使用的范圍比較狹窄，它僅是用于渲染用戶的應(yīng)用程序的界面，而不是更大的 MVC 框架。
React Native 也只是 React，但是是針對移動設(shè)備的。也有一些少許的不一樣的地方，比如開發(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本身復(fù)雜的AutoLayout簡化，使用很方便，學(xué)習(xí)起來也更簡單。
5.引入了方便的npm管理，有大量現(xiàn)成的nodejs包可以用（例如moment，underscore等常用模塊），還可以把自己項目模塊搞到內(nèi)部npm上做通用組件，另外，npm上還有不少別人寫的react native的插件。例如下面這個。
6.第三方組件里有一個可以把icon font引入項目的組件，可以在任何顯示圖標(biāo)的地方直接用icon font顯示，灰常方便。
7.調(diào)試很方便，一次編譯后，每次改了js代碼，只需要在模擬器里command+R即可重新加載代碼。有問題會直接報錯，里面有代碼行數(shù)等詳細(xì)信息。
8.完整封裝了各種js內(nèi)置的方法，例如：setTimeout，setInterval，XMLHttpRequest，localstorage，console.log等，都是用oc原生方法封裝的。
9.引入ES6的支持，可以使用各種新特性，例如最常用的箭頭函數(shù)，解決this作用域亂套的問題。
缺點：
1.組件不全，第三方組件也不全，遇到某些特殊功能，需要搗鼓很久，例如攝像相關(guān)的，文件讀寫，文件上傳之類的組件。
?? ? 2.性能并非媲美原生，還是有一些損耗的，特別是交換大數(shù)據(jù)的時候，例如讀取相冊。
?
?? ? 3.ios和android代碼并非通用，有可能會需要維護(hù)兩套，或者在代碼內(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兩個平臺分別構(gòu)建一個軟件包。應(yīng)用程序使用HTML，JavaScript和CSS進(jìn)行開發(fā)，并支持PHP，Ruby和Python。應(yīng)用程序可以使用?Appcelerator API訪問本地特性。并提供Appcelerator
Studio開發(fā)環(huán)境，由于編譯成本地代碼，所以用戶體驗是最好的。
特性：
1.針對不同平臺生成對應(yīng)的原生包。
2.供Appcelerator Studio開發(fā)。
優(yōu)點：
1.針對JS解析生成原生控件，基本達(dá)到純原生的用戶體驗。
2.支持自定義插件。
缺點：
1. API文檔為英文，并且比較簡單，對國內(nèi)用戶使用有一定挑戰(zhàn)。
2.跟PhoneGap同樣，國外框架，技術(shù)支持困難。
3.支持Android，iOS，黑莓平臺。
4.環(huán)境需要用戶自己搭建比較復(fù)雜。
資料：
· 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構(gòu)建網(wǎng)絡(luò)和移動平臺的應(yīng)用程序，可以進(jìn)行屏幕仿真調(diào)試、設(shè)備實際調(diào)試和遙控調(diào)試等。
特性：
1.使用XDK 進(jìn)行開發(fā)。
2. HTML5+CSS+JS。
3.一次開發(fā)，多處運行。
優(yōu)點：
1.本地接口較為豐富，并且推出有游戲加速引擎,主要包括物理引擎、離線和動態(tài)緩存、媒體播放器、驗證和加密、增強(qiáng)現(xiàn)實、二維碼和QR掃描、更好的顯示支持。
缺點：
1.國外框架，技術(shù)支持差。
?資料：
· https://appmobi.com/?q=node%2F153
7.WeX5
WeX5遵循Apache開源協(xié)議，完全開源免費，上百個組件框架，全部開放，可視化的組件框架，開發(fā)者可自定義組件，集成第三方組件，采用MVC設(shè)計模式，數(shù)據(jù)和視圖分離，頁面描述和代碼邏輯分離，支持瀏覽器調(diào)試、真機(jī)調(diào)試、原生調(diào)試，等多種調(diào)試模式，開發(fā)者可掌握每一行代碼。
WeX5一直堅持采用H5+CSS3+JS標(biāo)準(zhǔn)技術(shù)，一次開發(fā)，多端任意部署，確保開發(fā)者成果始終通用、不受限制。WeX5的混合應(yīng)用開發(fā)模式能輕松調(diào)用手機(jī)設(shè)備，如相機(jī)、地圖、通訊錄等，讓開發(fā)者輕松應(yīng)對各類復(fù)雜數(shù)據(jù)應(yīng)用，代碼量減少80%。
優(yōu)點：
1.由于遵循Apache開源協(xié)議，所以可以使用Apache的插件
缺點：
1.教程不敢恭維，不詳細(xì)，沒針對性，做教程應(yīng)該針對某功能詳細(xì)介紹。
2.使用操作式布局，不是代碼的，其實這點好處沒有弊端大，因為開發(fā)者或多或少對HTML5，代碼還是會的，反而搞個布局工具，讓我們相當(dāng)于重新學(xué)習(xí)開發(fā)工具了。老手變新手。
3.部署方式在線更新，不是很理想。
4.是從cordova工具基礎(chǔ)上開發(fā)的，使用的也是它的插件，個人感覺插件首先不太會用，教程不詳細(xì)，并且插件反饋不也友好，比如我試過下載插件，下載xx。ZIP，如果ZIP的url找不到，也不提示錯誤，沒提示要我下部怎么做了，下載進(jìn)度沒不知道是有還是沒有。所以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框架等混合框架。
