如果我告訴你，只需要 上述 7 行橙色的 JSON 代碼 就可以將一個網站變成移動應用，你相信嗎？完全不需要使用某種框架 API 重寫網站，就可以獲得與移動應用相同的行為。如果你已經有一個現成的網站，只需要簡單地引用 URL 就可以將其“打包”為原生應用。
而如果在此基礎上，只需要略微調整 JSON 代碼內容，就可以直接訪問所有原生 API、原生 UI 組件以及原生視圖切換（View Transition）。
最簡化的範例效果如下圖所示：
從中可以看出，我嵌入了一個 Web 頁面，但界面上其餘佈局均為原生 UI 組件，例如 導航條 以及 底部的標籤欄。而我們並不需要使用任何 API 重寫網站，就可以自動獲得原生的切換效果。
在介紹具體做法前你可能會問：“看著挺酷，但除了在原生應用框架內展示 Web 頁面之外，這種技術還有什麼意義？”
問得好！這也是本文要講的重點。我們只需要創建一個無縫的 Web 視圖與應用間雙向通信，藉此，父應用就可以觸發 Web 視圖內的任何 JavaScript 函數，隨後 Web 視圖即可從外部調用原生 API。
例如：
請注意，這個視圖包含：
原生導航條，以及內置的切換功能
一個 Web 視圖，其中嵌入了一個可以生成二維碼的 Web 應用
在底部包含一個原生的文字輸入組件
上述所有這一切只需要略微調整 JSON 代碼的屬性即可實現。
最後請注意，隨著在文字輸入區輸入不同內容，二維碼也會產生相應變化。輸入的文字可觸發二維碼生成器 Web 應用內部的 JavaScript 函數重新生成二維碼圖像。
目前還沒有任何一個開發框架曾試圖從根本上解決“Web 視圖與原生應用無縫集成”的問題，因為這些框架都專注於完全原生，或完全 HTML5 的做法。
無論什麼時候當我們聽到有人討論移動應用的未來時，很可能會聽到類似“
到底是 HTML5 還是原生方法會最終勝出呢？”這樣的說法。似乎沒人覺得native和html可以共存，而且二者的協同和最終實現似乎也並不容易。
本文我將要介紹：
為何 Web 引擎與原生組件的融合通常是一種更好的做法。
為何 HTML 與原生的無縫集成那麼難，具體又該如何實現。
更重要的是，該如何使用這樣的技術快速構建自己的應用。
為何要在原生應用中使用 HTML？
為何要在原生應用中使用 HTML？
在進一步介紹前，首先一起看看這樣做是好是壞，以及什麼時候適合使用這種方法。這種做法的一些潛在用例如下：
1. 使用 Web 原生功能
應用中的部分內容使用 Web 引擎來實現也許是一種更適合的做法。例如 WebSocket 是一種原生的 Web 功能，主要面向 Web 環境而設計。這種情況下就更適合使用內建的 Web 引擎（iOS 的 WKWebView 以及 Android 的 WebView），而非安裝某些只能“模擬”WebSocket 的第三方庫。
無需額外安裝任何代碼，使用免費工具即可實現目標，這樣豈不是更好。同時這也催生了下一個原因。
2. 避免二進制文件體積過大
有些功能也許需要藉助龐大的第三方庫，而你可能希望能快速用上這樣的功能。
閱讀更多 編程王者之路 的文章
