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