七行json代码将你的网站变成移动应用 -乐鱼入口

0顶
0踩

七行json代码将你的网站变成移动应用

2018-04-24 13:00 by 副主编 jihong10102006 评论(1) 有78707人浏览
引用
作者|ethan
译者|大愚若智
编辑|覃云

本文介绍了借助 jasonette 将 web 视图和原生组件融合构建真正“混合”应用的做法。

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

而如果在此基础上,只需要略微调整 json 代码内容,就可以直接访问所有原生 api、原生 ui 组件以及原生视图切换(view transition)。

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

从中可以看出,我嵌入了一个 github.com 的 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 视图引擎并通过一个简单的
global site tag (gtag.js) - google analytics
网站地图