2022-07-07 分类： 网站建设
本文介绍了借助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视图引擎并通过一个简单的