重要的并不是我們提供的信息量有多大捌肴，而是我們能否給他們提供真正需要的信息柒室。 -《瞬間之美》
本文涉及如下方面：
- 什么是Hybrid架構(gòu)(可略讀)
- Hybrid與Native的關(guān)系
- 設(shè)計上的考慮
- 一句話說明白
- 技術(shù)實現(xiàn)
- Cordova
Hybrid架構(gòu)
Hybrid App：Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually, they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.
Hybrid App（混合模式移動應(yīng)用）是指介于web-app、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”。Hybrid開發(fā)效率高、跨平臺商叹、低層本的特點，Hybrid從業(yè)務(wù)開發(fā)上講只泼，沒有版本問題沈自，對于BUG能及時修復(fù)。但Hybrid也是有缺點的辜妓，Hybrid體驗比不上Native枯途，同樣的功能在性能上存在巨大差距。Web界面上JS對HTML Node的操作需要消耗大量的CPU資源籍滴，手機CPU的性能還不能與PC相提并論酪夷，就算在智能手機之間，硬件水準也參差不齊孽惰，一個可以在iPhone 6上流暢運行的界面晚岭，跑到三星上很可能就卡住不動了。所以我們經(jīng)逞Γ可以發(fā)現(xiàn)一些富交互頁面上的操作無法達到令人滿意的流暢度坦报，而流暢度也正是用戶評價一款A(yù)pp優(yōu)劣的最直觀因素库说。所以混合式編程比較適用于需要快速試錯、快速占領(lǐng)市場的團隊片择，當然潜的，也不是絕對。
Hybrid App按網(wǎng)頁語言與程序語言的混合字管，通常分為三種類型：多View混合型啰挪，單View混合型，Web主體型嘲叔。
多View混合型即Native View和Web View獨立展示亡呵，交替出現(xiàn)。這種應(yīng)用混合邏輯相對簡單硫戈。即在需要的時候锰什，將WebView當成一個獨立的View（Activity）運行起來，在WebView內(nèi)完成相關(guān)的展示操作丁逝。這種移動應(yīng)用主體通常是Native App歇由，Web技術(shù)只是起到補充作用。開發(fā)難度和Native App基本相當果港。
單View混合型即在同一個View內(nèi)，同時包括Native View和Web View糊昙⌒谅樱互相之間是覆蓋（層疊）的關(guān)系。這種Hybrid App的開發(fā)成本較高释牺，開發(fā)難度較大萝衩，但是體驗較好。如百度搜索為代表的單View混合型移動應(yīng)用没咙，既可以實現(xiàn)充分的靈活性猩谊，又能實現(xiàn)較好的用戶體驗。
Web主體型即移動應(yīng)用的主體是Web View祭刚，主要以網(wǎng)頁語言編寫牌捷，穿插Native功能的Hybrid App開發(fā)類型。這種類型開發(fā)的移動應(yīng)用體驗相對而言存在缺陷涡驮，但整體開發(fā)難度大幅降低暗甥，并且基本可以實現(xiàn)跨平臺。Web主體型的移動應(yīng)用用戶體驗的好壞捉捅，主要取決于底層中間件的交互與跨平臺的能力撤防。國外的appMobi、PhoneGap和國內(nèi)的WeX5棒口、AppCan和Rexsee都屬于Web主體型移動應(yīng)用中間件寄月。其中Rexsee不支持跨平臺開發(fā)辜膝。appMobi和PhoneGap除基礎(chǔ)的底層能力更多是通過插件（Plugins）擴展的機制實現(xiàn)Hybrid。AppCan除了插件機制漾肮，還提供了大量的單View混合型的接口來完善和彌補Web主體型Hybrid App體驗差的問題厂抖，接近Native App的體驗。而WeX5則在揉合PhoneGap和Bootstrap等主流技術(shù)的基礎(chǔ)上初橘，對性能進一步做了深度優(yōu)化验游，不但完全具備Native App對本地資源的調(diào)用能力，性能體驗也不輸原生保檐；WeX5所開發(fā)出來的app具備完全的跨端運行能力耕蝉，可以無需任何修改直接運行在各種前端環(huán)境上。
多主體共存型（靈活型）是一種新型的開發(fā)模式夜只，即支持Web主體型的應(yīng)用垒在，又支持以Native主體的應(yīng)用，也支持兩者混合的開發(fā)模式扔亥。比如kerkee框架 场躯，它具有跨平臺、用戶體驗好旅挤、性能高踢关、擴展性好、靈活性強粘茄、易維護签舞、規(guī)范化、具有Debug環(huán)境柒瓣、徹底解決跨域問題等特點儒搭。用戶體驗與Native App媲美。功能方面芙贫，開發(fā)者可隨意擴展接口搂鲫。
Hybrid與Native的關(guān)系
在Hybrid架構(gòu)設(shè)計中Native提供的是一宿主環(huán)境，實現(xiàn)合理的邏輯架構(gòu)需要考慮：交互設(shè)計磺平，資源訪問魂仍，Hybrid開發(fā)調(diào)試，通訊設(shè)計拣挪、并發(fā)設(shè)計蓄诽、異常處理、日志監(jiān)控以及安全模塊等問題媒吗，前端要做的事情就是封裝Native提供的各種能力仑氛。
處理交互設(shè)計時需要考慮前端與Native配合處理，如H5與Native的互相跳轉(zhuǎn)邏輯；
資源訪問機制需要做到既能以file的方式訪問Native內(nèi)部資源锯岖，又能使用url的方式訪問線上資源介袜，處理好跳轉(zhuǎn)的邏輯；需要提供前端資源增量替換機制出吹，以擺脫APP迭代發(fā)版問題遇伞，避免用戶升級APP，這里將涉及到靜態(tài)資源在APP中的存放策略捶牢，更新策略的設(shè)計鸠珠，以及服務(wù)器端的支持等。當然秋麸，有現(xiàn)成框架和解決方案的支持渐排，但這些確實是不可忽略的問題。
Hybrid的交互是通過Native調(diào)用前端頁面的JS方法灸蟆，或者前端頁面通過JS調(diào)用Native提供的接口實現(xiàn)的驯耻，兩者交互的橋梁是Webview，iOS可以使用javascripbrige來實現(xiàn)（現(xiàn)成框架）炒考，在UIWebView的shouldStartLoadWithRequest方法里面捕獲url的變化可缚，解析出需要的參數(shù)，然后傳給一個統(tǒng)一的處理方法斋枢。app自身可以自定義url schema帘靡，并且把自定義的url注冊在調(diào)度中心。JS與Native通信可以創(chuàng)建這類URL被Native捕獲處理瓤帚，即schema跳轉(zhuǎn)邏輯描姚。APP安裝后會在手機上注冊一個schema，比如淘寶是taobao://缘滥，Native會有一個進程監(jiān)控Webview發(fā)出的所有schema://請求，然后分發(fā)到“控制器”谒主。hybridapi處理程序朝扼，Native控制器處理時會需要param提供的參數(shù)（encode過），根據(jù)實際需要處理業(yè)務(wù)邏輯問題霎肯。
設(shè)計上的考慮
無論在Android還是iOS平臺上擎颖，都有各自的一套交互習(xí)慣，包括視覺風格观游，界面切換搂捧，操作習(xí)慣等，與Web習(xí)慣完全不同懂缕。以iOS界面切換為例允跑，系統(tǒng)風格是新界面自右向左推入，后退時界面自左向右推出，而舊界面保持狀態(tài)聋丝。Web開發(fā)的默認習(xí)慣則是刷新頁面索烹，無論新載入頁面或是后退，都會對頁面進行刷新弱睦。因此使用Web模式開發(fā)多界面功能就面臨這樣的交互習(xí)慣差異百姓，造成體驗上的損失。當然Web方式也可模擬Native的交互方式况木，但這樣的模擬首先提高了開發(fā)成本垒拢，有悖于最初的高效原則，從效果上看火惊，也很難達到Native的流暢性求类。
一句話說明白
如果用一句話來講明白這個問題，就是Hybrid混合式編程可以在Native原生應(yīng)用的基礎(chǔ)上通過一些Hybrid框架實現(xiàn)本地和JS的交互處理矗晃。在不影響性能的情況下仑嗅，實現(xiàn)應(yīng)用的動態(tài)化。
技術(shù)實現(xiàn)原理
Hybrid技術(shù)將靜態(tài)資源存于Native张症，目錄結(jié)構(gòu)可以如下面劃分仓技，當然不是絕對的脖捻，基本要求是將對應(yīng)版本的Hybrid插件下載到本地兆衅，存放方便就好羡亩。
在正式的開發(fā)中畏铆，還要考慮增量機制雷袋，因為不同的版本會對應(yīng)著不同的業(yè)務(wù)邏輯，真實的增量機制需要服務(wù)器端的配合辞居，版本映射表是每次大版本APP發(fā)布時由服務(wù)器端生成楷怒。當APP啟動時，APP會讀取版本信息瓦灶，如果發(fā)現(xiàn)本地版本號比線上的小鸠删，便會下載對應(yīng)的zip文件，然后解壓之后并且替換整個原有的文件贼陶，本次增量結(jié)束刃泡，因為所有的版本文件不會重復(fù)巧娱，APP回滾時可用回到任意想去的版本，也可以對任意版本做BUG修復(fù)家卖。
以上，我們得知庙楚，Hybrid和Native交互可以通過兩種方式：Url Schema和JavaScriptCore等地交互馒闷。H5與Native交互的橋梁為Webview酪捡，“聯(lián)系”的方式以url schema的方式纳账，在用戶安裝app后逛薇，app可以自定義url schema，并且把自定義的url注冊在調(diào)度中心疏虫。
demoschema://hybridapi?callback=hybrid_1446276509894¶m=%7B%22data1%22%3A1%2C%22data2%22%3A2%7D
App調(diào)用H5:將一組API綁定在webView的window對象上永罚，App通過iOS原生方法調(diào)用window對象中的js方法呢袱。
H5與App通信：App實現(xiàn)對Webview URL的觀察者模式，H5 通過改變URL的哈希值治专，通過解析哈希值的變化執(zhí)行相應(yīng)的操作棒旗。
另一種是JavaScriptCore婿滓，具體的可以看之前寫的文章JavaScriptCore框架橘券。
context[@"makeUIColor"] = ^(NSDictionary *rgbColor){
float red = [rgbColor[@"red"] floatValue];
float green = [rgbColor[@"green"] floatValue];
float blue = [rgbColor[@"blue"] floatValue];
return [UIColor colorWithRed:(red / 255.0)
green:(green / 255.0)
blue:(blue / 255.0)
alpha:1];
};
JSValue *color = [context evaluateScript:@"makeUIColor({red: 50, green: 150, blue: 250})"];
NSLog(@"color:%@",[color toObject]);
通過這種方式就可以在JavaScript中調(diào)用Objective-C毯焕。
當然，除此之外也可以用JSBridge技術(shù)實現(xiàn)磺樱。
JS中：
button.onclick = function(e) {
e.preventDefault();
var data = 'Hello from JS button';
log('JS sending message', data);
window.external.test1(data, 'haha');
}
通過JSBridge,執(zhí)行本地類中的test1方法纳猫。此處只是一個引子，詳細的會在另一篇文章中單獨引出竹捉。
至于H5和Native的跳轉(zhuǎn)問題芜辕，可以采用統(tǒng)跳協(xié)議來完成。這又是另外一個問題了块差。當然也可以在JS里定義跳轉(zhuǎn)地址侵续，通過JS交互來處理。
Cordova
寫了那么久憨闰，感覺現(xiàn)在才進入主題状蜗。
Cordova提供了一組設(shè)備相關(guān)的API，通過這組API起趾，移動應(yīng)用能夠以JavaScript訪問原生的設(shè)備功能诗舰，如攝像頭、麥克風等训裆。Cordova還提供了一組統(tǒng)一的JavaScript類庫眶根，以及為這些類庫所用的設(shè)備相關(guān)的原生后臺代碼。
測試使用可以到Github上下載源碼,也可以使用命令：
cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add ios
這樣就創(chuàng)建了hello文件夾下的測試目錄(com.example.hello 為應(yīng)用程序的id名边琉，與Xcode中類似属百，可以在 config.xml 中修改，如果不指定的話默認為 io.cordova.hellocordova)变姨。
目錄文件說明：
config.xml ：cordova的配置文件
hooks/ ：存放自定義cordova命令的腳本文件族扰。
platforms/ ：各個平臺原生工程代碼，會在build時被覆蓋勿修改
plugins/ ：插件目錄（主要是提供各個平臺的原生API）
www/ ：用H5編寫的源代碼目錄定欧，build時會被放入各個平臺的assets\www目錄渔呵。
www/index.html ：App入口html文件
在Xcode編譯運行的話，使用的是 Staging 下面的html頁面砍鸠。
命令安裝需要安裝cordova命令
brew install node //該命令執(zhí)行后扩氢，自動裝好node和npm。
brew upgrade node //更新node(可不執(zhí)行)
為了解決校驗碼不正確問題爷辱。npm 使用國內(nèi)鏡像的方法 （三種辦法任意一種都能解決問題录豺，建議使用第三種朦肘，將配置寫死，下次用的時候配置還在）:
1.通過config命令
npm config set registry http://registry.cnpmjs.org npm info underscore （如果上面配置正確這個命令會有字符串response）
2.命令行指定
npm --registry http://registry.cnpmjs.org info underscore
3.編輯 ~/.npmrc 加入下面內(nèi)容
registry = http://registry.cnpmjs.org
之后：
sudo npm install -g cordova
打開platform/ios里的HelloWorld.xcodeproj即可測試双饥。
下面就是源碼分析了媒抠，因為要對照著源碼來說，大家可以到這里咏花，參考詳細的源碼分析趴生。通過這里，寫一個混合式App應(yīng)該不是問題了昏翰。
最后冲秽，祝大家看的愉快！
