七行JSON代码把你的网站变成移动应用过程详解

前端  /  管理员 发布于 5年前   179

如果我告诉你，只需要 下述 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？

在进一步介绍前，首先一起看看这样做是好是坏，以及什么时候适合使用这种方法。这种做法的一些潜在用例如下：

1. 使用 Web 原生功能

应用中的部分内容使用 Web 引擎来实现也许是一种更适合的做法。例如 WebSocket 是一种原生的 Web 功能，主要面向 Web 环境而设计。这种情况下就更适合使用内建的 Web 引擎（iOS 的 WKWebView 以及 Android 的 WebView），而非安装某些只能“模拟”WebSocket 的第三方库。无需额外安装任何代码，使用免费工具即可实现目标，这样岂不是更好。同时这也催生了下一个原因。

2. 避免二进制文件体积过大

有些功能也许需要借助庞大的第三方库，而你可能希望能快速用上这样的功能。例如，为了以原生方式包含二维码图像生成器，可能需要安装某些第三方库，这会导致二进制文件体积增大。但如果使用 Web 视图引擎并通过一个简单的调用 JavaScript 库，就可以免费实现这一切，并且避免了使用第三方原生库。

3. 缺乏可靠的移动库

对于一些前沿技术，可能暂时并不具备稳定可靠的移动端实现。好在大部分此类技术都具备 Web 实现，因此最高效的集成方法就是使用 JavaScript 库。

4. 构建部分原生，部分基于 Web 的应用

很多新手开发者想要将自己的网站移植为移动应用，但在发现自己现有网站的部分功能过于复杂，无法面向每种移动平台快速重写时，往往会感到沮丧或受挫。例如你可能有一个非常复杂的 Web 页面无法快速转换为移动应用，但网站的其他内容可以很容易地转换。面对这种情况，如果通过某种方法将应用的大部分内容以原生方式构建，对于特别复杂的页面直接将其以 HTML 的形式无缝集成到应用中，是不是很棒啊。

这是如何实现的？

A. Jasonette

Jasonette 是一种基于标记语言，构建跨平台原生应用的开源方法。该技术看似 Web 浏览器，但并不会将 HTML 标记语言解释为 Web 页面，而是会将 JSON 标记解释为 iOS 和 Android 上的原生应用。正如所有 Web 浏览器都有完全相同的代码，但只要按需解释不同类型的 HTML 标记，即可为用户提供所有不同类型的 Web 应用，所有 Jasonette 应用也有着完全相同的库，可按需解释不同类型的 JSON 标记并创建出你的应用。开发者完全无需触及代码本身，只需要编写标记，将代码实时“翻译”为原生应用，即可开发出自己的应用来。虽然 Jasonette 的核心作用在于构建原生应用，但本文的重点在于介绍如何将 HTML 集成到核心原生引擎中，接下来就一起了解一下吧。

B. Jasonette Web 容器

原生应用很棒，但有时候我们依然需要使用 Web 功能。但 Web 视图与原生应用的集成是个麻烦的过程。

无缝的集成要求：

Web 视图应作为原生布局的一部分进行集成：Web 视图应作为原生布局的一部分纳入应用中，并且操作方式应与其他任何原生 UI 组件保持一致。否则会让用户感觉很笨拙，并且感觉上就像自己实际上是在访问网站那样。

父应用可以控制子 Web 容器：父应用应能随意控制子 Web 视图。

子 Web 容器可触发父应用的原生事件：子应用应该能触发父应用的事件以运行原生 API。这是一个非常繁重的工作，因此先从第一个环节着手介绍：直接将 Web 容器嵌入原生布局―并将其作为第 1 版发布：JSON Web 容器，JSON 中的 HTML 将变为原生应用组件。仅这一点就已经很实用了，但由于无法交互，依然存在一定的局限。父应用无法控制子 Web 容器，子容器无法向父应用发送任何事件通知，这 导致 Web 容器与外界完全隔离。

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

发布第 1 版之后，我们开始处理第二个问题：为 Web 容器添加交互能力。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 利用JavaScript将Excel转换为JSON示例代码
• Python爬取数据保存为Json格式的代码示例
• C#网络请求与JSON解析的示例代码
• 基于Koa(nodejs框架)对json文件进行增删改查的示例代码
• JS中的JSON对象的定义和取值实现代码
• js循环map 获取所有的key和value的实现代码(json)
• Delphi中使用ISuperObject解析Json数据的实现代码
• ASP 处理JSON数据的实现代码