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

时间:2012-09-02 01:32:54

标签: javascript html css desktop-application google-chrome-frame

首先,我对这方面的专业兴趣不感兴趣。我是一名网络开发人员,我最近离开Spotify的同事,并表示他将主要使用JavaScript为Spotify桌面应用程序工作。他说它使用“Chrome框架”,内部的所有内容都像网络应用程序(HTML / JS / CSS)一样。

作为一名从未为桌面构建任何内容的网站开发人员,这是一个好消息。如果我可以使用我已经知道的技术并在某种“框架”中实现它们,并且仍然能够构建一个窗口或更好的跨平台应用程序。

我知道我没有提及任何有关数据库的内容,但即使是一个简单的hello world桌面应用程序也可以通过Web技术上手。

那怎么一个呢?究竟我需要/需要知道什么?

9 个答案:

答案 0 :(得分:73)

您可以从Titanium for desktop dev开始。您也可以查看 Chromium Embedded Framework 。它基本上是基于铬的Web浏览器控件。

它是用C ++编写的,因此您可以在容器应用程序中执行所需的所有低级操作系统(Growl,托盘图标,本地文件访问,COM端口等),然后在html /中执行所有应用程序逻辑和gui JavaScript的。它允许您拦截任何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,使其更容易入门。它被称为括号shell:github.com/adobe/brackets-shell在此处了解更多信息:clintberry.com/2013/html5-desktop-apps-with-brackets-shell

答案 1 :(得分:33)

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 repo here,以及对NW.js here的一个很好的介绍。如果您喜欢学习Node.js,我会建议this SO帖子有很多好的链接。

答案 2 :(得分:26)

  

Awesomium使您可以轻松地在C ++或.NET应用程序中使用HTML UI

更新

我之前的回答现在已经过时了。这些天你不会为了这个问题而考虑使用Electron。许多流行的桌面应用程序都是基于它开发的。

答案 3 :(得分:16)

注意:AppJS已弃用,不再推荐使用。

请改为NW.js

答案 4 :(得分:9)

似乎HTML / JS / CSS桌面应用程序的解决方案并不缺乏。

我刚遇到的一个解决方案是TideSDK:http://www.tidesdk.org/,看起来非常有前途,看看文档。

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

答案 5 :(得分:3)

很抱歉破解了您的泡泡,但 Spotify桌面客户端just a Webkit-based browser。当然它暴露了特定的附加功能,但它只能运行JS并呈现HTML / CSS,因为它有一个JS引擎和一个Chromium渲染引擎。这对您编写客户端Web应用程序并部署到多个平台没有帮助。

您正在寻找的内容类似于Sencha Touch - 一个允许HTML5应用本地部署到iOS,Android和Blackberry设备的框架。它基本上充当某些API调用和特定于设备的功能之间的中介。

我没有使用appcelerator的经验,似乎正是这样做的 - 并且在线获得非常有利的评论。你应该试一试(除非你想回到1999年并使用MS HTA滚动;)

答案 6 :(得分:1)

我知道有FluidPrism(还有其他人,这就是我以前使用过的那个),可让您将网站加载到看起来像独立应用的网站。

在Chrome中,您可以为网站创建桌面快捷方式。 (您可以在Chrome中执行此操作,但不能/不应该使用您的应用将其打包)Chrome浏览器框架不同:

  

Google Chrome Frame是专为基于Internet Explorer而设计的插件   关于开源Chromium项目;它带来了Google Chrome的开放性   Internet Explorer的Web技术。

你需要为你的webapp设置一些这样的包装器,然后剩下的就是你习惯的网络技术。您可以在应用离线时使用HTML5 local storage存储数据。我想你甚至可以使用SQLite。

但是,我不知道如何访问特定于操作系统的功能。我上面描述的内容与任何“常规”网站具有相同的限制。希望这能为您提供从何处入手的指导。

答案 7 :(得分:1)

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

答案 8 :(得分:0)

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

如果没有任何本机模块集成Node-Webkit可以提供更好的里程数。使用本机模块C / C ++甚至C#,CEF更好。