一、環境搭建
1.1、安裝 node.js
首先Electron是依賴node.js的，如果你的機器上還沒有 Node.js 和 npm ，請安裝它們，在此不做贅述。推薦使用淘寶鏡像安裝
1.2、全局安裝 electron
請使用淘寶鏡像安裝，不然有可能安裝失敗
cnpm install electron -g
如果你的機子和我一樣是Mac的話則需要加上sudo命令,也就是需要管理員權限，輸好密碼就可以開始等他安裝了。
sudo cnpm install electron -g
全局安裝之后，就可以進入項目所在目錄，然后通過“electron .”啟動應用。
二、Hello Electron
我們現在就先寫一個hello world項目
我們先看下一個 Electron 項目的基本框架組成。
2.1、項目框架
參看官方的 demo ，一個 Electron 應用的目錄結構大體如下：
your-app/
├── package.json
├── main.js
└── index.html
- package.json
package.json 的格式和 Node 的完全一致，并且那個被 main 字段聲明的腳本文件是你的應用的啟動腳本，它運行在主進程上。你應用里的 package.json 看起來應該像：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意：如果 main 字段沒有在 package.json 聲明，Electron會優先加載 index.js。
- main.js
main.js 應該用于創建窗口和處理系統事件,Electron 的主進程將用它來啟動并創建桌面應用。
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path');
const url = require('url');
let mainWindow
// 保持一個對于 window 對象的全局引用，如果你不這樣做，
// 當 JavaScript 對象被垃圾回收， window 會被自動地關閉
function createWindow(){
// 創建瀏覽器窗口。
mainWindow = new BrowserWindow({width:800,height:600});
// 加載應用的 index.html。
mainWindow.loadURL(url.format({
pathname: path.join(__dirname,'index.html'),
protocol:'file',
slashes:true
}))
// 打開開發者工具。
mainWindow.webContents.openDevTools()
//監聽 window 的關閉，關閉時這個事件會被觸發。
mainWindow.on('closed',function(){
mainWindow = null;
})
}
// 監聽Electron的初始化，之后執行函數創建瀏覽器窗口。
app.on('ready',createWindow)
// 監聽當全部窗口關閉時退出，調用執行函數。
app.on('window-all-closed',function(){
if(process.platform!=='darwin'){
app.quit()
}
})
app 模塊：會控制應用的生命周期，可以使用app監聽各種狀態比如：ready、quit等等
BrowserWindow 模塊：為你創建窗口。
win 對象：是你應用的主窗口，被聲明成 null ，否則當 JavaScript 垃圾回收掉這個對象時，窗口會被關閉。
- index.html
這個文件就是我們的視圖層，需要展示的頁面UI。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>hello world </h1>
</body>
</html>
2.2、運行項目
使用命令行進入項目所在目錄,執行electron . 就可以彈窗我們的hello world應用
cd desktop/your-app
electron .
運行結果如下
image.png
至此，一個簡單的Electron應用就完成了。
