如何在不更新应用程序的情况下重新加载 Cordova 应用程序的 UI

Question

我们目前处于研究是否将 HTML5/Angular/Cordova 混合解决方案用于相当大型和复杂的业务应用程序的早期阶段。有问题的一件事是 Android 和 iOS 之间的批准时间存在显着差异。我们也非常喜欢代码一旦部署到网站和移动设备的想法。在这一点上，我们不太关心 UI 恐怖谷问题。

我了解到某些应用程序（例如 Netflix）会动态更新 UI，而无需更新应用程序本身。这听起来是一种解决每次发布新应用程序版本时都需要部署新应用程序的麻烦的好方法。如果我们可以完全缓存 UI，直到网站实际上有更新。我们的应用程序将在通过 REST 服务提交的网络问题的情况下支持离线数据存储，并且我们不想在每次加载特定页面/路由/模板时请求 UI，所以一个简单的 webview 从服务器加载页面这不是我们想要的。

我进行了相当广泛的搜索，但没有找到任何详细说明如何完成此任务的信息。也许您可以为我找到的一些示例指明正确的方向？或者，也许我正在疯狂追逐，你也可以告诉我。

Answer 1

您特别提到了 Angular，所以我不确定这个解决方案是否适合您的需求，但对我有用的方法是使用 jQuery Mobile 作为框架，然后在应用程序启动时以编程方式呈现 UI从 Web 服务检索的 JSON 数据。例如，假设您的主页上有 2 个按钮，“是”和“否”。您将从 index.html 中的一个空页面开始：

<div data-role="page" id="pageMain" data-title="Main">
    <div data-role="content">
        <div id="myContent">
        </div>
    </div>
</div>

假设当您在启动时从服务器检索 JSON UI 数据时，您会得到以下信息：

[
    { "ControlType": "button","ControlName": "btnYes","Label": "Yes" }
    { "ControlType": "button","ControlName": "btnNo","Label": "No" }
]

您将根据 JSON 数据创建您的 UI 元素，并将 myContent div 的 innerHtml 内容设置为：

<div data-role="page" id="pageMain" data-title="Main">
    <div data-role="content">
        <div id="myContent">
            <button id="btnYes">Yes</button>
            <button id="btnNo">No</button>
        </div>
    </div>
</div>

此外，您还可以通过从服务器检索 CSS 并通过<style></style> 标签将其内联插入 index.html 中，从而获得非常具体的布局。显然这是一个非常简单的示例，但这是基本概念，我正在生产应用程序中使用它。