上次我們提到了業(yè)界大名鼎鼎的Qt桌面級應用開發(fā)框架帚称，不過Qt是基于c++進行開發(fā)的奄侠，c++的開發(fā)模式也并不是十分適用于現代這種短平快的軟件開發(fā)模式，相比之下埋涧，electron是基于nodejs和 Chromium使用javascript，html和css來開發(fā)桌面應用的框架奇瘦。
Electron的原理很簡單棘催，基本上就是使用我們常見的chrome瀏覽器的內核為基礎通過nodejs和底層操作系統(tǒng)進行操作交互。
通過快速開始了解Electron
準備
必要的準備內容不多耳标，不管你是windows巧鸭，linux還是mac只要安裝最新版本的nodejs就可以了，除此之外確保你有npm和git
然后打開命令提示符輸入
# 克隆electron快速開始的源
git clone https://github.com/electron/electron-quick-start
# 進入到electron快速開始的文件夾
cd electron-quick-start
# 安裝依賴和運行APP
npm install && npm start
安裝依賴的過程可能比較久麻捻，npm會自動安裝一些windows的編譯包。
安裝成功并且運行了會提示入下圖
實際上就是個chrome瀏覽器的殼子把html和css以及js繪制的UI顯示出來呀袱，右邊的debug工具都是和chrome里一模一樣的贸毕。
當然我們也可以關閉它。顯示的時候看起來就更加像是一個瀏覽器了夜赵。
electron目錄結構
electron的目錄結構如下明棍。
your-app/
├── package.json
├── main.js
└── index.html
package.json
package.json是我們常見的npm包管理軟件，這里主要是一些APP的應用信息寇僧，包的管理和開發(fā)用的腳本命令摊腋。在這里我們還要定義好main為main.js如果沒有定義的話會默認啟動index.js。這里和nodejs默認的情況都差不多嘁傀。
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
main.js
main.js是應用程序的主進程文件兴蒸，這個主進程文件就是用來創(chuàng)建應用程序窗口和處理系統(tǒng)事件使用的文件。它看起來大概是下面這個樣子细办。
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// 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 mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// 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.
mainWindow = 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', function () {
// On OS X 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', function () {
// On OS X 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 (mainWindow === 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
這個文件顯示主界面的信息內容橙凳。
就是圖中紅色箭頭指示的位置。
總結
electron想必qt開發(fā)起來就容易多了笑撞，因為我們可以通過html岛啸，css和javascript這樣簡單容易的語言開發(fā)跨平臺的桌面應用，因為讀取的是html文件茴肥，這還意味著我們可以更容易的在服務端實時更新數據內容坚踩。
