Electron程序開發助手Electron Fiddle是一款非常優秀的Electron程序開發編輯軟件，大家可以使用這款Electron Fiddle創建並運行小段 Electron 程序，讓我們可以輕鬆掌握Electron的入門技巧，對此感興趣的程序愛好者可以下載試試。

主要功能：

探索 Electron

嚐試使用 Electron 而不安裝任何依賴項：Fiddle 包含了您探索 Electron 平台所需的一切。它還包括了 Electron 中可用的每個 API 的示例，因此，如果您想快速查看 BrowserView 是什麼或者 desktopCapturer 是如何工作的， Fiddle 都已幫您搞定。

用類型編碼

Fiddle 包含了與 Visual Studio Code 同樣的來自微軟的傑出的 Monaco 編輯器。它還會自動為當前選定的 Electron 版本安裝類型定義，確保您隻需幾次擊鍵即可獲得所有的 Electron API 。

編譯、打包。

Fiddle 可以自動將您的實驗變成您可以與朋友、同事或祖父母分享的二進製文件。這要歸功於 electron-forge ，它允許您將您的 Fiddle 打包成一個適用於 Windows 、 macOS 或 Linux 的應用程序。

從 Fiddle 開始，在任何地方繼續。

Fiddle 不是一個 IDE - 但它是一個很好的起點。一旦您的 Fiddle 長大，利用或不利用 electron-forge 將其導出為一個項目。然後，使用您最喜歡的編輯器，走向世界！

安裝 Electron

現在，您需要安裝electron。 我們推薦的安裝方法是把它作為您 app 中的開發依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下麵的命令：

npm install --save-dev electron

除此之外，也有其他安裝 Electron 的途徑。 請谘詢安裝指南來了解如何用代理、鏡像和自定義緩存。

開發一個簡易的 Electron

Electron apps 使用JavaScript開發，其工作原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的所有API和功能，引入方法和普通Node.js模塊一樣：

const electron = require('electron')複製

electron 模塊所提供的功能都是通過命名空間暴露出來的。 比如說： electron.app負責管理Electron 應用程序的生命周期， electron.BrowserWindow類負責創建窗口。 下麵是一個簡單的main.js文件，它將在應用程序準備就緒後打開一個窗口：

const { app, BrowserWindow } = require('electron')function createWindow () {
// 創建瀏覽器窗口
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true
}
}) // 並且為你的應用加載index.html
win.loadFile('index.html')
}

app.whenReady().then(createWindow)

您應當在 main.js 中創建窗口，並處理程序中可能遇到的所有係統事件。 下麵我們將完善上述例子，添加以下功能：打開開發者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口，添加後，main. js 就像下麵這樣：

const { app, BrowserWindow } = require('electron')function createWindow () {
// 創建瀏覽器窗口
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true
}
}) // 並且為你的應用加載index.html
win.loadFile('index.html') // 打開開發者工具
win.webContents.openDevTools()
}// Electron會在初始化完成並且準備好創建瀏覽器窗口時調用這個方法// 部分 API 在 ready 事件觸發後才能使用。app.whenReady().then(createWindow)// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed', () => { if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => { // On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})// 您可以把應用程序其他的流程寫在在此文件中// 代碼 也可以拆分成幾個文件，然後用 require 導入。

最後，創建你想展示的 index.html：

Hello World!

We are using node ,
Chrome ,
and Electron .