5

我们将实现基于浏览器的移动应用程序。我们有在 Spring MVC 上运行的 Web 应用程序，我们需要使用相同的业务逻辑，并且需要使用 HTML5、CSS3 和 jquery Mobile 重新实现前端。

请告诉我如何开始的步骤以及哪些工具可能有用。我是这种项目的新手。

4

1 回答 1

2

您需要遵循很多事情。为了便于理解，我们假设您网站的网址是whackedup.com。

为您的服务器端构建前端，但要明智地选择！

您必须为您的服务器端代码构建一个响应式/移动就绪的前端。您可以使用使用 REST API 的 Web 服务公开您的 Web 应用程序的功能。这样你的代码就不会被复制。但是，您应该小心您需要在移动应用程序中包含的内容。包括绝对必要的功能。无论如何，其他功能都可以从 Web 应用程序访问。正如一位智者曾经说过的那样，“为某物添加新功能并不难，省略的决定才是硬道理”。

可以考虑的移动框架：

免责声明：这完全是我的偏好，不要因为不喜欢其他框架而阉割我。我称这些是框架，以便更容易解决它们。我知道它们不是框架。

当涉及到移动开发时，您需要一个框架来简化您的工作。是的，您可以使用良好的 HTML5，但这会花费您的 DEV 时间来构建在您的应用程序中使用的可视组件（如轮播、滑块等）。因此，通常建议使用框架，您最终会使用以下之一：

  1. Twitter 的引导程序
  2. jQuery 移动
  3. 煎茶触摸

如果您想构建适应移动屏幕的桌面站点， Bootstrap 将是您的第一选择。我个人会使用 jQuery Mobile，因为：

  1. 它依赖于 jQuery
  2. 它有很棒的文档。真的，他们太棒了。
  3. 它反应灵敏，这意味着它可以在平板电脑和手机上运行。
  4. 它支持过多的设备。

您可以在这些地方找到 jQM 的优质资源：

  1. 堆栈溢出的jquery-mobile标签（也试试jqm标签）
  2. jQuery 的学习中心和jQM 的演示中心
  3. 这是 noupe 的一个示例应用程序，您可以尝试掌握它。

这就是说，在其网站上学习 jQuery Mobile 总是更好，因为他们总是倾向于教授最新版本的 jQM。

重定向到移动网站

在您选择的框架中构建完您的应用程序后，您必须从他们的手机重定向使用whackedup.com的用户。这是通过使用用户代理完成的。根据维基百科，

用户代理是代表用户行事的软件（软件代理）。

这将告诉您用户登录网站的设备/浏览器。这可以通过navigator.userAgentJS中的方法访问。这是一个演示。通常对于 Android 设备，用户代理如下所示：

Mozilla/5.0 (Linux; Android 4.0.3; HTC One X Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

使用此信息，您可以根据以下信息确定设备是否为 Android 设备/iOS 设备：

navigator.userAgent.indexOf("Android") != -1 //will return true if accessed on an android device

这样，您可以将其作为if循环的条件并进行重定向，可能是m.whackedup.com。有关 userAgent 的完整列表，请查看此列表。

使用缓存来提高性能

为了提高性能，您可以使用localStorage将数据存储在浏览器的缓存中，而无需再次调用服务器来获取该数据。这是学习localStorageAPI的好资源。

希望这有帮助！

编辑 - 回答您的问题

Q1：您建议 jqueryMobile 是 HTML5 的替代品（真的很困惑，jquery 用于验证，它只是 javascipt）

HTML5 不像 HTML4 那样是一种标记语言。它只是一个组件提供者。它提供了像 Canvas（一种文字 Flash 替代品）这样的组件以及许多类型的<input>标签和 API，比如localStorage. 您会发现单独使用 HTML5 来构建移动应用程序很困难。没有人说它不可能，但它很麻烦。jQuery Mobile 不是 HTML5 的替代品，它建立在 HTML5 之上以使其更好。

也就是说，您认为 jQuery Mobile只为您提供 JS 的想法是错误的。虽然 jQuery 是一个 JavaScript 库，但它的弟弟 jQuery Mobile 也是一个可视化库。jQuery Mobile 与 JavaScript 一起提供了大量的 css，因此样式对您来说变得更容易。

摘要：

  1. jQuery Mobile 不是 HTML5 的替代品，jQM 增强了 HTML5 提供的组件。请访问此站点亲自查看。
  2. jQuery Mobile 不仅仅是 JavaScript，它还是一个可视化库，您可以根据自己的需要进行主题化。

Q2：我们的spring mvc是项目没有使用任何注释或者没有REST API。那么您是否建议更改代码以支持 REST API？

A这不是必需的，但我确实提出了一个建议，让您的代码适应这两种情况，即适用于 Web 应用程序和移动应用程序。否则，您将在两个环境中复制代码，这很糟糕。如果您的 Web 应用程序和移动应用程序文件都将驻留在一起（在同一个项目中），那么您的移动应用程序和 Web 应用程序可以共享您的 Spring MVC 代码库。

概括

  1. 我只是建议您可以使用带有 REST API 的服务。
  2. 如果您的移动应用程序和 Web 应用程序将是相同的，那么重用您的 Web 应用程序的服务器端代码总是比为移动设备重新创建它更好。这样你就不会重复自己。
于 2013-07-12T15:59:37.427 回答