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

How to develop Desktop Apps using HTML/CSS/JavaScript?

提问by TK123

First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).

首先，我对专业地做这件事不感兴趣。我是一名网络开发人员，我的一位同事最近离开了 Spotify，他说他将主要使用 JavaScript 为 Spotify 桌面应用程序工作。他说它使用“Chrome 框架”，里面的一切都像一个网络应用程序（HTML/JS/CSS）一样完成。

As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.

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

I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.

我知道我没有提到任何关于数据库的内容，但即使是一个简单的带有 Web 技术的 hello world 桌面应用程序也能很好地开始。

So how does one go about this? Exactly what do I need/need to know?

那么如何解决这个问题呢？我到底需要/需要知道什么？

采纳答案by blasteralfred Ψ

You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.

您可以从用于桌面开发的 Titanium 开始。你也可以看看Chromium Embedded Framework。它基本上是一个基于铬的网络浏览器控件。

It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=activecould be intercepted by the container and then call the C++ function to update the tray icon.

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

It also allows you to create functions that can be called directly from JavaScript.

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

It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.

在 CEF 中直接调试 JavaScript 非常困难。不支持 Firebug 之类的东西。

You may also try AppJS.com(Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)

你也可以试试AppJS.com( Helpto build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)

Also, as pointed out by @Clint, the team at brackets.io(Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shellFind out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

此外，正如@Clint 所指出的，brackets.io(Adobe)的团队使用 Chromium Embedded Framework 创建了一个很棒的 shell，这使得它更容易上手。它被称为括号外壳：github.com/adobe/brackets-shell在此处了解更多信息：clintberry.com/2013/html5-desktop-apps-with-brackets-shell

回答by Rawa

NW.js

净水器

(Previously known as node-webkit)

（以前称为 node-webkit）

I would suggest NW.jsif you are familiar with Node or experienced with JavaScript.

如果您熟悉 Node 或有 JavaScript 经验，我会推荐NW.js。

NW.js is an app runtime based on Chromium and node.js.

Features

• Apps written in modern HTML5, CSS3, JS and WebGL
• Complete support for Node.js APIs and all its third party modules.
• Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
• Easy to package and distribute apps
• Available on Linux, Mac OS X and Windows

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

特征

• 用现代 HTML5、CSS3、JS 和 WebGL 编写的应用程序
• 完全支持 Node.js API 及其所有第三方模块。
• 良好的性能：Node 和 WebKit 运行在同一线程中：函数调用变得简单；对象在同一个堆中，只能相互引用
• 易于打包和分发应用程序
• 适用于 Linux、Mac OS X 和 Windows

You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.jsI would recommend thisSO post with a lot of good links.

你可以找到NW.js回购这里，和一个很好的介绍NW.js这里。如果你喜欢学习Node.js，我会推荐这篇SO 帖子，里面有很多很好的链接。

回答by Ronnie Overby

Awesomiummakes it easy to use HTML UI in your C++ or .NET app

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

Update

更新

My previous answer is now outdated. These days you would be crazy not to look into using Electronfor this. Many popular desktop apps have been developed on top of it.

我以前的答案现在已经过时了。这些天你不考虑使用Electron来做这件事会很疯狂。许多流行的桌面应用程序都是在它的基础上开发的。

回答by u445908

NOTE: AppJSis deprecated and not recommended anymore.

注意：AppJS已弃用，不再推荐。

Take a look at NW.jsinstead.

看看NW.js 吧。

回答by mydoghasworms

It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.

HTML/JS/CSS 桌面应用程序的解决方案似乎供不应求。

One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.

我刚刚遇到的一个解决方案是 TideSDK：http://www.tidesdk.org/ ，看起来很有希望，查看文档。

You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.

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

回答by o.v.

Sorry to burst your bubble but Spotify desktop clientis just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.

对不起，爆你的泡沫，但Spotify的桌面客户端是只是一个基于Webkit的浏览器。当然，它公开了特定的附加功能，但它只能运行 JS 和渲染 HTML/CSS，因为它有一个 JS 引擎以及一个 Chromium 渲染引擎。这对您编写客户端 Web 应用程序和部署到多个平台没有帮助。

What you're looking for is similar to Sencha Touch- a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.

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

I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA;)

我没有使用appcelerator 的经验，它似乎正是这样做的 - 并在网上获得了非常有利的评论。你应该试一试（除非你想回到 1999 年并使用MS HTA滚动；）

回答by sachleen

I know for there's Fluidand Prism(there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.

我知道有Fluid和Prism（还有其他的，那是我曾经使用过的），可以让您将网站加载到看起来像是独立应用程序中。

In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:

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

Google Chrome Frame is a plug-in designed for Internet Explorer based on the open-source Chromium project; it brings Google Chrome's open web technologies to Internet Explorer.

Google Chrome Frame 是基于开源 Chromium 项目为 Internet Explorer 设计的插件；它将 Google Chrome 的开放网络技术引入 Internet Explorer。

You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storageto store data while the app is offline. I think you might even be able to work with SQLite.

您需要为您的网络应用程序提供某种类似的包装器，然后剩下的就是您习惯的网络技术。您可以在应用离线时使用 HTML5本地存储来存储数据。我认为您甚至可以使用 SQLite。

I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.

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

回答by Clintm

You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html

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

回答by harsha

CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.

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

If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.

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