如何通过七步JSON代码将网站高效转化为移动应用？

本文共计2268个文字，预计阅读时间需要10分钟。

如果您告诉我只需要以下+7+行橙色的JSON代码，就可以将一个网站变成移动应用，您相信吗？完全不需要使用某种框架+API重写网站，就能获得与移动应用相同的体验。如果您已经有了“

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

完全不需要使用某种框架 API 重写网站，就可以获得与移动应用相同的行为。如果你已经有一个现成的网站，只需要简单地引用 URL 就可以将其“打包”为原生应用。

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

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

在介绍具体做法前你可能会问：“看着挺酷，但除了在原生应用框架内展示 Web 页面之外，这种技术还有什么意义？”问得好！这也是本文要讲的重点。

我们只需要创建一个无缝的Web 视图与应用间双向通信，借此，父应用就可以触发 Web 视图内的任何 JavaScript 函数，随后 Web 视图即可从外部调用原生 API。例如：

请注意，这个视图包含：原生导航条，以及内置的切换功能一个 Web 视图，其中嵌入了一个可以生成二维码的 Web 应用在底部包含一个原生的文字输入组件上述所有这一切只需要略微调整 JSON 代码的属性即可实现。

最后请注意，随着在文字输入区输入不同内容，二维码也会产生相应变化。