Electron應用結構

在我們深入瞭解Electron的API之前,我們需要探討一下在Electron中可能遇到的兩種進程類型。 它們是完全不同的,因此理解它們非常重要。

EN

主進程和渲染器進程

Electron 運行 package.json 的 main 腳本的進程被稱爲主進程。 在主進程中運行的腳本通過創建web頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。

由於 Electron 使用了 Chromium 來展示 web 頁面,所以 Chromium 的多進程架構也被使用到。 每個 Electron 中的 web 頁面運行在它自己的渲染進程中。

在普通的瀏覽器中,web頁面通常在一個沙盒環境中運行,不被允許去接觸原生的資源。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。

EN

主進程和渲染進程之間的區別

主進程使用 BrowserWindow 實例創建頁面。 每個 BrowserWindow 實例都在自己的渲染進程裏運行頁面。 當一個 BrowserWindow 實例被銷燬後,相應的渲染進程也會被終止。

主進程管理所有的web頁面和它們對應的渲染進程。 每個渲染進程都是獨立的,它只關心它所運行的 web 頁面。

在頁面中調用與 GUI 相關的原生 API 是不被允許的,因爲在 web 頁面裏操作原生的 GUI 資源是非常危險的,而且容易造成資源泄露。 如果你想在 web 頁面裏使用 GUI 操作,其對應的渲染進程必須與主進程進行通訊,請求主進程進行相關的 GUI 操作。

題外話:進程間通訊

在 Electron 中, 我們有幾種方法可以在主進程和渲染進程之間進行通信。 例如使用ipcRendereripcMain模塊發送消息,或使用remote模塊進行 RPC 方式的通信。 這裏也有一個常見問題解答:web頁面間如何共享數據

EN

使用Electron的API

Electron在主進程和渲染進程中提供了大量API去幫助開發桌面應用程序, 在主進程和渲染進程中,你可以通過require的方式將其包含在模塊中以此,獲取Electron的API

const electron = require('electron')Copy

所有Electron的API都被指派給一種進程類型。 許多API只能被用於主進程中,有些API又只能被用於渲染進程,又有一些主進程和渲染進程中都可以使用。 The documentation for each individual API will state which process it can be used from.

Electron中的窗口是使用BrowserWindow類型創建的一個實例, 它只能在主進程中使用。

// 這樣寫在主進程會有用,但是在渲染進程中會提示'未定義'
  const { BrowserWindow } = require('electron')
  
  const win = new BrowserWindow()Copy

因爲進程之間的通信是被允許的, 所以渲染進程可以調用主進程來執行任務。 Electron通過remote模塊暴露一些通常只能在主進程中獲取到的API。 爲了在渲染進程中創建一個BrowserWindow的實例,我們通常使用remote模塊爲中間件:

//這樣寫在渲染進程中時行得通的,但是在主進程中是'未定義'
  const { remote } = require('electron')
  const { BrowserWindow } = remote
  
  const win = new BrowserWindow()Copy
EN

使用 Node.js 的 API

Electron同時在主進程和渲染進程中對Node.js 暴露了所有的接口。 這裏有兩個重要的定義:

1)所有在Node.js可以使用的API,在Electron中同樣可以使用。 在Electron中調用如下代碼是有用的:

const fs = require('fs')
  
  const root = fs.readdirSync('/')
  
  // 這會打印出磁盤根級別的所有文件
  // 同時包含'/'和'C:\'。
  console.log(root)Copy

正如您可能已經猜到的那樣,如果您嘗試加載遠程內容, 這會帶來重要的安全隱患。 您可以在我們的 安全文檔中找到更多有關加載遠程內容的信息和指南。

2)你可以在你的應用程序中使用Node.js的模塊。 選擇您最喜歡的 npm 模塊。 npm 提供了目前世界上最大的開源代碼庫,那裏包含良好的維護、經過測試的代碼,提供給服務器應用程序的特色功能也提供給Electron。

例如,在你的應用程序中要使用官方的AWS SDK,你需要首先安裝它的依賴:

npm install --save aws-sdkCopy

Then, in your Electron app, require and use the module as if you were building a Node.js application:

// 準備好被使用的S3 client模塊
  const S3 = require('aws-sdk/clients/s3')Copy

有一個非常重要的提示: 原生Node.js模塊 (即指,需要編譯源碼過後才能被使用的模塊) 需要在編譯後才能和Electron一起使用。

絕大多數的Node.js模塊都是原生的, 只有大概400~650個模塊是原生的。 然而,如果你面要本地模塊,請諮詢:  this guide on how to recompile them for Electron.


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章