JSON实现七行代码让网站变移动应用-js教程-PHP中文网

首页

web前端

js教程

JSON实现七行代码让网站变移动应用

青灯夜游

Oct 17, 2018 pm 02:17 PM

jsonwebweb前端

本篇文章介绍了借助 Jasonette 将 Web 视图和原生组件融合构建真正“混合”应用的做法，让你的网站变成移动应用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

JSON实现七行代码让网站变移动应用

如果我告诉你，只需要上述 7 行橙色的 JSON 代码就可以将一个网站变成移动应用，你相信吗？完全不需要使用某种框架 API 重写网站，就可以获得与移动应用相同的行为。如果你已经有一个现成的网站，只需要简单地引用 URL 就可以将其“打包”为原生应用。

而如果在此基础上，只需要略微调整 JSON 代码内容，就可以直接访问所有原生 API、原生 UI 组件以及原生视图切换（View Transition）。

最简化的范例效果如下图所示：

JSON实现七行代码让网站变移动应用

从中可以看出，我嵌入了一个 GitHub.com 的 Web 页面，但界面上其余布局均为原生 UI 组件，例如导航条以及底部的标签栏。而我们并不需要使用任何 API 重写网站，就可以自动获得原生的切换效果。

在介绍具体做法前你可能会问：“看着挺酷，但除了在原生应用框架内展示 Web 页面之外，这种技术还有什么意义？

问得好！这也是本文要讲的重点。我们只需要创建一个无缝的 Web 视图与应用间双向通信，借此，父应用就可以触发 Web 视图内的任何 JavaScript 函数，随后 Web 视图即可从外部调用原生 API。

例如：

JSON实现七行代码让网站变移动应用

请注意，这个视图包含：

原生导航条，以及内置的切换功能
一个 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 视图引擎并通过一个简单的