Electron指南 - 快速入門

時間 2019-12-06

標籤 electron 指南快速入門简体版

原文原文鏈接

快速入門

Electron提供了豐富的本地（操做系統）的API，使你可以使用純JavaScript來建立桌面應用程序。與其它各類的Node.js運行時不一樣的是Electron專一於桌面應用程序而不是Web服務器。javascript

這並不意味着Electron是一個綁定圖形用戶界面（GUI）的JavaScript庫。取而代之的是，Electron使用Web頁面做爲它的圖形界面，因此你也能夠將它看做是一個由JavaScript控制的迷你的Chrominum瀏覽器。html

主進程

在Electron裏，運行package.json裏的main腳本的進程被稱爲 主進程 ，運行在主進程裏的腳本可以經過建立Web頁面來顯示GUI。java

渲染進程

由於Electron使用Chrominum來顯示Web頁面，因此Chrominum的多進程架構也一樣被使用。每一個頁面在Electron裏是運行在本身的進程裏，這些進程被稱爲 渲染進程 。
在瀏覽器裏，Web頁面一般運行在一個沙盒環境裏，它不能訪問本地的資源。但在Electron裏，在Web頁面中經過使用Node.js API能夠進行底層的操做系統交互。node

主進程與渲染進程的不一樣

主進程經過構造 BrowserWindow 實例來建立Web頁面。每一個 BrowserWindow 實例在本身的渲染進程裏運行Web頁面。當一個 BrowserWindow 被銷燬後，相應的渲染進程也一樣被終止。git

主進程管理全部的Web頁面以及相關的渲染進程。每一個渲染進程都是互相隔離的，而且只知道運行在該進程裏的Web頁面。github

在Web頁面裏，調用本地GUI是不容許的，由於在Web頁面裏管理本地GUI資源是很是危險的並且很是容易致使資源泄露。若是你想在Web頁面進行GUI操做，該Web頁面的渲染進程必須經過和主進程通訊來請求主進程處理這些操做。web

在Electron裏，主進程和渲染進程有不少通訊的方法。好比 ipcRanderer 和 ipcMain 模塊是用來發送消息的，remote 模塊支持RPC風格的通訊。能夠參考FAQ裏的如何在不一樣的Web頁面裏共享數據chrome

編寫第一個Electron應用

一般，一個Electron應用的結構相似下面：npm

your-app/
├── package.json
├── main.js
└── index.html

package.json 的格式與Node的模塊格式是一致的，其中 main 字段指定的腳本就是你應用的啓動腳本，該腳本將運行在主進程中。你的 package.json 也許看上去像下面這個例子：json

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意若是在package.json 中的 main 字段沒有指定，那麼Electron將嘗試裝載一個名爲 index.js 的腳本。

main.js 應當建立窗口而且處理系統事件，一個典型的例子以下：

const electron = require('electron');
// 控制應用生命週期的模塊
const {app} = electron;
// 建立本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;

// 指向窗口對象的一個全局引用，若是沒有這個引用，那麼當該javascript對象被垃圾回收的
// 時候該窗口將會自動關閉
let win;

function createWindow() {
  // 建立一個新的瀏覽器窗口
  win = new BrowserWindow({width: 800, height: 600});

  // 而且裝載應用的index.html頁面
  win.loadURL(`file://${__dirname}/index.html`);

  // 打開開發工具頁面
  win.webContents.openDevTools();

  // 當窗口關閉時調用的方法
  win.on('closed', () => {
    // 解除窗口對象的引用，一般而言若是應用支持多個窗口的話，你會在一個數組裏
    // 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。
    win = null;
  });
}

// 當Electron完成初始化而且已經建立了瀏覽器窗口，則該方法將會被調用。
// 有些API只能在該事件發生後才能被使用。
app.on('ready', createWindow);

// 當全部的窗口被關閉後退出應用
app.on('window-all-closed', () => {
  // 對於OS X系統，應用和相應的菜單欄會一直激活直到用戶經過Cmd + Q顯式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 對於OS X系統，當dock圖標被點擊後會從新建立一個app窗口，而且不會有其餘
  // 窗口打開
  if (win === null) {
    createWindow();
  }
});

// 在這個文件後面你能夠直接包含你應用特定的由主進程運行的代碼。
// 也能夠把這些代碼放在另外一個文件中而後在這裏導入。

最後 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-prebuilt

electron-prebuilt 是一個 npm 的模塊，它包含了一個預編譯的Electron版本。

若是你已經經過 npm 將該模塊全局安裝了，那麼你只須要在你應用的源代碼目錄西下運行下面的命令：

electron .

若是你只是在本地安裝了該模塊，那麼運行：

./node_modules/.bin/electron .

手動下載Electron二進制包

若是手動下載了Electron二進制包，你能夠經過執行其中包含的二進制文件來直接執行你的應用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

這裏的 Electron.app 是Electron發佈包的一部分，你能夠在這裏下載。

運行發佈

在完成應用開發以後，你能夠按照應用發佈指導建立一個發佈，而後執行打包的應用。

嘗試例子

經過使用 atom/electron-quick-start 來克隆而且運行教程的代碼。

注意運行該例子須要在你的系統中安裝Git以及Node.js（它也包含了npm)。

# 克隆倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進入克隆的倉庫
$ cd electron-quick-start
# 安裝依賴而後運行應用
$ npm install && npm start

翻譯自這裏

1. Electron 快速入門
2. Electron快速入門
3. WeeChat 快速入門指南
4. C#快速入門指南
5. Markdown 快速入門指南
6. MariaDB快速入門指南
7. GForms 快速入門指南
8. Fuego快速入門指南
9. ExtJS快速入門指南
10. Idea快速入門指南
更多相關文章...
• JavaScript 指南 - 網站建設指南
• SQL 指南 - 網站建設指南
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。