HTML|JS|CSS framework/library 适用于 PhoneGap 和主流浏览器

HTML|JS|CSS framework/library that works with PhoneGap and major browsers

我们需要使用尽可能多的通用代码库来构建可在桌面和移动平台上运行的应用程序(Android、iOS、Windows Phone ).此外,移动平台上的应用程序应该像应用程序一样运行(因此不是适合移动设备的网站),可以访问相机、位置和图标。

查看了所有选项并发现了一些或其他怪癖后,我决定在浏览器上使用 webapp/site 并在移动应用程序的基础上使用 PhoneGap。

现在,据我所知,在 Phonegap 基础结构中粘贴浏览器 webapp/site 的代码库应该适用于移动应用程序。当然,可能需要进行一些小改动。

然而,我也看到仅依靠 phonegap 和准系统 HTML5 技术(没有任何 UI 框架)将需要很多时间并且会很累。

所以我四处寻找 UI 框架并找到了 - JQuery Mobile、Sencha Touch、Kendo UI 等 jQuery Mobile,虽然也可以在桌面浏览器中工作,但不会给我一个类似网格的系统来定位元素。其余的似乎只能在移动平台上工作 - 他们没有在桌面浏览器上吹嘘 working/scaling。

那么,有没有什么通用的library/framework可以提供-CSS动画,类似网格的定位系统等等?

这与其说是一个 "answer" 不如说是一种方法的想法。也许首先使用 bootstrap 从桌面角度尝试创建您需要的内容,以便移动优先。然后可以使用 jquery 移动之类的东西来进行应用程序中的基本导航和结构。然后,您可以使用 "desktop version" 中的相同 code/layouts 通过 ajax 拉入您的页面内容(当然,它具有移动友好性 view/layout,因为它是使用 bootstrap).

您可能必须创建一个 api 来为您的应用程序提供内容,或者找到其他方法将该应用程序与服务器端的桌面站点区分开来,以便您知道它们在哪里请求来自,但似乎可行。

经过浏览器和phonegap的一些测试和验证,我选择了以下组合:

  • Yahoo 的 purecss 网格系统和基本小部件库。它很棒,唯一的痛苦是 Google 搜索它会给出模棱两可的结果。
  • Reactjs 来管理视图逻辑。这是我之前项目中最大的痛苦,因为我只使用了 jQuery,将我的整个项目变成了一个巨大的 jQuery 汤。与之相比,React 非常干净。
  • superagent 可能,AJAX 请求获取服务器数据。对此进行扩展,我还没有决定使用一个 类似模型的库 来处理状态;也许我不需要一个。我会随着项目的进行做出决定。
  • 手写 CSS 具有一些常识,这样我就可以学到一些东西,而不是浪费时间寻找一个一体化的库。 _这里唯一必要的规则是在您寻找某些东西时淘汰旧的最佳实践。例如,为了使某些东西居中,transition 方法是最好的技术。