Question

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

该应用应该是离线的（除了表单提交），因此它将主要是静态页面，所以我将有很多HTML文件，因为我没有使用JS MVC / Require JS来最小化复杂。我看得越多，它基本上是一个静态网站，包含在Phonegap中，用于构建应用程序。

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

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

不过，我认为必须有更好的方法来做到这一点。你们有没有用Phonegap完成一个大多数静态的页面应用程序？还有更好的建议吗？

由于

Answer 1

你可以使用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，但它会强制你使用预定义的模板，我个人不会使用它，因为编写我自己的模板要好得多，可能会提供更多的选择。

Answer 2

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

Grunt可能在开始时似乎有一个学习曲线，但它是一个很好的选择，开源和免费使用。

Grunt网站：http://gruntjs.com/

Answer 3

我建议this framework。实现页面导航非常容易，而且您不需要将所有页面都放在一个文件中，这将使其难以阅读或维护。此框架允许您将任何文件（html，js，css）分成非常小的文件，以便每个文件都易于阅读和维护。

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

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

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

Answer 4

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

Answer 5

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

如何组织Phonegap HTML文件

5 个答案: