轉自 http://electron.atom.io/docs/tutorial/quick-start/
Electron允許你使用JavaScript及豐富的系統級API建立傳統型應用程式。你可以把Electron看做一個Node.js運行時的變體，專註於傳統型應用程式，而Node.js專註於Web伺服器。
Electron並不是一個用JavaScript寫的GUI庫，而是Electron使用網頁作為GUI，實際上Electron是一個小型的Google瀏覽器，使用JavaScript控製程序邏輯。 主進程（Main Process）
在Electron中，運行package.json檔案中main指令碼的進程被稱為主進程（main process）。 運行在主進程中的指令碼可以通過建立網頁視窗顯示GUI。 渲染進程（Renderer Process）
因為Electron使用Google瀏覽器核心（Chromium）顯示網頁，所以Electron也繼承了Chromium的多進程架構。Electron中的每個網頁運行在獨立的進程中，被稱為渲染進程（renderer process）。
在普通的瀏覽器中，網頁通常運行在一個沙箱環境中，不允許訪問本地資源。然而，在Electron中，可以使用Node.js提供的系統級API與作業系統互動。 主進程與渲染進程的區別
主進程通過建立BrowserWindow執行個體來建立網頁。每個BrowserWindow執行個體在第一個獨立的渲染進程中運行網頁。當BrowserWindow執行個體被銷毀時，對應的渲染進程也被終結。
主進程管理著所有的網頁和它們對應的渲染進程。每個渲染進程是相互獨立的，並且僅僅關心與之對應的網頁。
在網頁中，調用GUI相關的API是不被允許的，因為在網頁中管理GUI資源是不安全的並且容易導致資源泄漏。如果在網頁中想執行GUI相關的操作，網頁所在的渲染進程必須與主進程通訊，請求主進程執行相關操作。
在Electron中，有幾種方法在主進程和渲染進程中通訊。ipcRenderer和ipcMain用於發送訊息，remote模組用於RPC通訊。另外在FAQ中有一項是討論如何在網頁之間共用資料的。 編寫第一個Electron應用程式
通常一個Electron應用程式結構如下：
your-app/├── package.json├── main.js└── index.html
package.json檔案內容的格式和Node.js中的模組是相同的。 “main”屬性指定的是應用程式的啟動指令碼，將作為主進程運行。一個package.json的例子如下：
{ "name" : "your-app", "version" : "0.1.0", "main" : "main.js"}
注意：如果“main”屬性沒有指定，Electron將預設負載檔案名為index.js的指令檔。
main.js應該建立視窗並且處理系統事件，一個典型的例子為：
const {app, BrowserWindow} = require('electron')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(`file://${__dirname}/index.html`) // Open the DevTools. win.webContents.openDevTools() // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null })}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q 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 (win === null) { createWindow() }})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
最後，index.html是需要顯示的網頁內容：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body></html>運行應用程式
一旦建立了main.js，index.html，package.json檔案，需要運行程式並測試一下程式是否是預期的效果。 electron
electron是一個npm模組，包含了先行編譯的Electron。
使用npm安裝electron模組並執行以下命令： macOS / Linux
$ ./node_modules/.bin/electron .Windows
$ .\node_modules\.bin\electron .手動下載的Electron
如果是手動下載的Electron，則： Windows
$ .\electron\electron.exe your-app\Linux
$ ./electron/electron your-app/macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron可以在這裡下載https://github.com/electron/electron/releases 發布應用程式
http://electron.atom.io/docs/tutorial/application-distribution/ 例子
# Clone the repository$ git clone https://github.com/electron/electron-quick-start# Go into the repository$ cd electron-quick-start# Install dependencies and run the app$ npm install && npm start
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
