七行JSON代碼把你的網(wǎng)站變成移動(dòng)應(yīng)用過(guò)程詳解

如果我告訴你，只需要 下述 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è) Web 頁(yè)面，但界面上其余布局均為原生 UI 組件，例如 導(dǎo)航條 以及 底部的標(biāo)簽欄。而我們并不需要使用任何 API 重寫(xiě)網(wǎng)站，就可以自動(dòng)獲得原生的切換效果。

在介紹具體做法前你可能會(huì)問(wèn)：“看著挺酷，但除了在原生應(yīng)用框架內(nèi)展示 Web 頁(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)檫@些框架都專注于完全原生，或完全 HTML5 的做法。無(wú)論什么時(shí)候當(dāng)我們聽(tīng)到有人討論移動(dòng)應(yīng)用的未來(lái)時(shí)，很可能會(huì)聽(tīng)到類似“到底是 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)單的調(diào)用 JavaScript 庫(kù)，就可以免費(fèi)實(shí)現(xiàn)這一切，并且避免了使用第三方原生庫(kù)。

3. 缺乏可靠的移動(dòng)庫(kù)

對(duì)于一些前沿技術(shù)，可能暫時(shí)并不具備穩(wěn)定可靠的移動(dòng)端實(shí)現(xiàn)。好在大部分此類技術(shù)都具備 Web 實(shí)現(xiàn)，因此最高效的集成方法就是使用 JavaScript 庫(kù)。

4. 構(gòu)建部分原生，部分基于 Web 的應(yīng)用

很多新手開(kāi)發(fā)者想要將自己的網(wǎng)站移植為移動(dòng)應(yīng)用，但在發(fā)現(xiàn)自己現(xiàn)有網(wǎng)站的部分功能過(guò)于復(fù)雜，無(wú)法面向每種移動(dòng)平臺(tái)快速重寫(xiě)時(shí)，往往會(huì)感到沮喪或受挫。例如你可能有一個(gè)非常復(fù)雜的 Web 頁(yè)面無(wú)法快速轉(zhuǎn)換為移動(dòng)應(yīng)用，但網(wǎng)站的其他內(nèi)容可以很容易地轉(zhuǎn)換。面對(duì)這種情況，如果通過(guò)某種方法將應(yīng)用的大部分內(nèi)容以原生方式構(gòu)建，對(duì)于特別復(fù)雜的頁(yè)面直接將其以 HTML 的形式無(wú)縫集成到應(yīng)用中，是不是很棒啊。

這是如何實(shí)現(xiàn)的？

A. Jasonette

Jasonette 是一種基于標(biāo)記語(yǔ)言，構(gòu)建跨平臺(tái)原生應(yīng)用的開(kāi)源方法。該技術(shù)看似 Web 瀏覽器，但并不會(huì)將 HTML 標(biāo)記語(yǔ)言解釋為 Web 頁(yè)面，而是會(huì)將 JSON 標(biāo)記解釋為 iOS 和 Android 上的原生應(yīng)用。正如所有 Web 瀏覽器都有完全相同的代碼，但只要按需解釋不同類型的 HTML 標(biāo)記，即可為用戶提供所有不同類型的 Web 應(yīng)用，所有 Jasonette 應(yīng)用也有著完全相同的庫(kù)，可按需解釋不同類型的 JSON 標(biāo)記并創(chuàng)建出你的應(yīng)用。開(kāi)發(fā)者完全無(wú)需觸及代碼本身，只需要編寫(xiě)標(biāo)記，將代碼實(shí)時(shí)“翻譯”為原生應(yīng)用，即可開(kāi)發(fā)出自己的應(yīng)用來(lái)。雖然 Jasonette 的核心作用在于構(gòu)建原生應(yīng)用，但本文的重點(diǎn)在于介紹如何將 HTML 集成到核心原生引擎中，接下來(lái)就一起了解一下吧。

B. Jasonette Web 容器

原生應(yīng)用很棒，但有時(shí)候我們依然需要使用 Web 功能。但 Web 視圖與原生應(yīng)用的集成是個(gè)麻煩的過(guò)程。

無(wú)縫的集成要求：

Web 視圖應(yīng)作為原生布局的一部分進(jìn)行集成：Web 視圖應(yīng)作為原生布局的一部分納入應(yīng)用中，并且操作方式應(yīng)與其他任何原生 UI 組件保持一致。否則會(huì)讓用戶感覺(jué)很笨拙，并且感覺(jué)上就像自己實(shí)際上是在訪問(wèn)網(wǎng)站那樣。

父應(yīng)用可以控制子 Web 容器：父應(yīng)用應(yīng)能隨意控制子 Web 視圖。

子 Web 容器可觸發(fā)父應(yīng)用的原生事件：子應(yīng)用應(yīng)該能觸發(fā)父應(yīng)用的事件以運(yùn)行原生 API。這是一個(gè)非常繁重的工作，因此先從第一個(gè)環(huán)節(jié)著手介紹：直接將 Web 容器嵌入原生布局—并將其作為第 1 版發(fā)布：JSON Web 容器，JSON 中的 HTML 將變?yōu)樵鷳?yīng)用組件。僅這一點(diǎn)就已經(jīng)很實(shí)用了，但由于無(wú)法交互，依然存在一定的局限。父應(yīng)用無(wú)法控制子 Web 容器，子容器無(wú)法向父應(yīng)用發(fā)送任何事件通知，這 導(dǎo)致 Web 容器與外界完全隔離。

C. Jasonette Web 容器 2.0：使其可交互

發(fā)布第 1 版之后，我們開(kāi)始處理第二個(gè)問(wèn)題：為 Web 容器添加交互能力。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。