本文作者：鄒達(dá)，APICloud CTO，10年來(lái)一直專注于移動(dòng)瀏覽器引擎研究，參與過(guò)國(guó)內(nèi)外多個(gè)瀏覽器引擎，Javascript引擎和跨平臺(tái)應(yīng)用引擎架構(gòu)和開(kāi)發(fā)。

如果說(shuō)以前的微信公眾號(hào)還是一個(gè)媒體化的平臺(tái)，那么2016年的公眾號(hào)會(huì)有一種新的形態(tài)，叫應(yīng)用號(hào)。應(yīng)用號(hào)預(yù)示著比公眾號(hào)更強(qiáng)大的功能、更優(yōu)質(zhì)的體驗(yàn)以及更豐富的服務(wù)。應(yīng)用號(hào)的出現(xiàn)是微信產(chǎn)品的一次重大升級(jí)，無(wú)論是為了體現(xiàn)用戶價(jià)值觀？還是追求產(chǎn)品商業(yè)化？作為一名技術(shù)人員，我不想過(guò)多討論，而是更愿意從技術(shù)的角度來(lái)分析一些其中Web技術(shù)的發(fā)展。

微信做為一款超級(jí)App，有著巨大的入口流量，需要不斷的產(chǎn)生動(dòng)態(tài)的內(nèi)容，Web技術(shù)在微信中一直發(fā)揮中重要的作用。如果說(shuō)公眾號(hào)還是標(biāo)準(zhǔn)Web技術(shù)＋簡(jiǎn)單橋接擴(kuò)展，那么在應(yīng)用號(hào)中，Web技術(shù)將依靠更強(qiáng)大的Web執(zhí)行容器在微信中發(fā)揮更大的作用。我們可以來(lái)看看在微信中Web與Native技術(shù)的結(jié)合過(guò)程，從嵌入系統(tǒng)Webview, 到X5增強(qiáng)瀏覽器引擎，到功能擴(kuò)展的JS-SDK，再到剛剛發(fā)布的weUI，再到應(yīng)用號(hào)。微信團(tuán)隊(duì)一直推進(jìn)著Web技術(shù)在Native App中融合與發(fā)展。

隨著移動(dòng)設(shè)備的快速更新?lián)Q代，以HTML5為代表的Web技術(shù)在NativeApp中有了越來(lái)越多的應(yīng)用場(chǎng)景。一方面是Native App開(kāi)發(fā)團(tuán)隊(duì)在保證功能和性能的同時(shí)，需要提高開(kāi)發(fā)效率，降低運(yùn)營(yíng)成本；另一方面是App用戶在滿足需求和體驗(yàn)的同時(shí)，需要更快的獲取動(dòng)態(tài)的內(nèi)容；這些都需要Web技術(shù)在App開(kāi)發(fā)中發(fā)揮越來(lái)越多的作用和價(jià)值。但這種價(jià)值絕對(duì)不能稱為脫離或顛覆。在今天，更多的是“融合”！

一 內(nèi)置自定義Web容器時(shí)代

2010年之前，那時(shí)還是feature phone為主流的時(shí)代，硬件配置低，系統(tǒng)功能弱，手機(jī)應(yīng)用以內(nèi)置為主。但SP業(yè)務(wù)已得到長(zhǎng)足的發(fā)展，用戶需要?jiǎng)討B(tài)獲取內(nèi)容來(lái)滿足資訊和娛樂(lè)的需求。這個(gè)時(shí)期Web技術(shù)在Native應(yīng)用中的使用方式是Native應(yīng)用開(kāi)發(fā)商與瀏覽器廠商合作，在應(yīng)用中內(nèi)置某個(gè)廠商的瀏覽器引擎，作為Web的執(zhí)行容器。應(yīng)用從服務(wù)器端動(dòng)態(tài)下載web文件，解壓后交給Web容器離線運(yùn)行。內(nèi)容和功能都很簡(jiǎn)單，通常就是圖片＋文字的排版，以及按鍵交互。形式如圖書、雜志、小游戲以及小工具等。這類需求也驅(qū)動(dòng)了當(dāng)時(shí)一些主流瀏覽器廠商去思考瀏覽器的在傳統(tǒng)價(jià)值以外的作用，并積極參與到W3C Widget規(guī)范的制訂。這一時(shí)期也是移動(dòng)瀏覽器廠商的黃金時(shí)代。

二 嵌入系統(tǒng)Webview時(shí)代

2010年，Android系統(tǒng)在國(guó)內(nèi)興起，iPhone也逐漸普及，以Android和iOS為主的原生應(yīng)用生態(tài)系統(tǒng)開(kāi)始不斷的培養(yǎng)用戶到AppStore下載應(yīng)用，以及以獨(dú)立App作為入口的使用習(xí)慣。這一時(shí)期App開(kāi)發(fā)需求也逐漸增長(zhǎng)，但是競(jìng)爭(zhēng)還不算激烈。客戶可以接受原生的開(kāi)發(fā)成本和周期。應(yīng)用開(kāi)發(fā)商利潤(rùn)豐厚，開(kāi)發(fā)者紛紛開(kāi)始學(xué)習(xí)Android和iOS App開(kāi)發(fā)。系統(tǒng)自帶瀏覽器的功能和性能已經(jīng)超過(guò)當(dāng)時(shí)的第三方瀏覽器。在App中通過(guò)嵌入系統(tǒng)Webview來(lái)展示本地或服務(wù)器端的界面已經(jīng)比較常見(jiàn)。這一時(shí)期Web技術(shù)的應(yīng)用以內(nèi)容展示為主，所能完成的功能被限制在標(biāo)準(zhǔn)瀏覽器支持的范圍內(nèi)。而傳統(tǒng)瀏覽器廠商依靠Lisence收費(fèi)的商業(yè)模式終結(jié)，并且逐漸淡出市場(chǎng)。

三 Webview的橋接擴(kuò)展時(shí)代

2011年， Android和iOS在手機(jī)系統(tǒng)中逐漸已經(jīng)占據(jù)了統(tǒng)治地位。App開(kāi)發(fā)需求迅速增長(zhǎng)，競(jìng)爭(zhēng)加劇，原生開(kāi)發(fā)人員供不應(yīng)求，客戶開(kāi)始考慮成本和周期，開(kāi)發(fā)商開(kāi)始考慮效率和利潤(rùn)。開(kāi)發(fā)者開(kāi)始思考Webview在展示內(nèi)容之外是否還可以完成部分App功能。由于系統(tǒng)內(nèi)置的都是Webkit引擎，支持標(biāo)準(zhǔn)的Web技術(shù)，并且支持開(kāi)放擴(kuò)展。國(guó)內(nèi)外以Phone Gap為代表的廠商開(kāi)始了對(duì)Webview的橋接擴(kuò)展，并且形成一套完整的調(diào)用機(jī)制，在JS中可以任意調(diào)用原生接口。

這種橋接擴(kuò)展主要集中于設(shè)備功能，提供的是一種能力，但是更多具體的映射還需要開(kāi)發(fā)者自己來(lái)完成。由于沒(méi)有涉及窗口系統(tǒng)、交互響應(yīng)、動(dòng)畫效果，事件管理以及應(yīng)用生命周期管理等的擴(kuò)展，所以雖然開(kāi)發(fā)出的App基本功能可以滿足需求，但是性能和體驗(yàn)太差。此時(shí)通過(guò)Webview＋橋接擴(kuò)展的方式，原生工程師和Web工程師一起協(xié)作已經(jīng)可以完成一款 App的開(kāi)發(fā)了。這一時(shí)期標(biāo)準(zhǔn)Web技術(shù)（HTML，CSS，JS）和橋接擴(kuò)展機(jī)制在移動(dòng)App中的使用趨勢(shì)也造成了一批傳統(tǒng)的使用非標(biāo)準(zhǔn)web技術(shù)（自定義XML標(biāo)簽和JS語(yǔ)法）的移動(dòng)中間件廠商的消亡。

四 移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)的Hybrid App時(shí)代

從2012年開(kāi)始，App創(chuàng)業(yè)火爆，App需求持續(xù)增長(zhǎng)，有了更多的應(yīng)用場(chǎng)景和行業(yè)結(jié)合：LBS，IoT，O2O，社交、視頻等等。一方面是使用HTML＋CSS進(jìn)行界面布局存在Dom樹(shù)更新及單層渲染的性能問(wèn)題，而且標(biāo)準(zhǔn)JavaScript規(guī)范支持的能力非常有限，需要大量的擴(kuò)展來(lái)滿足行業(yè)需求；另一方面是原生開(kāi)發(fā)模式成本高、效率低，行業(yè)呼喚更高效的跨平臺(tái)開(kāi)發(fā)模式。

這一時(shí)期，國(guó)內(nèi)外跨平臺(tái)技術(shù)也是層出不窮，不斷涌現(xiàn)出新的產(chǎn)品，但我們可以其他們分為兩類：

· 一類是繼續(xù)堅(jiān)持使用HTML＋CSS進(jìn)行界面布局，通過(guò)對(duì)頁(yè)面渲染進(jìn)行優(yōu)化和對(duì)標(biāo)準(zhǔn)JS進(jìn)行原生擴(kuò)展來(lái)實(shí)現(xiàn)跨平臺(tái)App開(kāi)發(fā)。

· 另一類是放棄使用HTML＋CSS的界面布局，選擇一種第三方的中間語(yǔ)言（如JS，C#等）來(lái)映射成Android和iOS的系統(tǒng)調(diào)用，從而實(shí)現(xiàn)跨平臺(tái)。這種方式的界面布局需要通過(guò)中間語(yǔ)言組合系統(tǒng)UI組件來(lái)完成，目前看渲染性能是比HTML＋CSS的方式要好些，但這樣也失去了HTML＋CSS布局的標(biāo)準(zhǔn)性和靈活便捷。

本文探討的主要是Web技術(shù)在App中的發(fā)展過(guò)程，不可能沒(méi)有HTML和CSS，所以這里我們將集中討論第一類的跨平臺(tái)產(chǎn)品（Web＋Native混合）。像ReactNative雖然他所選擇的第三方語(yǔ)言是JS，但是他也可以選擇其他語(yǔ)言，由于HTML和CSS已經(jīng)不是其界面布局的方式，所以我認(rèn)為其已經(jīng)脫離了標(biāo)準(zhǔn)的Web的技術(shù)，這里不再過(guò)多討論。

此時(shí)國(guó)內(nèi)HTML5也逐漸火熱，大量的Web程序員期待進(jìn)入Native App的開(kāi)發(fā)領(lǐng)域。此時(shí)，面向Web工程師的移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)（Web＋Native混合）開(kāi)始出現(xiàn)，提供了一站式的跨平臺(tái)App開(kāi)發(fā)和管理服務(wù)，形成了一種新的Web技術(shù)與Native App相結(jié)合的模式。

HybridApp是一個(gè)以Web技術(shù)為主的Native App開(kāi)發(fā)模式，開(kāi)發(fā)者不需要具備任何的Native技能，使用標(biāo)準(zhǔn)的web技術(shù)，通過(guò)調(diào)用平臺(tái)的擴(kuò)展API，就可以開(kāi)發(fā)出獨(dú)立的跨平臺(tái)App。并且能保證App的功能、性能和體驗(yàn)。

Hybrid App引擎需要在橋接擴(kuò)展的基礎(chǔ)上提供更多的功能，如：

MVC架構(gòu)；

應(yīng)用生命周期和統(tǒng)一事件管理；

優(yōu)化交互響應(yīng)、動(dòng)畫效果、數(shù)據(jù)緩存等；

Web界面與Native組件的混合渲染；

豐富的獨(dú)立功能模塊與聚合開(kāi)放平臺(tái)API；

對(duì)主流HTML編輯器進(jìn)行擴(kuò)展來(lái)支持App開(kāi)發(fā)；

App安全機(jī)制及Web代碼全包加密；

這一時(shí)期出現(xiàn)了優(yōu)秀跨平臺(tái)App引擎，如APICloud DeepEngine，通過(guò)Deep Engine在降低開(kāi)發(fā)成本，提高開(kāi)發(fā)效率的同時(shí)，可以開(kāi)發(fā)出滿足客戶需要和用戶運(yùn)行體驗(yàn)的商用App。基于APICloud，客戶也開(kāi)發(fā)出了安裝量過(guò)千萬(wàn)的主流優(yōu)質(zhì)應(yīng)用。

五 基于SuperWebview的融合時(shí)代

進(jìn)入2016年，雖然Hybrid App已經(jīng)被行業(yè)廣泛認(rèn)可，但是目前Native還仍是主流的開(kāi)發(fā)模式，大多數(shù)優(yōu)質(zhì)App都是原生的。如何能在這些Native App中使用Web技術(shù)？如何能在這些主流App中使用Web技術(shù)完成部分功能的同時(shí)，又能保證App的性能和體驗(yàn)？如何能讓Native工程師和Web工程師能更好的協(xié)作？

對(duì)于這些問(wèn)題，我們不能只是嵌入一個(gè)系統(tǒng)Webview，或引入一套橋接擴(kuò)展機(jī)制，而是需要一個(gè)功能強(qiáng)大完整的超級(jí)Webview，并且是為每一個(gè)應(yīng)用根據(jù)實(shí)際配置動(dòng)態(tài)生成專屬的SDK。這種超級(jí)Webview應(yīng)具備的如下功能：

功能強(qiáng)大，具備MVC架構(gòu)和性能優(yōu)化；

聚合API，支持?jǐn)U展模塊和開(kāi)放平臺(tái)服務(wù)；

動(dòng)態(tài)生成，根據(jù)配置，為每個(gè)應(yīng)用動(dòng)態(tài)生成專屬的SDK；

云修復(fù)，實(shí)現(xiàn)應(yīng)用內(nèi)更新功能。

方便協(xié)作，保持Web和Native開(kāi)發(fā)的獨(dú)立性，降低融合成本，提高效率。

APICloud在2016年開(kāi)年推出的這款超越性產(chǎn)品——SuperWebview，SuperWebview的出現(xiàn)必將加速Web技術(shù)在Native App中的融合，并且在優(yōu)質(zhì)的Native App，甚至超級(jí)App中發(fā)揮更大的作用。任何一款Native App在集成SuperWebview之后，都可以大幅縮短迭代周期，支持功能的動(dòng)態(tài)增加。由Web技術(shù)實(shí)現(xiàn)部分的功能更新無(wú)需再反復(fù)提交AppStore審核。用戶也無(wú)需重新下載安裝。

開(kāi)發(fā)一款A(yù)pp，到底誰(shuí)當(dāng)主角？是Native＋Web，還是Web＋Native？那要看誰(shuí)更適合當(dāng)主角，誰(shuí)當(dāng)主角才能把戲演好。一部好戲不能只有一個(gè)主角，配合互補(bǔ)才能演出好戲。

NativeApp伴隨著移動(dòng)設(shè)備而生，Web技術(shù)也是自出生就與Native App互補(bǔ)和共存。APICloud從未想過(guò)“顛覆”，只是想提供一種實(shí)實(shí)在在的高效的App開(kāi)發(fā)方式，讓W(xué)eb技術(shù)和NativeApp能夠更好的融合，發(fā)揮出各自應(yīng)有的優(yōu)勢(shì)和價(jià)值。

超越源于融合！

====================================分割線================================
文章轉(zhuǎn)載自 開(kāi)源中國(guó)社區(qū)[http://www.oschina.net]

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的透过微信应用号，看HTML5与Native进入融合时代的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。