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

Posted 2023-03-15

【中文标题】如何在不更新应用程序的情况下重新加载 Cordova 应用程序的 UI

【英文标题】：How to reload UI of Cordova app without updating app

【发布时间】：2016-02-25 18:39:37

【问题描述】：

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

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

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

【参考方案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 中，从而获得非常具体的布局。显然这是一个非常简单的示例，但这是基本概念，我正在生产应用程序中使用它。

【讨论】：

非常有趣的解决方案！该解决方案的性能如何？最终渲染 UI 需要多长时间？

从服务器检索数据后，没有明显的差异。如果您将数据缓存在本地存储中，如果您知道您的 UI 数据是最新的，则可以排除传输时间。

有趣。我可以看到它适用于基本的动态表单布局。我想知道如果有任何复杂的 ui 布局必须在手机/平板电脑上以完全不同的方式显示，那将是多么容易/困难。我们也一直在考虑根据数据对象本身包含的元数据生成 ui。只需从服务器中提取 ui 元素就会大大简化这一点。我想得越多，我就越喜欢从服务器中提取整个表单布局、缓存它并使用数据对象上的元数据来决定加载哪个表单来查看/编辑等。

问你一个问题。我知道 Apple 不喜欢基本上只是将页面加载到视图中的应用程序，您是否遇到过针对 iOS 发布的任何问题？

不，一点也不。正如你所说，提交一个没有逻辑并且实际上是一个美化的浏览器窗口的应用程序是让苹果感到不安的事情。如果你仔细想想，我们在这里谈论的是一个行业标准的 MVC / MVVM /（选择你的毒药）应用程序，其中“V”是根据数据和逻辑呈现的，就像你在显示一个饼图一样.