Electron 入門指北(二)

一銘發表於2018-05-13

Electron 入門指北(二)

理解 Electron 的主程式和渲染程式

Electron 說的簡單一點就是一個以 Chromium 為核心的web app,Electron 中用 Node.js 提供了網頁(GUI 頁面)呼叫系統級別 API 的方法. 現在就來看看 Electron 中主程式(Main Process)和渲染程式(renderer Process)也就是 GUI 頁面之間的通訊.

主程式 Main Process

主程式，通常是名為main.js 的檔案，是每個 Electron 應用的入口檔案。它控制著整個 App 的生命週期，從開啟到關閉。 它也管理著系統原生元素比如選單，選單欄，Dock 欄，托盤等。 主程式負責建立 APP 的每個渲染程式。而且整個 Node API 都整合在裡面。 每個 app 的主程式檔案都定義在 package.json 中的 main 屬性當中。這也是為什麼 electron. 能夠知道應該使用哪個檔案來啟動。 在Chromium中, 這個程式被稱為 "瀏覽器程式"。它在Electron被重新命名, 以避免與渲染器程式混淆。

渲染程式是你的應用內的一個瀏覽器視窗。與主程式不同的是，它能夠同時存在多個而且執行於不同的程式中。而且它們也能夠被隱藏。

渲染程式 renderer Process

在標準的瀏覽器內，網頁通常執行在一個沙盒環境中並且被禁止使用本地資源。 然而 Electron 的使用者在 Node.js 的 API 支援下可以在頁面中和作業系統進行一些低階別的互動。

看完這兩段官方文件,再來看看一個 electron 專案的大概結構,可以看到 main.js和index.html和package.json

Electron 入門指北(二)

那根據這三個檔案,我們來找一下一個 electron 專案是怎麼啟動起來的? 首先,在package.json中:

Electron 入門指北(二)
這裡main標記這個專案主程式的入口檔案. 再到main.js中看一下

Electron 入門指北(二)
可以看到main.js中有 app 的生命週期函式和 window 的建立函式. 到這裡就一個 Electron 工程師如何開啟的.
app: 控制整個 Electron 應用的生命週期;
BrowserWindow：建立和控制應用的視窗;
以上兩個方法都是在主程式中的方法,Node的API也是在這一層來呼叫;
渲染程式的開發跟普通的前端開發沒有什麼區別,可以使用各種前端框架來開發,比如React, Vue, Angular等等.


Electron 入門個人覺得到這裡也明白了,之後的跨平臺和打包的方案等做完這個專案再寫吧.

相關文章