3

我正在使用 Phonegap 构建一个 iPad 应用程序。

该应用程序应该是离线的（除了表单提交），所以它大部分是静态页面，所以我将有很多 HTML 文件，因为我没有使用 JS MVC / Require JS 来最小化复杂性。我看的越多，它基本上就是一个用Phonegap 封装的静态站点来构建一个应用程序。

由于我将拥有大量的 HTML 文件，因此如果我不使用任何模板引擎，管理（例如）页眉/页脚的更改将是一件痛苦的事。到目前为止，我使用 Codekit 将 Jade 文件编译为 HTML，效果很好，我只使用 Jade 进行布局/块/包含功能和 HTML 编译。

我不太喜欢使用 Jade 的一件事是，如果您的文件有很多嵌套的 HTML 标记（例如，使用 Zurb Foundation/Twitter Bootstrap 标记的复杂表单设计），那么突然间，Jade 看起来不再那么干净了。

不过，不知何故，我认为必须有更好的方法来做到这一点。你们有没有人用Phonegap做过一个大部分是静态页面的应用程序？有更好的建议吗？

谢谢

4

5 回答 5

8

您可以使用 1 个文件，将数据保存在 sqlite 中或作为 JS 文件中的变量。代码应该是这样的：

<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>

然后你可以在js文件中创建一个函数“navigate(page_id)”：

public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}

当然你可以使用 Jquery Mobile，但它会迫使你使用预定义的模板，我个人不使用它，因为编写我自己的模板要好得多，并且可能会提供更多选择。

于 2013-08-20T11:49:43.197 回答
1

我使用了一个非常标准的工作流程，它在 Web 开发中非常受欢迎——Grunt。Grunt 执行的任务与 Codekit 编译翡翠的方式非常相似，只是 Grunt 非常稳定，拥有庞大的社区并通过安装来支持翡翠grunt-contrib-jade。它会与几个模板引擎集成。

Grunt 一开始似乎有一个学习曲线，但它是一个很好的替代品，开源且免费使用。

咕噜网站： http: //gruntjs.com/

于 2013-08-18T05:07:58.923 回答
1

我会建议这个框架。页面导航很容易实现，不需要将所有页面都放在一个文件中，这样阅读或维护起来会非常困难。该框架允许您将任何文件（html、js、css）分成非常小的文件，以便每个文件都易于阅读和维护。

它还使用 Ajax 来获取 html（页面/部分视图），因此您可以使用 html 做您喜欢的事情。

我们phonegap团队已经完成了一些基于这个框架的项目，并且非常成功。该站点上有带有源代码的演示，可以帮助您设置项目。您可以通过源代码一目了然的文件结构。

我不建议使用 jQueryMobile，因为它对 phonegap 应用程序来说真的很痛苦。以下是一些解释原因的帖子：

  1. jQuery Mobile 如何吃掉 PhoneGap 的性能，请参阅实验
  2. 谁在谋杀 PhoneGap？这是 jQuery 移动
于 2013-08-22T01:59:11.553 回答
0

在您的帖子中，您提到您没有使用 mvc 框架。但是，我建议您查看backbone.js。Backbone 是一种经常与Phonegap 结合使用的技术。您可以使用 Backbones 视图来组织您的代码。

于 2013-08-22T14:34:26.190 回答
0

我正在成功使用 JQuery mobile。我使用 RazorEngine 作为模板服务，他们将文件编译为静态 html。Jquery Mobile 有一个不错的分页引擎，它使用 ajax 获取静态 html 文件，然后在页面上显示这些文件，以及许多其他不错的移动特定功能。

于 2013-08-16T22:58:30.373 回答