快捷導(dǎo)航

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

更新時(shí)間：2019年07月09日 11:28:02 作者：ToEnd

這篇文章主要介紹了七行JSON代碼把你的網(wǎng)站變成移動(dòng)應(yīng)用過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值

如果我告訴你，只需要下述 7 行橙色的 JSON 代碼就可以將一個(gè)網(wǎng)站變成移動(dòng)應(yīng)用，你相信嗎？

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

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

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

在介紹具體做法前你可能會(huì)問：“看著挺酷，但除了在原生應(yīng)用框架內(nèi)展示 Web 頁面之外，這種技術(shù)還有什么意義？”問得好！這也是本文要講的重點(diǎn)。

我們只需要?jiǎng)?chuàng)建一個(gè)無縫的 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ù)重新生成二維碼圖像。

目前還沒有任何一個(gè)開發(fā)框架曾試圖從根本上解決“Web 視圖與原生應(yīng)用無縫集成”的問題，因?yàn)檫@些框架都專注于完全原生，或完全 HTML5 的做法。無論什么時(shí)候當(dāng)我們聽到有人討論移動(dòng)應(yīng)用的未來時(shí)，很可能會(huì)聽到類似“到底是 HTML5 還是原生方法會(huì)最終勝出呢？”這樣的說法。似乎沒人覺得native和html可以共存，而且二者的協(xié)同和最終實(shí)現(xiàn)似乎也并不容易。

本文我將要介紹：為何 Web 引擎與原生組件的融合通常是一種更好的做法。為何 HTML 與原生的無縫集成那么難，具體又該如何實(shí)現(xiàn)。更重要的是，該如何使用這樣的技術(shù)快速構(gòu)建自己的應(yīng)用。

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

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

1. 使用 Web 原生功能

應(yīng)用中的部分內(nèi)容使用 Web 引擎來實(shí)現(xiàn)也許是一種更適合的做法。例如 WebSocket 是一種原生的 Web 功能，主要面向 Web 環(huán)境而設(shè)計(jì)。這種情況下就更適合使用內(nèi)建的 Web 引擎（iOS 的 WKWebView 以及 Android 的 WebView），而非安裝某些只能“模擬”WebSocket 的第三方庫。無需額外安裝任何代碼，使用免費(fèi)工具即可實(shí)現(xiàn)目標(biāo)，這樣豈不是更好。同時(shí)這也催生了下一個(gè)原因。

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

有些功能也許需要借助龐大的第三方庫，而你可能希望能快速用上這樣的功能。例如，為了以原生方式包含二維碼圖像生成器，可能需要安裝某些第三方庫，這會(huì)導(dǎo)致二進(jìn)制文件體積增大。但如果使用 Web 視圖引擎并通過一個(gè)簡(jiǎn)單的調(diào)用 JavaScript 庫，就可以免費(fèi)實(shí)現(xiàn)這一切，并且避免了使用第三方原生庫。

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

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

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

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

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

A. Jasonette

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

B. Jasonette Web 容器

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

無縫的集成要求：

Web 視圖應(yīng)作為原生布局的一部分進(jìn)行集成：Web 視圖應(yīng)作為原生布局的一部分納入應(yīng)用中，并且操作方式應(yīng)與其他任何原生 UI 組件保持一致。否則會(huì)讓用戶感覺很笨拙，并且感覺上就像自己實(shí)際上是在訪問網(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í)用了，但由于無法交互，依然存在一定的局限。父應(yīng)用無法控制子 Web 容器，子容器無法向父應(yīng)用發(fā)送任何事件通知，這導(dǎo)致 Web 容器與外界完全隔離。

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

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

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

您可能感興趣的文章: