如果我告诉你,只需要,下述7行橙色的JSON代码,就可以将一个网站变成移动应用,你相信吗?
完全不需要使用某种框架API重写网站,就可以获得与移动应用相同的行为。如果你已经有一个现成的网站,只需要简单地引用URL就可以将其“打包”为原生应用。
而如果在此基础上,只需要略微调整JSON代码内容,就可以直接访问所有原生API,原生UI组件以及原生视图切换(查看过渡)。最简化的范例效果如下图所示:
从中可以看的出,我嵌入了一个Web页面,但界面上其余布局均为原生UI组件,例如导航条以及底部的标签栏。而我们并不需要使用任何API重写网站,就可以自动获得原生的切换效果。
在介绍具体做法前你可能会问:“看着挺酷,但除了在原生应用框架内展示Web页面之外,这种技术还有什么意义?“问得好!这也是本文要讲的重点。
我们只需要创建一个无缝的,网络视图与应用间双向通信,借此,父应用就可以触发网络视图内的任何JavaScript函数,随后网络视图即可从外部调用原生API。例如:
请注意,这个视图包含:原生导航条,以及内置的切换功能一个Web视图,其中嵌入了一个可以生成二维码的网络应用在底部包含一个原生的文字输入组件上述所有这一切只需要略微调整JSON代码的属性即可实现。
最后请注意,随着在文字输入区输入不同内容,二维码也会产生相应变化。输入的文字可触发二维码生成器网络应用内部的JavaScript函数重新生成二维码图像。
目前还没有任何一个开发框架曾试图从根本上解决“网络视图与原生应用无缝集成”的问题,因为这些框架都专注于完全原生,或完全HTML5的做法。无论什么时候当我们听到有人讨论移动应用的未来时,很可能会听到类似”到底是HTML5还是原生方法会最终胜出呢?“这样的说法,似乎没人觉得本地和html可以共存,而且二者的协同和最终实现似乎也并不容易。
本文我将要介绍:为何Web引擎与原生组件的融合通常是一种更好的做法。为何HTML与原生的无缝集成那么难,具体又该如何实现。更重要的是,该如何使用这样的技术快速构建自己的应用。
在进一步介绍前,首先一起看看这样做是好是坏,以及什么时候适合使用这种方法。这种做法的一些潜在用例如下:
<强> 1。使用Web原生功能
应用中的部分内容使用Web引擎来实现也许是一种更适合的做法。例如WebSocket是一种原生的Web功能,主要面向网络环境而设计。这种情况下就更适合使用内建的网络引擎(iOS的WKWebView 以及,Android的WebView),而非安装某些只能“模拟“WebSocket的第三方库。无需额外安装任何代码,使用免费工具即可实现目标,这样岂不是更好。同时这也催生了下一个原因。
<强> 2。避免二进制文件体积过大
有些功能也许需要借助庞大的第三方库,而你可能希望能快速用上这样的功能,例如,为了以原生方式包含二维码图像生成器,可能需要安装某些第三方库,这会导致二进制文件体积增大。但如果使用网络视图引擎并通过一个简单的调用JavaScript库,就可以免费实现这一切,并且避免了使用第三方原生库。
<强> 3。缺乏可靠的移动库
对于一些前沿技术,可能暂时并不具备稳定可靠的移动端实现。好在大部分此类技术都具备网络实现,因此最高效的集成方法就是使用JavaScript库。
<强> 4。构建部分原生,部分基于Web的应用
很多新手开发者想要将自己的网站移植为移动应用,但在发现自己现有网站的部分功能过于复杂,无法面向每种移动平台快速重写时,往往会感到沮丧或受挫,例如你可能有一个非常复杂的Web页面无法快速转换为移动应用,但网站的其他内容可以很容易地转换面。对这种情况,如果通过某种方法将应用的大部分内容以原生方式构建,对于特别复杂的页面直接将其以HTML的形式无缝集成到应用中,是不是很棒啊。
