electron(桌麵開發工具)是一款非常強大的跨平台桌麵開發工具，支持Web技術開發桌麵應用開發，應用非常廣泛。electron整合了Node.js、Chromium和V8，可以跨平台編寫桌麵應用，需要的朋友可以下載使用。

electron官方介紹

Electron是一個開源的跨平台開發框架，整合了Node.js、Chromium和V8，讓開發者可以使用HTML、CSS和JavaScript編寫跨平台桌麵應用，使用Electron開發的應用不僅可以在Windows、Linux以及Mac平台下運行，還擁有自動更新、崩潰報告、調試分析等功能，目前微軟、Facebook、Stack和Docker等多家公司都在使用Electron。

Electron特色

一、優點

1、它依賴於每一個Web開發者都已經熟知的Web標準，讓你可以用它編寫桌麵軟件。

2、它允許開發者專注於核心功能，它去負責軟件開發中複雜的部分

3、它為桌麵應用提供了多種核心功能，例如自動更新、崩潰報告、安裝器創建工具和一些具體的係統功能

二、缺點

沒有內置的MVC，無法完全支持Chrome平台。

electron使用教程

編寫第一個Electron應用

通常，一個Electron應用的結構類似下麵：

your-app/

├── package.json

├── main.js

└── index.html

package.json 的格式與Node的模塊格式是一致的，其中 main 字段指定的腳本就是你應用的啟動腳本，該腳本將運行在主進程中。你的 package.json 也許看上去像下麵這個例子：

{

"name": "your-app",

"version" : "0.1.0",

"main" : "main.js"

}

注意 如果在 package.json 中的 main 字段沒有指定，那麼Electron將嚐試裝載一個名為 index.js 的腳本。

main.js 應當創建窗口並且處理係統事件，一個典型的例子如下：

const electron = require('electron');

// 控製應用生命周期的模塊

const {app} = electron;

// 創建本地瀏覽器窗口的模塊

const {BrowserWindow} = electron;

// 指向窗口對象的一個全局引用，如果沒有這個引用，那麼當該javascript對象被垃圾回收的

// 時候該窗口將會自動關閉

let win;

function createWindow() {

// 創建一個新的瀏覽器窗口

win = new BrowserWindow({width: 800, height: 600});

// 並且裝載應用的index.html頁麵

win.loadURL(`file://${__dirname}/index.html`);

// 打開開發工具頁麵

win.webContents.openDevTools();

// 當窗口關閉時調用的方法

win.on('closed', () => {

// 解除窗口對象的引用，通常而言如果應用支持多個窗口的話，你會在一個數組裏

// 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。

win = null;

});

}

// 當Electron完成初始化並且已經創建了瀏覽器窗口，則該方法將會被調用。

// 有些API隻能在該事件發生後才能被使用。

app.on('ready', createWindow);

// 當所有的窗口被關閉後退出應用

app.on('window-all-closed', () => {

// 對於OS X係統，應用和相應的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出

if (process.platform !== 'darwin') {

app.quit();

}

});

app.on('activate', () => {

// 對於OS X係統，當dock圖標被點擊後會重新創建一個app窗口，並且不會有其他

// 窗口打開

if (win === null) {

createWindow();

}

});

// 在這個文件後麵你可以直接包含你應用特定的由主進程運行的代碼。

// 也可以把這些代碼放在另一個文件中然後在這裏導入。

最後 index.html 則是你想要展示在窗口中：

Hello World!

We are using node ,

Chrome ,

and Electron .

運行你的應用

一旦你建立了你的 main.js , index.html , 以及 package.json 文件，你也許會想要嚐試在本地運行應用來測試它，確保應用是按照你預期的方式工作。

electron-prebuilt

electron-prebuilt 是一個 npm 的模塊，它包含了一個預編譯的Electron版本。

如果你已經通過 npm 將該模塊全局安裝了，那麼你隻需要在你應用的源代碼目錄西下運行下麵的命令：

electron .

如果你隻是在本地安裝了該模塊，那麼運行：

./node_modules/.bin/electron .

手動下載Electron二進製包

如果手動下載了Electron二進製包，你可以通過執行其中包含的二進製文件來直接執行你的應用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

這裏的 Electron.app 是Electron發布包的一部分，你可以在 這裏 下載。

運行發布

在完成應用開發之後，你可以按照 應用發布 指導創建一個發布，然後執行打包的應用。

嚐試例子

通過使用 atom/electron-quick-start 來克隆並且運行教程的代碼。

注意 運行該例子需要在你的係統中安裝 Git 以及 Node.js （它也包含了 npm )。

# 克隆倉庫

$ git clone https://github.com/electron/electron-quick-start

# 進入克隆的倉庫

$ cd electron-quick-start

# 安裝依賴然後運行應用

$ npm install && npm start