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

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

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

最簡化的范例效果如下圖所示：

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

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

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

例如：

請注意，這個視圖包含：

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

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

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

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

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

目前還沒有任何一個開發(fā)框架曾試圖從根本上解決“Web視圖與原生應(yīng)用無縫集成”的問題，因為這些框架都專注于完全原生，或完全HTML5的做法。

無論什么時候當(dāng)我們聽到有人討論移動應(yīng)用的未來時，很可能會聽到類似“到底是HTML5還是原生方法會最終勝出呢？”這樣的說法。

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

本文我將要介紹：

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

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

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

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

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

1. 使用Web原生功能

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

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

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

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

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