如何在不更新应用程序的情况下重新加载 UI 的 Cordova 应用程序
How to reload UI of Cordova app without updating app
我们目前正处于研究是否为相当大且复杂的业务应用程序使用 HTML5/Angular/Cordova 混合解决方案的早期阶段。有问题的一件事是 Android 和 iOS 之间批准时间的显着差异。我们也非常喜欢代码一旦部署到网站和移动设备上的想法。在这一点上,我们不太关心 UI 恐怖谷问题。
我了解到某些应用程序(例如 Netflix)会动态更新 UI 而无需更新应用程序本身。这听起来像是解决每次发布时部署新应用程序版本令人头疼的好方法。如果我们可以完全缓存 UI 直到实际上有网站更新的时间。我们的应用程序将在通过 REST 服务提交的网络问题的情况下支持离线数据存储,我们不想在每次加载特定 page/route/template 时请求 UI,所以一个简单的 webview 加载一个来自服务器的页面不是我们想要的。
我进行了相当广泛的搜索,但没有找到任何详细说明如何完成此操作的内容。也许您可以指出我找到的一些示例的正确方向?或者,也许我正在疯狂追逐,你也可以告诉我。
你特别提到 Angular,所以我不确定这个解决方案是否满足你的需求,但对我有用的方法是使用 jQuery Mobile 作为框架,然后当应用启动时,根据从 Web 服务检索到的 JSON 数据,以编程方式呈现 UI。例如,假设您的主页上有 2 个按钮,"Yes" 和 "No"。您将从 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 来获得非常具体的布局。显然这是一个非常简单的示例,但这是基本概念,我在生产应用程序中使用它。
我们目前正处于研究是否为相当大且复杂的业务应用程序使用 HTML5/Angular/Cordova 混合解决方案的早期阶段。有问题的一件事是 Android 和 iOS 之间批准时间的显着差异。我们也非常喜欢代码一旦部署到网站和移动设备上的想法。在这一点上,我们不太关心 UI 恐怖谷问题。
我了解到某些应用程序(例如 Netflix)会动态更新 UI 而无需更新应用程序本身。这听起来像是解决每次发布时部署新应用程序版本令人头疼的好方法。如果我们可以完全缓存 UI 直到实际上有网站更新的时间。我们的应用程序将在通过 REST 服务提交的网络问题的情况下支持离线数据存储,我们不想在每次加载特定 page/route/template 时请求 UI,所以一个简单的 webview 加载一个来自服务器的页面不是我们想要的。
我进行了相当广泛的搜索,但没有找到任何详细说明如何完成此操作的内容。也许您可以指出我找到的一些示例的正确方向?或者,也许我正在疯狂追逐,你也可以告诉我。
你特别提到 Angular,所以我不确定这个解决方案是否满足你的需求,但对我有用的方法是使用 jQuery Mobile 作为框架,然后当应用启动时,根据从 Web 服务检索到的 JSON 数据,以编程方式呈现 UI。例如,假设您的主页上有 2 个按钮,"Yes" 和 "No"。您将从 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 来获得非常具体的布局。显然这是一个非常简单的示例,但这是基本概念,我在生产应用程序中使用它。