在我们的混合应用程序中,我们需要在应用程序中本地维护 HTML。这些 HTML 在托管服务器中更改后必须在本地刷新。实现这一目标的方法应该是什么?
5 回答
如果您在 android 或 iphone 设备的移动应用程序中处理 HTML 文件,则需要注意以下因素。
1. 数据处理 - 解析数据并将其呈现在设备屏幕上的最佳方式
假设您的 HTML 文件有 1000 个节点,每个节点将有 10 个子节点。现在,您尝试根据第 800 个节点中的键获取值。现在发生的情况是,解析器在找到搜索值之前读取 1 到 800 个节点中的每一个。这将造成非常糟糕的用户体验。
为避免这种情况,对于 android 移动应用程序,使用 JSON 文件格式,对于 iOS 设备,使用 PLIST 文件格式。
由于您的目标是混合应用程序,因此它可能在 android 和 iphone 设备上运行。因此,在服务器中,创建转换数学并将相应的文件呈现给设备。
2. 数据加载 - 当您的应用程序与服务器同步以更新 HTML 文件时要记住的事情。
电池利用率 - 如果您的应用程序不断地定期访问服务器以查看 HTML 文件是否有任何更新,它将对设备电池造成非常高的影响,并且应用程序的网络利用率将很高。
我推荐的方法是,如果文件有任何更新,您的服务器应该将消息推送到应用程序。基于该用户可以选择更新应用程序。
开始文件同步之前要做的事情。
在开始与服务器同步数据之前,应检查设备的当前电池电量。
应检查网络状态。如果设备连接到 wifi,则应该进行升级。
根据用户位置和时间戳,您可以选择在用户不使用手机时执行同步。
您可以在 WebView 中加载任何 HTML 内容或文件。
使用loadDataWithBaseURL()方法,您可以加载任何HTML 数据:
//read html data from any file or resource
String HTML = "<html><head><title>TITLE</title></head><body><center><b>MY BODY</b></center></body></html>";
//load HTML inside webview
webView.loadDataWithBaseURL(null, HTML, "text/html", "utf-8", null);
您还可以直接从文件加载数据:
File htmlFile = new File(Environment.getExternalStorageDirectory() + "page.html");
webView.loadUrl("file:///" + htmlFile.getAbsolutePath());
或从资产文件夹:
webView.loadUrl("file:///android_asset/pageInAssets.html");
您可以定期从您的服务器或每次用户获得互联网连接时获取更新的数据(并将其存储在本地)。
我使用混合应用程序的背景:我喜欢它们。我遇到过很多问题,几乎都修复了。
当我遇到需要在多个设备上使用的服务器或数据库的情况时,我喜欢这样做。
脚步
- 为您编写网络应用程序
- 在我免费使用的Heroku等廉价服务器上托管 Web 应用程序
- 运行网络服务器
- 在您的混合应用程序中,使混合应用程序只有一个功能,即链接到您的网络服务器的 IFRAME
通过这样做,您将获得什么:
- 24/7 全天候运行的网络服务器,您不必担心服务器发热或其他任何事情
- 免费网络服务器
- 您的应用程序将占用更少的设备空间,因为一切都在云端
- 您的应用将需要更少的时间来下载
- 您可以让您的应用程序将
.html
文件缓存到客户端,以便他们稍后可以在没有网络连接的情况下查看该页面。 - 如果您正确缓存文件,则每次连接到 wifi 并查看 .html 页面时,它都应该检查服务器是否有新版本的 html 文件。
希望这会有所帮助 =) =P
如果有一个带有最新可用更新的时间戳,每次应用程序启动时检查它,如果它比执行的最新更新更新,那么重新下载 HTML 文件怎么样?这当然可以扩展为在每个文件或每个目录的基础上执行,而不是仅重新下载更改的文件。
- 您可以从本地网页(例如项目的 Resources 文件夹中的网页)加载,因此您应该在项目中创建一个文件 html/index.html
- 此代码有两个按钮本地和远程页面
Html 文件资源应该在下面有详细信息
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<h1>Hello there</h1>
<p>Welcome to this webpage</p>
</body>
</html>
app.js 文件详情如下
var win = Titanium.UI.createWindow({
title:"Loading Local and Remote Web Pages",
backgroundColor:"#FFFFFF",
});
var loadLocalButton = Titanium.UI.createButton({
title:"Load local",
height:36,
width:100,
bottom:12,
left:12
});
var loadRemoteButton = Titanium.UI.createButton({
title:"Load remote",
height:36,
width:100,
bottom:12,
right:12
});
var webView = Titanium.UI.createWebView({
top:0,
left:0
});
loadLocalButton.addEventListener("click", function(e){
//You can load from a local webpage (e.g. a webpage in the Resources folder of your project)
webView.url = "html/index.html";
//or you can load an HTML-formatted string
webView.html = "<h1>This is from a string</h1><p>Yes, it is</p>";
});
loadRemoteButton.addEventListener("click", function(e){
webView.url = "http://www.google.com";
});
win.add(webView);
win.add(loadLocalButton);
win.add(loadRemoteButton);
win.open();