前言
现如今，用 HTML、JavaScript、CSS、Node.js 写桌面应用早已不是什么新鲜的事了，作为一名前端，能够使用自己熟悉的语言，快速实现自己想要的桌面应用，是件很让人兴奋的事。
目前常见的有 NW、heX、Electron。今天，就来简单的上手一下 Electron。
Electron 是什么？
Electron 是一款可以利用 Web技术 开发跨平台桌面应用的框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron。
Electron 能做什么？
Electron 内置了 Chromium 内核 和 Node，因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面，用 JavaScript 调用丰富的原生 API 实现桌面应用。你也可以将 Electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。
由于内置的 Chromium 内核 和 Node, 因此我们不需要关心前端的兼容问题，你甚至可以写 -webkit- only 的代码; 也不需要关心一些需要编译的 Node 模块兼容问题，因为 Node 版本是固定的。因此，用 Electron 来编写跨平台应用程序是非常合适的。
或许你还不知道，Visual Studio Code 、wordpress 和 slack 等客户端都是基于 Electron 开发的。
下面，先快速上手一下。
快速入门
相信你看到这里都是对 Node 有一定了解的，故这里不再对 Node 的安装进行描述。
我们有如下目录结构：
|
1 2 3 4 |
electron-quick-start/ ├── package.json ├── main.js └── index.html |
package.json 跟常规 Node 程序一致，将 main.js 作为 程序的启动入口文件，基本内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name" : "electron-quick-start", "version" : "1.0.0", "main" : "main.js", "scripts" : { "start" : "electron main.js" }, "devDependencies": { "electron-prebuilt": "^1.2.0" } } |
我们用 index.html 作为我们的程序界面，简单的界面代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> |
接着是最重要的入口文件 main.js 的编写了，其内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow () { //创建一个 800x600 的浏览器窗口 mainWindow = new BrowserWindow({width: 800, height: 600}); //加载应用的界面文件 mainWindow.loadURL(`file://${__dirname}/index.html`); //打开开发者工具，方便调试 //mainWindow.webContents.openDevTools(); mainWindow.on('closed', function () { mainWindow = null; }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', function () { if (mainWindow === null) { createWindow(); } ayon-line" id="crayon-5812875a04def694571044-31"> createWindow(); } k">NW、heX、Electron。今天，就来简单的上手一下 Electron。
Electron 是什么？Electron 是一款可以利用 Web技术 开发跨平台桌面应用的框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron。 Electron 能做什么？Electron 内置了 Chromium 内核 和 Node，因此可以使用 HTML 和 CSS 来实现应用的 GUI 界面，用 JavaScript 调用丰富的原生 API 实现桌面应用。你也可以将 Electron 看作是一个由 JavaScript 控制的一个小型的 Chrome 内核浏览器。 由于内置的 Chromium 内核 和 Node, 因此我们不需要关心前端的兼容问题，你甚至可以写 或许你还不知道，Visual Studio Code 、wordpress 和 slack 等客户端都是基于 Electron 开发的。 下面，先快速上手一下。 快速入门相信你看到这里都是对 Node 有一定了解的，故这里不再对 Node 的安装进行描述。 我们有如下目录结构：
package.json 跟常规 Node 程序一致，将
我们用
接着是最重要的入口文件
|
