背景介紹
如果你的團隊有自己維護的網站，現在想拓展業務使用場景快速做一個移動App，那麼就可以考慮利用混合開發來完成這個任務。
本文就初步探討下混合開發技術，主要內容有：
1 混合開發的概念-原生與H5的合作；
2 原生與H5交互方案與使用場景；
3 原生與H5交互實踐詳解；
4 混合開發未來展望。
一、 混合開發的概念-原生與H5的相互合作
混合開發是一種開發方式（模式），它指開發一個App時候，一部分功能用原生（native）構建，一部分功能用html5構建，這樣用兩種方式合作開發出來的App叫Hybrid App。
混合開發的對立面是單一開發，比如我們常說的純原生（native）開發就是一種單一開發，純Html5開發當然也是一種單一開發（請注意：單一開發是本文爲了探討混合開發概念提出的對立概念，主要指利用特定開發語言、開發環境進行的開發行爲）。爲了更好混合開發，我們再回顧下它的兩個合作方，原生開發和H5開發一些基礎知識。
1）什麼是原生開發 ，它的優勢？
原生開發是基於手機本地操作系統如IOS，Android，利用官方提供的開發語言、開發類庫、開發工具進行App開發 。用這種方式開發出來的App，叫native app-本地app。
Native App業務邏輯代碼在本地，操作系統能對Native App進行有效性能約束（比如內存不能佔用太多、流量不能浪費太多）、權限控制、生命週期監管，這樣有問題也可以找到負責APP。
離我越近、交融越多、對你掌控力度越大，那麼我就越信任你，所以給你更多的便利和權限。 基於這樣的理念，操作系統會向Native app開放更多的能力接口，這樣Native App就可以更好的利用操作系統“手裏”的設備，比如相機、GPS、藍牙等。在手機廠商做過的同學就會知道，預裝App跟手機廠商更緊密，所以他們會擁有比三方App更高的權限和能力，可以有更多的騷操作。
不過萬事有利有弊，跟一個特定平臺關係越密切，那麼你向其他平臺發展時候，你又要花費大量時間、精力來重新建立跟另外的平臺的親密關係，這些對企業來說都是時間與金錢。所以Native開發的缺點就是耗時較長、耗資巨大。
2）什麼是H5，它的優勢？
H5是HTML(HyperText Markup Language)超文本標記語言第五個版本。那什麼是超文本標記語言呢？
首先認識下超文本，純文本就是類似word 裏面的文字，超文本就是文本中又嵌入了圖片、鏈接、音樂、程序、甚至未來加入氣味、感覺等，他們本質都是信息的不同表現形式。超文本=多類型信息的融合。
其次瞭解下標記語言（markup language）。
文字語言本質是祖祖輩輩傳遞下來並不斷演變的符號解析規則（約定、協議），比如說“蘋果”是中文中的一個符號，“Apple”是英文中的一個符號，這兩個符號都指的是那個紅紅的，圓圓的、吃起來甜甜的東西。學習語言的過程就是大腦構建符號解析系統的過程，比如看到“我吃香辣雞翅”，我們的大腦就會自動將這幾個符號解析（理解、翻譯）成爲一副香噴噴的場景，然後就可能流出了不爭氣的口水，還要偷偷的嚥下去。
markup language 直翻是標記語言，其實更應翻譯爲增強語言。markup language標記語言不僅有符號解析的約定，還有符號展示方式的約定。所謂的展示方式具體來說就是符號（比如說文字）的大小、顏色、位置、背景、出場方式等，不同的展示方式給人不同的感官衝擊力、從而達到不同的表達效果。例如Android中的xml就是一種標記語言。
超文本標記語言（html5）是一種多類型信息內容+展示方式的約定（協議），
我們平時看到的H5頁面，它的源碼就是按照H5協議書寫的，用瀏覽器解析後就是我們看到的網頁。
談到H5就不可避免聊到JavaScript。什麼是Script，Script英文釋義：a written text of a play, film/movie, broadcast, talk, etc.由此可見Script本意就是劇本，只是當時的翻譯不懂，至於當時爲啥命名爲JavaScript據說爲了蹭Java熱度來增加自己知名度。
在沒有加入JS之前，H5是靜態的，是一副定格了的風景，當有了劇本（JS）之後，H5中的對象便根據劇本來完成各自的表演，H5成了一場熱鬧的舞臺劇。
H5優勢和缺點：因爲H5頁面不僅僅文字、圖片等信息，還包括這種文字、圖片等的展示方式、比如佈局、大小、背景等，所以H5頁面優勢就是更靈活、更方便的UI變化，但是H5在傳輸的時候就不僅要把信息（比如文字)傳過來，還要把文字顯示在哪裏，大小、顏色這些值也傳遞過來。解析的時候，也不僅需要解析信息（比如文字）的語義還要解析文字的佈局、顏色等展示方式，隨着信息展示方式（比如說佈局）的複雜度提升、總的信息傳輸量和解析時間都會大大增加。
本章開始講到混合開發就是Native開發和H5開發的合作完成的，既然有合作，那麼Native和H5之間就會有很多交流，接下來就談談如何完成“交流”的。
二 、原生與H5交互方案以及使用場景
前面有談到，通過瀏覽器可以將h5源碼變成爲我們看到h5頁面（網頁），那麼原生中如果有一個類似於瀏覽器的類，我們就可以在原生中使用這個類來處理h5相關的事情，事實的確如此，這個類叫WebView。爲了更深入的瞭解這種交互方案，我們先梳理下瀏覽器的基本功能。
瀏覽器基本功能
我們用瀏覽器是這樣的：輸入一個url（統一資源定位符），比如百度首頁https://www.baidu.com直接點擊，然後瀏覽器就給我們一個豐富多彩的網頁。其具體流程如下：
1） 網絡請求，從我們輸入的地址獲取到信息資料-h5源碼；
2 ）把h5源碼按照h5協議解析出來，瀏覽器這時候就知道標題該放哪裏，背景什麼樣子，哪個信息是圖片，圖片該放在哪個位置，圖片或者文字有沒有什麼入場動畫等等。
3）把剛纔解析好的東西顯示出來，顯示就是繪製， 上一步解析後咱就胸中有畫卷，那麼現在就可以下筆如有神 ，顯示用一個專業名詞就是渲染。
所以瀏覽器的基本功能是網絡請求、頁面源碼解析、頁面渲染。但是你還發現不同的瀏覽器還有其他一些很不錯的功能，比如收藏網址、記錄常用網站、網頁截圖等等來滿足不同用戶各種需求。爲了這個目的，於是瀏覽器把基本功能和擴展功能分離了，基本功能被整合成爲一個單獨模塊叫瀏覽器內核，它一般由一些實力比較強的公司提供，基本功能要保持穩定可靠嘛。
瀏覽器內核=網絡請求+解析+渲染（顯示）
其他的輔助功能，各個瀏覽器廠家就可以隨意添加定製，就有了各種各樣的瀏覽器。
原生與H5交互方案
瞭解瀏覽器基本功能後，就很容易理解WebView，Webview是Android系統提供的一個內置瀏覽器對象類，它早期採用WebKit內核，這個內核也是蘋果瀏覽器safari的內核，後來用上了自己在此基礎上研發的內核。正是通過這個Android內置的瀏覽器，Android便可以很方便的展示H5頁面，如下
mWebView.loadUrl("https://www.baidu.com");
同時WebView也提供了豐富的接口去設置這個瀏覽器（比如WebView是否支持頁面縮放等）和與原生進行數據交互。
講到這裏，你是不是有一個想法：既然在原生中增加一個實現瀏覽器的類就可以實現原生與H5交互，那麼我是否可以不用原生的WebView呢？
回答是Yes，你可以自己手寫(大神可以)或者用三方的瀏覽器類庫去完成這個任務，比如可以接入騰訊瀏覽器，它的內核x5是騰訊基於WebKit內核深度優化的，聲稱可以更快、更好、更安全，它的用法與WebView基本一樣。
原生與H5交互使用場景
前面有提到原生與H5的特點，原生就是與系統親近但是不能跨平臺，H5就是信息表現靈活，跨平臺，但是相應的數據傳輸和解析會增加很多時間。所以混合開發場景大概如下：
1 團隊有很多業務已經是H5，而且業務頁面變化也挺頻繁；
2 App有加載速度要求很不是很嚴格的頁面，或者使用頻率很低的頁面；
3 需要使用到移動端的相機，傳感器等能力。
搞清楚了WebView是什麼以及何時使用之後，我們便可以開始探討：
三、WebView如何使用
前文有講到，WebView其實就是一個內置的瀏覽器，所以這裏再次回想我們怎麼用瀏覽器，比如這裏以瀏覽器訪問https://www.jianshu.com/p/c8262379c8ec（這是我一篇介紹網絡層搭建的文章）爲例：
1 ）打開瀏覽器
2 ）設置瀏覽器（省略則使用默認設置）
3 ）輸入要訪問地址：https://www.jianshu.com/p/c8262379c8ec
4 ）等待瀏覽器響應，當返回內容時候進行相關處理，比如觀看，或者copy到自己個人筆記中。
所以Webview使用也大概這幾個步驟：
1）WebView對象初始化，相當於打開瀏覽器；
2）WebView設置，相當於設置瀏覽器；
3）添加WebView一些通知事件，比如加載頁面開始、加載頁面完畢的通知、H5中JS相關事件的一些通知；
4）添加Android與H5交互的方法，包括Android調用H5中的方法，H5中調用Android的方法；
5）加載url，設置完畢開始去請求加載相關頁面
具體使用見我的git庫：https://github.com/kingkong-li/HighPerformanceWebView
這裏面有很詳細的註釋幫你理解每一個步驟，並且可以下載後在AndroidStudio中可直接編譯運行，如果你要做一個簡單的混合開發，只需要修改下url就可以了。
四、混合開發的未來
最後我們在這裏探討下混合開發的未來，特別是5G通信來了之後通信速度大大提升，加之手機性能過剩，之前原生的效果用H5實現就可以達到用戶難以區分的程度。
那麼這時候是否意味着原生開發的消亡，純WebApp大行其道？
否也！！一方面基於本文前面提到的理論，離系統越近與系統越緊密，系統才越信任，才能給與更多的權限與本地能力，系統廠商不會拱手把自己本地能力暴露在網絡大環境中，除了自己利益也是對用戶安全負責。
另一方面5G雖然來了，但是VR、AR、MR、感官共享、IOT等新領域技術對通信和手機性能要求更是成噸增長，還是會存在通信和性能的限制，僅僅用Web開發也許還是玩不轉。
綜上所述，個人認爲混合開發纔是未來。其中Native部分比重會下降並且更加註重於權限、系統能力獲取、高性能部分，但由於高昂的費用，只有大公司纔會採用原生開發。小公司則會利用大公司或者團體提供的App平臺做一些跨平臺的東西，比如當前已經成型的快應用、微信、支付寶、百家號等等。個人一些淺薄見解，歡迎大家一起來評論交流~