Fatal编程技术网
  • html/
  • 如何组织Phonegap HTML文件

如何组织Phonegap HTML文件

html cordova

如何组织Phonegap HTML文件,html,cordova,pug,template-engine,codekit,Html,Cordova,Pug,Template Engine,Codekit,我正在使用Phonegap构建一个iPad应用程序 这个应用程序应该是离线的（除了表单提交），所以它大部分都是静态页面，所以我会有很多HTML文件，因为我没有使用JS MVC/Require JS来最小化复杂性。我看得越多，它基本上就是一个静态站点，包装在Phonegap中，用于构建应用程序 因为我将有很多HTML文件，如果我不使用任何模板引擎，管理（例如）页眉/页脚的更改将是一件痛苦的事情。到目前为止，我使用Codekit将Jade文件编译成HTML，效果很好，我只使用Jade进行布局/块/包

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

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

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

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

不过，我认为一定有更好的办法。你们中有人用Phonegap开发过一个静态页面应用程序吗？还有更好的建议吗

谢谢

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

我使用的是一个非常标准的工作流，在web开发中非常流行-Grunt。Grunt的任务非常类似于Codekit编译jade的方式，只是Grunt非常稳定，拥有庞大的社区，并通过安装
Grunt contrib jade
来支持jade。它将与多个模板引擎集成

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

Grunt网站：

您可以全部使用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>
当然，您可以使用Jquery Mobile，但它会迫使您使用预定义的模板，我个人不使用它，因为编写自己的模板更好，而且可能会提供更多选项。

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

它还使用Ajax来获取html（页面/部分视图），所以您可以使用html做您想做的事情

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

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

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

    我不使用jQuery Mobile，因为该应用程序的设计与“应用程序”的设计非常不同（没有标题/导航栏等），所以我不能使用jQuery Mobile。因为我使用Codekit，所以我不使用Grunt，但我肯定会在下一个项目中使用Grunt，因为它看起来是当今的最佳实践。它有点复杂，因为每个“页面”可以有多个子页面，也许每个子页面也会有一个或两个子页面。这就是为什么我说，这个应用程序在概念上与应用程序很不一样。我将使用简单的页面刷新作为主导航，但我认为我将使用jquery/ajax作为一些子页面链接。谢谢你的建议。你可以用同样的方法处理子页面，我有一些30页的应用程序，为每个页面分配一个id，就这样；）这是最简单的方法。如果你要创建多个文件，你应该考虑文件（html、css、JS…）的加载时间，因此最终结果将是一个巨大的html文件，由所有页面组成，每个页面具有不同的id？基本上是的，与任何html5单页网站一样，不用太担心，你可以在加载文件时使用启动屏幕，也可以使用一些JS，比如AngularJS（），在为移动设备编写html5应用程序时有一些提示，使用ID而不是类来定位html标记，通过删除所有空格和换行符简化所有JS，使用小变量（“var mh”而不是“var Main_homepage”）…我不得不放弃jQuery Mobile，因为Android上PhoneGap应用程序的渲染速度很慢。jquerymobile很漂亮，有很多很好的小部件，但是性能低下使它无法使用。 
    public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}