本文介紹了借助Jasonette將Web視圖和原生組件融合構(gòu)建真正“混合”應(yīng)用的做法。

如果我告訴你，只需要上述7行橙色的JSON代碼就可以將一個(gè)網(wǎng)站變成移動(dòng)應(yīng)用，你相信嗎？完全不需要使用某種框架API重寫(xiě)網(wǎng)站，就可以獲得與移動(dòng)應(yīng)用相同的行為。如果你已經(jīng)有一個(gè)現(xiàn)成的網(wǎng)站，只需要簡(jiǎn)單地引用URL就可以將其“打包”為原生應(yīng)用。

而如果在此基礎(chǔ)上，只需要略微調(diào)整JSON代碼內(nèi)容，就可以直接訪問(wèn)所有原生API、原生UI組件以及原生視圖切換（View Transition）。

最簡(jiǎn)化的范例效果如下圖所示：

從中可以看出，我嵌入了一個(gè)GitHub.com的Web頁(yè)面，但界面上其余布局均為原生UI組件，例如導(dǎo)航條以及底部的標(biāo)簽欄。而我們并不需要使用任何API重寫(xiě)網(wǎng)站，就可以自動(dòng)獲得原生的切換效果。

在介紹具體做法前你可能會(huì)問(wèn)：“看著挺酷，但除了在原生應(yīng)用框架內(nèi)展示W(wǎng)eb頁(yè)面之外，這種技術(shù)還有什么意義？”

問(wèn)得好！這也是本文要講的重點(diǎn)。我們只需要?jiǎng)?chuàng)建一個(gè)無(wú)縫的Web視圖與應(yīng)用間雙向通信，借此，父應(yīng)用就可以觸發(fā)Web視圖內(nèi)的任何JavaScript函數(shù)，隨后Web視圖即可從外部調(diào)用原生API。

例如：

請(qǐng)注意，這個(gè)視圖包含：

原生導(dǎo)航條，以及內(nèi)置的切換功能

一個(gè)Web視圖，其中嵌入了一個(gè)可以生成二維碼的Web應(yīng)用

在底部包含一個(gè)原生的文字輸入組件

上述所有這一切只需要略微調(diào)整JSON代碼的屬性即可實(shí)現(xiàn)。

最后請(qǐng)注意，隨著在文字輸入?yún)^(qū)輸入不同內(nèi)容，二維碼也會(huì)產(chǎn)生相應(yīng)變化。輸入的文字可觸發(fā)二維碼生成器Web應(yīng)用內(nèi)部的JavaScript函數(shù)重新生成二維碼圖像。

目前還沒(méi)有任何一個(gè)開(kāi)發(fā)框架曾試圖從根本上解決“Web視圖與原生應(yīng)用無(wú)縫集成”的問(wèn)題，因?yàn)檫@些框架都專(zhuān)注于完全原生，或完全HTML5的做法。

無(wú)論什么時(shí)候當(dāng)我們聽(tīng)到有人討論移動(dòng)應(yīng)用的未來(lái)時(shí)，很可能會(huì)聽(tīng)到類(lèi)似“到底是HTML5還是原生方法會(huì)最終勝出呢？”這樣的說(shuō)法。

似乎沒(méi)人覺(jué)得native和html可以共存，而且二者的協(xié)同和最終實(shí)現(xiàn)似乎也并不容易。

本文我將要介紹：

為何Web引擎與原生組件的融合通常是一種更好的做法。

為何HTML與原生的無(wú)縫集成那么難，具體又該如何實(shí)現(xiàn)。

更重要的是，該如何使用這樣的技術(shù)快速構(gòu)建自己的應(yīng)用。

為何要在原生應(yīng)用中使用HTML？

在進(jìn)一步介紹前，首先一起看看這樣做是好是壞，以及什么時(shí)候適合使用這種方法。這種做法的一些潛在用例如下：

1. 使用Web原生功能

應(yīng)用中的部分內(nèi)容使用Web引擎來(lái)實(shí)現(xiàn)也許是一種更適合的做法。例如WebSocket是一種原生的Web功能，主要面向Web環(huán)境而設(shè)計(jì)。這種情況下就更適合使用內(nèi)建的Web引擎（iOS的WKWebView以及Android的WebView），而非安裝某些只能“模擬”WebSocket的第三方庫(kù)。

無(wú)需額外安裝任何代碼，使用免費(fèi)工具即可實(shí)現(xiàn)目標(biāo)，這樣豈不是更好。同時(shí)這也催生了下一個(gè)原因。

2. 避免二進(jìn)制文件體積過(guò)大

有些功能也許需要借助龐大的第三方庫(kù)，而你可能希望能快速用上這樣的功能。

例如，為了以原生方式包含二維碼圖像生成器，可能需要安裝某些第三方庫(kù)，這會(huì)導(dǎo)致二進(jìn)制文件體積增大。但如果使用Web視圖引擎并通過(guò)一個(gè)簡(jiǎn)單的