一顶掉、 Electron 介紹
Electron ，使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用，利用 Web技術(shù)JavaScript、HTML 和 CSS 開發(fā)跨平臺(tái)（Mac呜笑，Windows和Linux系統(tǒng)）桌面應(yīng)用的開源框架夫否，最初是 Github 發(fā)布的 Atom 編輯器衍生出的 Atom Shell，后更名為 Electron叫胁。
可以將 electron 看作是一個(gè)由 JavaScript 控制的一個(gè)小型的 Chrome 內(nèi)核瀏覽器凰慈。
electron 內(nèi)置了 Chromium 內(nèi)核 和 Node，因此可以使用 HTML 和 CSS 來實(shí)現(xiàn)應(yīng)用的 GUI 界面驼鹅，用 JavaScript 調(diào)用豐富的原生 API（如打開文件窗口微谓、通知、圖標(biāo)等）输钩。
如今Github上也出現(xiàn)了很多使用Electron開發(fā)的開源項(xiàng)目豺型，給開發(fā)者學(xué)習(xí)和參考，也有很多優(yōu)秀客戶端使用Electron開發(fā)的买乃，比如：
- Atom github專門為程序員推出的一個(gè)跨平臺(tái)文本編輯器姻氨。
- Insomnia HTTP請求測試工具
- **Visual Studio Code ** Microsoft開發(fā)的針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器
- slack 企業(yè)協(xié)作軟件
官網(wǎng)也提供了很多應(yīng)用項(xiàng)目
Apps Built on Electron
二、開發(fā)環(huán)境的搭建
需要安裝以下工具：
1.node
2.electron
electron安裝
在命令行中輸入以下命令为牍，即可安裝electron
npm install -g electron-prebuilt
等待安裝完成之后哼绑，在命令行輸入electron -v能夠顯示版本號代表安裝成功。
electron-quick-start工程
執(zhí)行以下命令就可以運(yùn)行最簡單的electron工程
# 克隆這倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進(jìn)入倉庫
$ cd electron-quick-start
# 安裝依賴庫并運(yùn)行應(yīng)用
$ npm install && npm start
electron-quick-start工程的目錄結(jié)構(gòu)如下：
electron-quick-start/
|- package.json
|- main.js
|- index.html
package.json是Node.js項(xiàng)目的配置文件碉咆，index.html是桌面應(yīng)用的界面頁面抖韩，main.js是應(yīng)用的啟動(dòng)入口文件。
package.json
package.json 跟常規(guī) Node 程序一致疫铜，將 main.js 作為 程序的啟動(dòng)入口文件茂浮，基本內(nèi)容如下：
{
"name" : "electron-quick-start",
"version" : "1.0.0",
"main" : "main.js",
"scripts" : {
"start" : "electron main.js"
},
"devDependencies": {
"electron-prebuilt": "^1.2.0"
}
}
注意：如果 main 字段沒有在 package.json 聲明，Electron會(huì)優(yōu)先加載 index.js壳咕。
index.html
index.html 作為我們的程序界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow () {
//創(chuàng)建一個(gè) 800x600 的瀏覽器窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
//加載應(yīng)用的界面文件
mainWindow.loadURL(`file://${__dirname}/index.html`);
//打開開發(fā)者工具席揽，方便調(diào)試
//mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
}
});
最后運(yùn)行結(jié)果如下：
