背景介紹

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

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

??????混合開發(fā)是一種開發(fā)方式（模式），它指開發(fā)一個(gè)App時(shí)候，一部分功能用原生（native）構(gòu)建，一部分功能用html5構(gòu)建，這樣用兩種方式合作開發(fā)出來的App叫Hybrid App。
??????混合開發(fā)的對(duì)立面是單一開發(fā)，比如我們常說的純?cè)╪ative）開發(fā)就是一種單一開發(fā)，純Html5開發(fā)當(dāng)然也是一種單一開發(fā)（請(qǐng)注意：?jiǎn)我婚_發(fā)是本文為了探討混合開發(fā)概念提出的對(duì)立概念，主要指利用特定開發(fā)語(yǔ)言、開發(fā)環(huán)境進(jìn)行的開發(fā)行為）。為了更好理解混合開發(fā)，我們?cè)倩仡櫹滤膬蓚€(gè)合作方，原生開發(fā)和H5開發(fā)一些基礎(chǔ)知識(shí)。

??????1）什么是原生開發(fā) ，它的優(yōu)勢(shì)？
?????? 原生開發(fā)是基于手機(jī)本地操作系統(tǒng)如IOS、Android，利用官方提供的開發(fā)語(yǔ)言、開發(fā)類庫(kù)、開發(fā)工具進(jìn)行App開發(fā) 。用這種方式開發(fā)出來的App，叫native app-本地app。
??????Native App業(yè)務(wù)邏輯代碼在本地，操作系統(tǒng)能對(duì)Native App進(jìn)行有效地資源約束（比如內(nèi)存不能占用太多、流量不能浪費(fèi)太多）、權(quán)限控制、生命周期監(jiān)管，這樣有問題也可以找到負(fù)責(zé)APP。
??????離我越近、交融越多、對(duì)你掌控力度越大，那么我就越信任你，所以給你更多的便利和權(quán)限。 基于這樣的理念，操作系統(tǒng)會(huì)向Native app開放更多的能力接口，這樣Native App就可以更好的利用操作系統(tǒng)“手里”的設(shè)備，比如相機(jī)、GPS、藍(lán)牙等。在手機(jī)廠商做過的同學(xué)就會(huì)知道，預(yù)裝App跟手機(jī)廠商更緊密，所以他們會(huì)擁有比三方App更高的權(quán)限和能力，可以有更多的騷操作。
??????不過萬(wàn)事有利有弊，跟一個(gè)特定平臺(tái)關(guān)系越密切，那么向其他平臺(tái)發(fā)展時(shí)候，又需要花費(fèi)大量時(shí)間、精力來重新建立不太一樣的親密關(guān)系，這些對(duì)企業(yè)來說就是時(shí)間與金錢。所以Native開發(fā)的缺點(diǎn)就是耗時(shí)較長(zhǎng)、耗資巨大。

??????2）什么是H5，它的優(yōu)勢(shì)？
??????H5是HTML(HyperText Markup Language)超文本標(biāo)記語(yǔ)言第五個(gè)版本。那什么是超文本標(biāo)記語(yǔ)言呢？
??????首先認(rèn)識(shí)下超文本，純文本就是類似word 里面的文字，超文本就是文本中又嵌入了圖片、鏈接、音樂、程序、甚至未來加入氣味、感覺等，他們本質(zhì)都是信息的不同表現(xiàn)形式。超文本=多類型信息的融合。
??????其次了解下標(biāo)記語(yǔ)言（markup language）。
??????文字語(yǔ)言本質(zhì)是祖祖輩輩傳遞下來并不斷演變的符號(hào)解析規(guī)則（約定、協(xié)議），比如說“蘋果”是中文中的一個(gè)符號(hào)，“Apple”是英文中的一個(gè)符號(hào)，這兩個(gè)符號(hào)都指的是那個(gè)紅紅的，圓圓的、吃起來甜甜的東西。學(xué)習(xí)語(yǔ)言的過程就是大腦構(gòu)建符號(hào)解析系統(tǒng)的過程，比如看到“我吃香辣雞翅”，我們的大腦就會(huì)自動(dòng)將這幾個(gè)符號(hào)解析（理解、翻譯）成為一副香噴噴的場(chǎng)景，然后就可能流出了不爭(zhēng)氣的口水，還要偷偷的咽下去。
??????markup language 直翻是標(biāo)記語(yǔ)言，其實(shí)更應(yīng)翻譯為增強(qiáng)語(yǔ)言。markup language標(biāo)記語(yǔ)言不僅有符號(hào)解析的約定，還有符號(hào)展示方式的約定。所謂的展示方式具體來說就是符號(hào)（比如說文字）的大小、顏色、位置、背景、出場(chǎng)方式等，不同的展示方式給人不同的感官?zèng)_擊力、從而達(dá)到不同的表達(dá)效果。例如Android中的xml就是一種標(biāo)記語(yǔ)言。

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

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

??????H5優(yōu)勢(shì)和缺點(diǎn)：因?yàn)镠5不僅僅有文字、圖片等信息，還包括這種文字、圖片等的展示方式、比如布局、大小、背景等，所以H5頁(yè)面優(yōu)勢(shì)就是更靈活、更方便的UI變化，但是H5在傳輸?shù)臅r(shí)候就不僅要把信息（比如文字)傳過來，還要把文字顯示在哪里，大小、顏色這些值也傳遞過來。解析的時(shí)候，也不僅需要解析信息（比如文字）的語(yǔ)義還要解析文字的布局、顏色等展示方式，隨著信息展示方式（比如說布局）的復(fù)雜度提升、總的信息傳輸量和解析時(shí)間都會(huì)大大增加。
??????本章開始講到混合開發(fā)就是Native開發(fā)和H5開發(fā)的合作完成的，既然有合作，那么Native和H5之間就會(huì)有很多交流，接下來就談?wù)勅绾瓮瓿伞敖涣鳌钡摹?/p>

二 、原生與H5交互方案以及使用場(chǎng)景

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

瀏覽器基本功能

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

原生與H5交互方案

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

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

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

原生與H5交互使用場(chǎng)景

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

三、WebView如何使用

??????前文有講到，WebView其實(shí)就是一個(gè)內(nèi)置的瀏覽器，所以這里再次回想我們?cè)趺从脼g覽器，比如這里以瀏覽器訪問http://m.itdecent.cn/p/c8262379c8ec（這是我一篇介紹網(wǎng)絡(luò)層搭建的文章）為例：
??????1 ）打開瀏覽器
??????2 ）設(shè)置瀏覽器（省略則使用默認(rèn)設(shè)置）
??????3 ）輸入要訪問地址：http://m.itdecent.cn/p/c8262379c8ec
??????4 ）等待瀏覽器響應(yīng)，當(dāng)返回內(nèi)容時(shí)候進(jìn)行相關(guān)處理，比如觀看，或者copy到自己個(gè)人筆記中。
??????所以Webview使用也大概這幾個(gè)步驟：
??????1）WebView對(duì)象初始化，相當(dāng)于打開瀏覽器；
??????2）WebView設(shè)置，相當(dāng)于設(shè)置瀏覽器；
??????3）添加WebView一些通知事件，比如加載頁(yè)面開始、加載頁(yè)面完畢的通知、H5中JS相關(guān)事件的一些通知；
??????4）添加Android與H5交互的方法，包括Android調(diào)用H5中的方法，H5中調(diào)用Android的方法；
??????5）加載url，設(shè)置完畢開始去請(qǐng)求加載相關(guān)頁(yè)面
具體使用見我的git庫(kù)：https://github.com/kingkong-li/HighPerformanceWebView
這里面有很詳細(xì)的注釋幫你理解每一個(gè)步驟，并且可以下載后在AndroidStudio中可直接編譯運(yùn)行，如果你要做一個(gè)簡(jiǎn)單的混合開發(fā)，只需要修改下url就可以了。

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

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