HTML | JS |适用于PhoneGap和主要浏览器的CSS框架/库

Question

我们需要使用尽可能多的通用代码库来构建应用程序，这适用于桌面和移动平台（Android，iOS，Windows Phone）。此外，移动平台上的应用程序应该像应用程序（因此不适合移动设备的网站），可以访问相机，位置和图标。

看了所有选项并发现了一些或其他的怪癖，我决定在浏览器和PhoneGap上使用webapp / site来开启移动应用程序。

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

然而，我也看到只依靠phonegap和准系统HTML5技术（没有任何UI框架）需要很多时间而且会很烦人。

所以我四处寻找UI框架并找到了 - JQuery Mobile，Sencha Touch，Ken​​do UI等jQuery Mobile，虽然也可以在桌面浏览器中工作，但它不会给我一个类似网格的系统来定位元素。其余的似乎只适用于移动平台 - 他们并不夸耀它在桌面浏览器上的工作/扩展。

那么，是否有任何可以提供的通用库/框架 - CSS动画，类似网格的定位系统等？

Answer 1

这不是一个“答案”，而是一个方法的想法。也许尝试首先使用引导程序从桌面角度创建所需内容，以便首先使用移动设备。然后可以使用像jquery mobile这样的东西，用于应用程序中的裸骨导航和结构。然后，您可以使用“桌面版”中的相同代码/布局通过ajax拉入您的页面内容（当然，这将使用自举视图/布局，因为它是使用引导程序编写的）。

您可能需要创建一个api来为您的应用提供内容，或者找一些其他方法来区分应用与服务器端的桌面网站，以便您知道他们的请求来自哪里，但是它似乎做到了。

Answer 2

在对浏览器和phonegap进行一些测试和验证后，我选择了以下组合：

• Yahoo的purecss 库，用于网格系统和基本小部件。谷歌搜索带来的唯一痛苦就是令人敬畏的结果。
• Reactjs 来管理视图逻辑。这是我之前项目中最大的痛苦，只使用了jQuery，将我的整个项目变成了一个巨大的jQuery汤。与此相比，React非常干净。
• superagent 可能是因为AJAX请求获取服务器数据。为了扩展这一点，我还没决定使用一个处理状态的模型库;可能我不需要一个。随着项目的进行，我将决定。
• 手工编写的CSS ，带有一些常识，这样我就可以学到一些东西，而不用浪费时间去寻找一体化的库。 _这里唯一必要的规则是在寻找某些东西时淘汰旧的最佳实践。例如，为了集中某些东西，transition方法是最好的方法。