如果我告诉你，你只需要下面7行橙色JSON代码就可以把一个网站变成移动应用，你会相信吗？

完全不需要用一些框架API重写网站，就可以得到和移动应用一样的行为。如果您已经有一个现成的网站，您可以简单地引用该网址，将其“打包”为本机应用程序。

在此基础上，只需稍微调整JSON代码内容，就可以直接访问所有原生API、原生UI组件和原生View Transition。下图显示了最简单的示例效果：

可以看到我嵌入了一个Web页面，但是界面上剩下的布局都是原生UI组件，比如底部的导航栏和标签栏。而且我们不需要用任何API重写网站，就可以自动得到原来的切换效果。

在介绍具体方法之前，你可能会问：“看起来很酷，但是除了在原生应用程序的框架内显示Web页面之外，这项技术还有什么意义？”问得好！这也是本文的重点。

我们只需要在Web视图和应用程序之间创建一个无缝的双向通信，这样父应用程序就可以在Web视图中触发任何JavaScript函数，然后Web视图就可以从外部调用本机API。例如：

请注意，这个视图包括：原生导航栏，以及内置的切换功能，一个Web视图，其中嵌入了一个能够生成二维码的Web应用，底部还包含了一个原生文本输入组件，这些都只需要稍微调整JSON代码的属性就可以实现。

最后，请注意，随着在文本输入区输入不同的内容，二维码也会发生相应的变化。输入的文本可以触发二维码生成器Web应用中的JavaScript函数，重新生成二维码图像。

目前还没有一个开发框架试图从根本上解决“Web视图与原生应用无缝集成”的问题，因为这些框架关注的是完全原生或者完全HTML5。每当我们听到有人讨论移动应用的未来，我们很可能会听到类似“HTML5或原生方法最终会赢吗？”这样的说法。似乎没有人认为原生和html可以共存，似乎它们的协同和最终实现都不容易。

在本文中，我将介绍为什么集成Web引擎和本机组件通常是更好的方法。HTML和原生的无缝集成为什么这么难，具体怎么实现。更重要的是，如何使用这项技术快速构建自己的应用程序。

为什么要在原生应用程序中使用HTML？

在进一步介绍之前，我们先来看看这是好是坏，什么时候用这个方法合适。这种方法的一些潜在用途如下：

1.使用网络原生函数

使用网络引擎实现应用程序的一部分可能是更合适的方式。例如，WebSocket是一个原生的Web函数，主要是为Web环境设计的。在这种情况下，更适合使用内置的Web引擎(iOS的WKWebView和安卓的WebView)，而不是安装一些只能“模拟”WebSocket的第三方库。不安装任何额外的代码，使用免费工具来实现你的目标不是更好吗？同时，这也催生了下一个原因。

2.避免二进制文件过多

有些函数可能需要大型第三方库的帮助，您可能希望快速使用这些函数。例如，为了在本地包含二维码图像生成器，可能需要安装一些第三方库，这将导致二进制文件的数量增加。但是，如果使用Web视图引擎，只需调用JavaScript库，就可以免费实现这一切，避免使用第三方原生库。

3.缺乏可靠的移动图书馆

对于一些尖端技术，稳定可靠的移动实现可能暂时不可用。幸运的是，这些技术大多数都有Web实现，所以最有效的集成方法是使用JavaScript库。

4.构建部分本机和部分基于网络的应用程序

很多新手开发者都想将自己的网站移植到移动应用中，但是当他们发现自己现有网站的一些功能过于复杂，无法针对每个移动平台快速重写时，往往会感到沮丧或挫败。例如，您可能有一个非常复杂的网页，无法快速转换为移动应用程序，但网站的其他内容可以轻松转换。面对这种情况，如果应用程序的大部分内容是以某种方式以原生方式构建的，那么将特别复杂的页面以HTML的形式直接集成到应用程序中是不是很棒呢？

这是如何实现的？

A.贾斯内特

Jasonette是一种基于标记语言构建跨平台本机应用程序的开源方法。这项技术看起来像一个网络浏览器，但它并没有将HTML标记语言解释为网页，而是将JSON标记解释为iOS和Android上的原生应用程序。就像所有的Web浏览器都有完全相同的代码一样，只要根据需要解释不同类型的HTML标签，就可以为用户提供所有不同类型的Web应用程序，所有的Jasonette应用程序也有完全相同的库，可以根据需要解释不同类型的JSON标签，创建自己的应用程序。开发人员根本不需要接触代码本身，只需要编写标签，将代码实时翻译成原生应用，然后就可以开发自己的应用了。虽然Jason的核心角色是构建原生应用程序，但本文的重点是如何将HTML集成到核心原生引擎中。让我们一起来看看。

B.Jasonette网络容器

原生应用程序很棒，但有时我们仍然需要使用Web功能。然而，Web视图和本机应用程序的集成是一个麻烦的过程。

无缝集成要求：

Web视图应该作为本机布局的一部分进行集成：Web视图应该作为本机布局的一部分合并到应用程序中，并且操作模式应该与任何其他本机UI组件保持一致。否则，用户会感到尴尬，觉得自己好像真的在访问网站。

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

子Web容器可以触发父应用程序的本机事件：子应用程序应该能够触发父应用程序的事件来运行本机API。这是一项非常繁重的任务，所以我们应该从第一步开始：直接将Web容器嵌入到原生布局中——并将其发布为第一个版本：JSON Web容器，JSON中的HTML将成为原生应用程序组件。仅这一点就非常实用，但由于无法交互，仍然存在一些限制。父应用程序无法控制子Web容器，子容器也无法向父应用程序发送任何事件通知，导致Web容器与外界完全隔离。

C.Jasonette Web容器2.0:使其具有交互性

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

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