背景介紹

????如果你的團隊有自己維護的網(wǎng)站，現(xiàn)在想拓展業(yè)務(wù)場景快速做一個移動App喉钢，那么就可以考慮利用混合開發(fā)來完成這個任務(wù)疼燥。
????本文就初步探討下混合開發(fā)技術(shù)，主要內(nèi)容有：
????1 混合開發(fā)的概念-原生與H5的合作鲫懒；
????2 原生與H5交互方案以及使用場景嫩实；
????3 原生與H5交互實踐詳解；
????4 混合開發(fā)未來展望窥岩。

一甲献、 混合開發(fā)的概念-原生與H5的相互合作

??????混合開發(fā)是一種開發(fā)方式（模式），它指開發(fā)一個App時候颂翼，一部分功能用原生（native）構(gòu)建晃洒，一部分功能用html5構(gòu)建，這樣用兩種方式合作開發(fā)出來的App叫Hybrid App朦乏。
??????混合開發(fā)的對立面是單一開發(fā)球及，比如我們常說的純原生（native）開發(fā)就是一種單一開發(fā)，純Html5開發(fā)當然也是一種單一開發(fā)（請注意：單一開發(fā)是本文為了探討混合開發(fā)概念提出的對立概念呻疹，主要指利用特定開發(fā)語言吃引、開發(fā)環(huán)境進行的開發(fā)行為）。為了更好理解混合開發(fā)，我們再回顧下它的兩個合作方镊尺，原生開發(fā)和H5開發(fā)一些基礎(chǔ)知識朦佩。

??????1）什么是原生開發(fā) ，它的優(yōu)勢庐氮？
?????? 原生開發(fā)是基于手機本地操作系統(tǒng)如IOS吕粗、Android，利用官方提供的開發(fā)語言旭愧、開發(fā)類庫颅筋、開發(fā)工具進行App開發(fā) 。用這種方式開發(fā)出來的App输枯，叫native app-本地app议泵。
??????Native App業(yè)務(wù)邏輯代碼在本地，操作系統(tǒng)能對Native App進行有效地資源約束（比如內(nèi)存不能占用太多桃熄、流量不能浪費太多）先口、權(quán)限控制、生命周期監(jiān)管瞳收，這樣有問題也可以找到負責APP碉京。
??????離我越近、交融越多螟深、對你掌控力度越大谐宙，那么我就越信任你，所以給你更多的便利和權(quán)限界弧。 基于這樣的理念凡蜻，操作系統(tǒng)會向Native app開放更多的能力接口，這樣Native App就可以更好的利用操作系統(tǒng)“手里”的設(shè)備垢箕，比如相機划栓、GPS、藍牙等条获。在手機廠商做過的同學就會知道忠荞，預(yù)裝App跟手機廠商更緊密，所以他們會擁有比三方App更高的權(quán)限和能力帅掘，可以有更多的騷操作委煤。
??????不過萬事有利有弊，跟一個特定平臺關(guān)系越密切锄开，那么向其他平臺發(fā)展時候素标，又需要花費大量時間、精力來重新建立不太一樣的親密關(guān)系萍悴，這些對企業(yè)來說就是時間與金錢头遭。所以Native開發(fā)的缺點就是耗時較長寓免、耗資巨大。

??????2）什么是H5计维，它的優(yōu)勢袜香？
??????H5是HTML(HyperText Markup Language)超文本標記語言第五個版本。那什么是超文本標記語言呢鲫惶？
??????首先認識下超文本蜈首，純文本就是類似word 里面的文字，超文本就是文本中又嵌入了圖片欠母、鏈接欢策、音樂、程序赏淌、甚至未來加入氣味踩寇、感覺等，他們本質(zhì)都是信息的不同表現(xiàn)形式六水。超文本=多類型信息的融合俺孙。
??????其次了解下標記語言（markup language）。
??????文字語言本質(zhì)是祖祖輩輩傳遞下來并不斷演變的符號解析規(guī)則（約定掷贾、協(xié)議）睛榄，比如說“蘋果”是中文中的一個符號，“Apple”是英文中的一個符號想帅，這兩個符號都指的是那個紅紅的场靴，圓圓的、吃起來甜甜的東西博脑。學習語言的過程就是大腦構(gòu)建符號解析系統(tǒng)的過程憎乙，比如看到“我吃香辣雞翅”，我們的大腦就會自動將這幾個符號解析（理解叉趣、翻譯）成為一副香噴噴的場景，然后就可能流出了不爭氣的口水该押，還要偷偷的咽下去疗杉。
??????markup language 直翻是標記語言，其實更應(yīng)翻譯為增強語言蚕礼。markup language標記語言不僅有符號解析的約定烟具，還有符號展示方式的約定。所謂的展示方式具體來說就是符號（比如說文字）的大小奠蹬、顏色朝聋、位置、背景囤躁、出場方式等冀痕，不同的展示方式給人不同的感官沖擊力荔睹、從而達到不同的表達效果。例如Android中的xml就是一種標記語言言蛇。

??????超文本標記語言（html5）是一種多類型信息的內(nèi)容和展示方式的約定（協(xié)議）僻他，
我們平時看到的H5頁面，它的源碼就是按照H5協(xié)議書寫的腊尚，用瀏覽器解析后就是我們看到的網(wǎng)頁吨拗。

??????談到H5就不可避免聊到JavaScript。什么是Script婿斥，Script英文釋義：a written text of a play, film/movie, broadcast, talk, etc.由此可見Script本意就是劇本劝篷，只是當時的翻譯不懂，至于當時為啥命名為JavaScript據(jù)說為了蹭Java熱度來增加自己知名度民宿。
??????在沒有加入JS之前娇妓，H5是靜態(tài)的，是一副定格了的風景勘高，當有了劇本（JS）之后峡蟋，H5中的對象便根據(jù)劇本來完成各自的表演，H5成了一場熱鬧的舞臺劇华望。

??????H5優(yōu)勢和缺點：因為H5不僅僅有文字蕊蝗、圖片等信息，還包括這種文字赖舟、圖片等的展示方式蓬戚、比如布局、大小宾抓、背景等子漩，所以H5頁面優(yōu)勢就是更靈活、更方便的UI變化石洗，但是H5在傳輸?shù)臅r候就不僅要把信息（比如文字)傳過來幢泼，還要把文字顯示在哪里，大小讲衫、顏色這些值也傳遞過來缕棵。解析的時候，也不僅需要解析信息（比如文字）的語義還要解析文字的布局涉兽、顏色等展示方式招驴，隨著信息展示方式（比如說布局）的復(fù)雜度提升、總的信息傳輸量和解析時間都會大大增加枷畏。
??????本章開始講到混合開發(fā)就是Native開發(fā)和H5開發(fā)的合作完成的别厘，既然有合作，那么Native和H5之間就會有很多交流拥诡，接下來就談?wù)勅绾瓮瓿伞敖涣鳌钡摹?/p>

二 触趴、原生與H5交互方案以及使用場景

??????前面有談到氮发，通過瀏覽器可以將h5源碼變成為我們看到h5頁面（網(wǎng)頁），那么原生中如果有一個類似于瀏覽器的類雕蔽，我們就可以在原生中使用這個類來處理h5相關(guān)的事情折柠，事實的確如此，這個類叫WebView批狐。為了更深入的了解這種交互方案扇售，我們先梳理下瀏覽器的基本功能。

瀏覽器基本功能

??????我們用瀏覽器是這樣的：輸入一個url（統(tǒng)一資源定位符）嚣艇，比如百度首頁https://www.baidu.com直接點擊承冰，然后瀏覽器就給我們一個豐富多彩的網(wǎng)頁。其具體流程如下：
??????1） 網(wǎng)絡(luò)請求食零，從我們輸入的地址獲取到信息資料-h5源碼困乒；
??????2 ）把h5源碼按照h5協(xié)議解析出來，瀏覽器這時候就知道標題該放哪里贰谣，背景什么樣子娜搂，哪個信息是圖片，圖片該放在哪個位置吱抚，圖片或者文字有沒有什么入場動畫等等百宇。
??????3）把剛才解析好的東西顯示出來，顯示就是繪制秘豹， 上一步解析后咱就胸中有畫卷携御，那么現(xiàn)在就可以下筆如有神 ，顯示用一個專業(yè)名詞就是渲染既绕。
??????所以瀏覽器的基本功能是網(wǎng)絡(luò)請求啄刹、頁面源碼解析、頁面渲染凄贩。但是你還發(fā)現(xiàn)不同的瀏覽器還有其他一些很不錯的功能誓军，比如收藏網(wǎng)址、記錄常用網(wǎng)站疲扎、網(wǎng)頁截圖等等來滿足不同用戶各種需求谭企。為了種基礎(chǔ)功能穩(wěn)定，擴展功能豐富多彩评肆，瀏覽器的基本功能和擴展功能分離了，基本功能被整合成為一個單獨模塊叫瀏覽器內(nèi)核非区，它一般由一些實力比較強的公司提供瓜挽，基本功能要保持穩(wěn)定可靠嘛。
??????瀏覽器內(nèi)核=網(wǎng)絡(luò)請求+解析+渲染（顯示）
??????其他的輔助功能征绸，各個瀏覽器廠家就可以隨意添加定制久橙，就有了各種各樣的瀏覽器俄占。

原生與H5交互方案

??????了解瀏覽器基本功能后，就很容易理解WebView淆衷，Webview是Android系統(tǒng)提供的一個內(nèi)置瀏覽器對象類缸榄，它早期采用WebKit內(nèi)核，這個內(nèi)核也是蘋果瀏覽器safari的內(nèi)核祝拯，后來用上了自己在此基礎(chǔ)上研發(fā)的內(nèi)核甚带。正是通過這個Android內(nèi)置的瀏覽器，Android便可以很方便的展示H5頁面佳头，如下

 mWebView.loadUrl("https://www.baidu.com");

同時WebView也提供了豐富的接口去設(shè)置這個瀏覽器（比如WebView是否支持頁面縮放等）和與原生進行數(shù)據(jù)交互鹰贵。
??????講到這里，你是不是有一個想法：既然在原生中增加一個實現(xiàn)瀏覽器的類就可以實現(xiàn)原生與H5交互康嘉，那么我是否可以不用原生的WebView呢碉输？
??????回答是Yes，你可以自己手寫(大神可以)或者用三方的瀏覽器類庫去完成這個任務(wù)亭珍，比如可以接入騰訊瀏覽器敷钾，它的內(nèi)核x5是騰訊基于WebKit內(nèi)核深度優(yōu)化的，聲稱可以更快肄梨、更好阻荒、更安全，它的用法與WebView基本一樣峭范。

原生與H5交互使用場景

??????前面有提到原生與H5的特點财松，原生就是與系統(tǒng)親近但是不能跨平臺，H5就是信息表現(xiàn)靈活纱控，跨平臺辆毡，但是相應(yīng)的數(shù)據(jù)傳輸和解析會增加很多時間。所以混合開發(fā)場景大概如下：
??????1 團隊有很多業(yè)務(wù)已經(jīng)是H5甜害，而且業(yè)務(wù)頁面變化也挺頻繁舶掖；
??????2 App有加載速度要求很不是很嚴格的頁面，或者使用頻率很低的頁面尔店；
??????3 需要使用到移動端的相機眨攘，傳感器等能力。
搞清楚了WebView是什么以及何時使用之后嚣州，我們便可以開始探討：

三鲫售、WebView如何使用

??????前文有講到，WebView其實就是一個內(nèi)置的瀏覽器该肴，所以這里再次回想我們怎么用瀏覽器情竹，比如這里以瀏覽器訪問http://www.reibang.com/p/c8262379c8ec（這是我一篇介紹網(wǎng)絡(luò)層搭建的文章）為例：
??????1 ）打開瀏覽器
??????2 ）設(shè)置瀏覽器（省略則使用默認設(shè)置）
??????3 ）輸入要訪問地址：http://www.reibang.com/p/c8262379c8ec
??????4 ）等待瀏覽器響應(yīng)，當返回內(nèi)容時候進行相關(guān)處理匀哄，比如觀看秦效，或者copy到自己個人筆記中雏蛮。
??????所以Webview使用也大概這幾個步驟：
??????1）WebView對象初始化，相當于打開瀏覽器阱州；
??????2）WebView設(shè)置挑秉，相當于設(shè)置瀏覽器；
??????3）添加WebView一些通知事件苔货，比如加載頁面開始犀概、加載頁面完畢的通知、H5中JS相關(guān)事件的一些通知蒲赂；
??????4）添加Android與H5交互的方法阱冶，包括Android調(diào)用H5中的方法，H5中調(diào)用Android的方法滥嘴；
??????5）加載url木蹬，設(shè)置完畢開始去請求加載相關(guān)頁面
具體使用見我的git庫：https://github.com/kingkong-li/HighPerformanceWebView
這里面有很詳細的注釋幫你理解每一個步驟，并且可以下載后在AndroidStudio中可直接編譯運行若皱，如果你要做一個簡單的混合開發(fā)镊叁，只需要修改下url就可以了。

四走触、混合開發(fā)的未來

??????最后我們在這里探討下混合開發(fā)的未來晦譬，特別是5G通信來了之后通信速度大大提升，加之手機性能過剩互广，之前原生的效果用H5實現(xiàn)就可以達到用戶難以區(qū)分的程度敛腌。
??????那么這時候是否意味著原生開發(fā)的消亡，純WebApp大行其道惫皱？
??????否也Ｏ穹！一方面基于本文前面提到的理論旅敷，離系統(tǒng)越近與系統(tǒng)越緊密生棍，系統(tǒng)才越信任，才能給與更多的權(quán)限與本地能力媳谁，系統(tǒng)廠商不會拱手把自己本地能力暴露在網(wǎng)絡(luò)大環(huán)境中涂滴，除了自己利益也是對用戶安全負責。
??????另一方面5G雖然來了晴音，但是VR柔纵、AR、MR锤躁、感官共享首量、IOT等新領(lǐng)域技術(shù)對通信和本地硬件性能要求更是成噸增長，還是會存在通信和性能的限制，僅僅用Web開發(fā)也許還是玩不轉(zhuǎn)加缘。
??????綜上所述，個人認為混合開發(fā)才是未來觉啊。其中Native部分比重會下降并且更加注重于權(quán)限拣宏、系統(tǒng)能力獲取、高性能部分杠人，但由于高昂的費用勋乾，只有大公司才會采用原生開發(fā)。小公司則會利用大公司或者團體提供的App平臺做一些跨平臺的東西嗡善，比如當前已經(jīng)成型的快應(yīng)用辑莫、微信、支付寶罩引、百家號等等各吨。個人一些淺薄見解，歡迎大家一起來評論交流~