如何使用HTML/CSS/JavaScript开发桌面应用程序？

Question

如何使用HTML/CSS/JavaScript开发桌面应用程序？

197

首先，我对这个职业不感兴趣。我是一名网页开发者，我的一位同事最近去了 Spotify 并表示他将主要在 Spotify 桌面应用程序中使用 JavaScript。他说它使用“Chrome frame”，其中所有内容都像一个 Web 应用程序（HTML/JS/CSS）。

作为一个从未为桌面构建过任何东西的 Web 开发者，这是个好消息。如果我能够使用已经掌握的技术，并将它们实现在某种“框架”内，仍然能够构建 Windows 或跨平台应用程序，那就太好了。

我知道我没有提到任何关于数据库的事情，但即使是一个简单的 hello world 桌面应用程序也会很棒。

那么，如何开始呢？我需要什么/需要知道什么？

- user967451

你做错了。Web 不是为桌面应用程序设计的。如果你想要，可以使用 QML/QtQuick，这是一个很好的折衷方案（但它仍然是桌面应用程序，而不是 Web！） - Stef

类似于这里：https://dev59.com/pnVD5IYBdhLWcg3wDG_m - Zhang LongQI

6

http://electron.atom.io - emlai

Slack使用MacGap https://github.com/MacGapProject/MacGap1和https://github.com/MacGapProject/MacGap2。 - wacha

为什么不问问你的朋友？o.O - Mud

显示剩余3条评论

9个回答

34

NW.js

(曾称为node-webkit)

如果您熟悉Node或有JavaScript经验，我建议使用NW.js。

NW.js是基于Chromium和node.js的应用程序运行时。

特点

使用现代HTML5、CSS3、JS和WebGL编写的应用程序

完全支持Node.js API及其所有第三方模块。

良好的性能：Node和WebKit在同一个线程中运行：函数调用直接进行；对象在同一个堆中并可以相互引用

易于打包和分发应用程序

适用于Linux、Mac OS X和Windows操作系统

您可以在这里找到NW.js存储库，并在这里获得有关NW.js的良好介绍。如果您想学习Node.js，我推荐看看这篇堆栈溢出帖子，里面有许多好的链接。

- Rawa

2

赞同。很棒的工具。 - Erik Reppen

但是如果不要求他们安装Node和Node-Webkit，这个程序就不能在人们之间分发，对吗？ - Jānis Gruzis

@JānisGruzis 不，你已经将你的应用程序与NW.js二进制文件一起发布了。 - approxiblue

27

~~Awesomium 让在C++或.NET应用中使用HTML UI变得容易~~

更新

我的先前回答现在已经过时。现在您应该考虑使用Electron。许多流行的桌面应用程序都是在其基础上开发的。

- Ronnie Overby

16

注意：AppJS已弃用，不再建议使用。

请参考NW.js。

- Siwei

3

这似乎已被appjs的创建者弃用。 - Dan Esparza

@DanEsparza 谢谢，我改进了我的答案。 - Siwei

9

看起来针对HTML/JS/CSS桌面应用程序的解决方案不少。

我刚刚发现的一个解决方案是TideSDK：http://www.tidesdk.org/，从文档上看似乎很有前途。

您可以使用Python、PHP或Ruby进行开发，并将其打包为Mac、Windows或Linux。

- mydoghasworms

1

看起来很有前途，但似乎已经不再开发了。核心团队现在正在开发一种叫做TideKit的东西，但是他们发布它需要很长时间 - 而且还要花钱:( - TheStoryCoder

1

是的，有点可惜。当我回答时，它看起来很有前途。我猜这就是为什么他们不喜欢关于推荐东西的问题的原因之一。 - mydoghasworms

3

抱歉打破您的幻想，Spotify桌面客户端只是基于Webkit的浏览器。当然它暴露了特定的附加功能，但它只能运行JS并呈现HTML/CSS，因为它有一个JS引擎和一个Chromium渲染引擎。这不能帮助您编写客户端Web应用程序并部署到多个平台。

您要寻找的类似于Sencha Touch的东西 - 一种允许将HTML5应用程序本地部署到iOS、Android和Blackberry设备的框架。它基本上充当某些API调用和可用设备特定功能之间的中介。

我没有使用过appcelerator，但它似乎正在做正好这件事，并在网上得到非常好的评价。您应该试试它（除非您想回到1999年并使用MS HTA ;)）

- Oleg

它使用 WebKit 作为应用程序的基础，但主要软件并非基于 HTML/JS。 - Sucrenoir

1

我知道有Fluid和Prism（还有其他的，但我曾经使用过这个）可以让你加载一个网站，看起来像是一个独立的应用程序。

在Chrome中，您可以为网站创建桌面快捷方式。（您可以从Chrome内部执行此操作，不应该将其与您的应用程序打包在一起）Chrome Frame则不同：

Google Chrome Frame是一个插件，专为基于Internet Explorer的开源Chromium项目设计；它将Google Chrome的开放网络技术带到了Internet Explorer。

您需要像这样的某种包装器来制作您的Web应用程序，然后剩下的就是您习惯的Web技术。您可以使用HTML5 本地存储在应用程序离线时存储数据。我认为您甚至可以使用SQLite。

我不知道您如何访问特定于操作系统的功能。上述内容与任何“常规”网站具有相同的限制。希望这能给您一些开始的指导。

- sachleen

1

你可以使用Adobe AIR构建JavaScript应用程序... http://www.adobe.com/products/air.html

- Clintm

0

CEF提供了很多灵活性和自定义选项。但是，如果意图是快速开发，node-webkit也是一个不错的选择。Node-Webkit还提供了直接从DOM调用节点模块的能力。

如果没有任何本地模块要集成，Node-Webkit可以提供更好的效益。对于本地模块，使用CEF更好，包括C/C++甚至C#。

- harsha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfred · Accepted Answer

你可以使用 Titanium 开发桌面应用程序。此外，你可以看一下Chromium Embedded Framework。它基本上是一个基于 Chromium 的 Web 浏览器控件。

它是用 C++ 编写的，因此你可以在容器应用程序中执行所有低级操作系统操作（如 Growl、托盘图标、本地文件访问、COM 端口等），然后使用 HTML/JavaScript 进行所有应用程序逻辑和 GUI。它允许你拦截任何 HTTP 请求，以提供本地资源或执行某些自定义操作。例如，一个请求 http://localapp.com/SetTrayIconState?state=active 可以被容器拦截，然后调用 C++ 函数来更新托盘图标。

它还允许你创建可以直接从 JavaScript 调用的函数。

在 CEF 中直接调试 JavaScript 非常困难。它不支持任何类似 Firebug 的工具。

你也可以尝试AppJS.com（使用 HTML、CSS 和 JavaScript 帮助构建 Linux、Windows 和 Mac 上的桌面应用程序）。

此外，正如 @Clint 指出的那样，Brackets.io 团队（Adobe）使用 Chromium Embedded Framework 创建了一个很棒的 Shell，可以更轻松地入门。它称为 Brackets Shell：GitHub.com/adobe/brackets-shell。在这里了解更多信息：Clintberry.com/2013/html5-desktop-apps-with-brackets-shell。