使用HTML5BoilerPlate进行HTML5移动开发

Question

我正在使用HTML5BoilerPlate作为模板开始编写HTML5移动应用程序，但是我找不到关于HTML5移动开发最佳实践的很多资源。我正在寻找以下内容：
- 使用选项卡控制器进行导航
- 在视图之间导航
- 如何最好地处理内容？（最好在内容div中使用几个div，并且每次仅显示一个div吗？）

事实上，我想了解Google Latitude中的一些功能。

是否有任何适合初学者的指南可以涵盖这些问题？

- Luc

Answer 1

• 你需要更多地实现这些“控制器”组件的逻辑。在iOS开发中可能存在的一些类在HTML5中不存在。你可以自己编写或使用现有框架。
• 视图之间的导航是通过编程处理的。你需要自己实现可以动画显示和隐藏屏幕的组件，或者使用现成的框架，如Sencha Touch或jQuery Mobile。
• 这取决于你想要的视觉流程。我知道Sencha Touch会懒加载div以节省内存。我想诀窍在于尝试不同实现，找到最适合你需求的实现方式（然后写一篇博客文章）。

SixRevisions网站有一篇关于HTML5编程入门的很好的文章。其他文章，请点击这里，还有一些好的提示，请点击这里，还有苹果的文档。

我发现Sencha Touch最好的初学者指南是他们随源代码提供的示例。他们为每个UI控件提供了一个示例，还提供了多个应用程序，可以逐步介绍框架。其他资源包括他们的Vimeo频道、他们的论坛和他们的文档。

此外，你可以打开移动站点，并使用Chrome/Safari的开发者工具栏查看他们如何使用代码实现。不过，你可能需要模拟移动浏览器的用户代理字符串。

- mistagrooves

Answer 2

我们发布了一个移动端模板，你应该查看相关wiki中的文档以获取更多信息。

- Divya Manian

Answer 3

虽然不是指南，但我强烈建议您了解Sencha Touch或JQuery Mobile HTML5移动框架。它们与HTML5 Boilerplate结合使用，将比仅使用HTML5 Boilerplate更有助于引导您的项目。

- Russ

---

我在移动端使用 HTML5BoilerPlate 和 jQuery。您认为应该将 Sencha Touch 与 jQuery 结合使用吗？还是仅仅使用 jQuery 就足够了？您知道如何处理不同的视图吗？所有内容是否都加载在 content div 中？ - Luc

@Luc Sencha Touch和JQuery提供非常相似的功能（DOM查询，DOM操作，Ajax）。同时使用两者会过度冗余。 - mistagrooves

我之前不知道Sencha Touch！它看起来很棒！谢谢，我会去了解这个框架的。我更习惯使用JQuery，但是似乎Sencha Touch在视图方面有更多的功能。 - Luc

@Luc，基本上就像@mistagrooves所说的那样，JQuery Mobile和Sencha Touch是两个试图解决相同问题的框架。虽然我还没有使用过任何一个，但我认为目前Sencha Touch比JQuery Mobile更稳定和成熟。您仍然可以在Sencha Touch旁边使用JQuery CORE JavaScript库（包含在HTML5 Boilerplate中）。 - Russ