Electron學習入門

一、安裝electron，不建議全局安裝，這樣每一個app可使用不一樣的electron版本了

二、配置package.json中的script下的start屬性的值爲electron .

Electron應用結構

主進程

Package.json的main腳本的進程稱爲主進程。主進程中的腳本經過建立web頁面來展現用戶界面，一個應用有且只有一個主進程

渲染進程

因爲 Electron 使用了 Chromium 來展現 web 頁面，因此 Chromium 的多進程架構也被使用到。 每一個 Electron 中的 web 頁面運行在它本身的渲染進程中。 Electron 的用戶在 Node.js 的 API 支持下能夠在頁面中和操做系統進行一些底層交互。

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

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

 

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

 

在頁面中調用與 GUI 相關的原生 API 是不被容許的，由於在 web 頁面裏操做原生的 GUI 資源是很是危險的，並且容易形成資源泄露。 若是你想在 web 頁面裏使用 GUI 操做，其對應的渲染進程必須與主進程進行通信，請求主進程進行相關的 GUI 操做。

使用Electron的API

許多API只能被用於主進程中，有些API又只能被用於渲染進程，又有一些主進程和渲染進程中均可以使用

經過require的方式將其包含在模塊中以此，獲取Electron的API

由於進程之間的通訊是被容許的, 因此渲染進程能夠調用主進程來執行任務。 Electron經過remote模塊暴露一些一般只能在主進程中獲取到的API。 爲了在渲染進程中建立一個BrowserWindow的實例，咱們一般使用remote模塊爲中間件

使用 Node.js 的 API

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

 

1) 全部在Node.js可使用的API，在Electron中一樣可使用。 在Electron中調用以下代碼是有用的

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

調試應用

1、渲染進程

最普遍使用來調試指定渲染進程的工具是Chromium的開發者工具集。 它能夠獲取到全部的渲染進程，包括BrowserWindow的實例，BrowserView以及WebView。 您能夠經過編程的方式在BrowserWindow的webContents中調用openDevTool()API來打開它們：

const { BrowserWindow } = require('electron')

let win = new BrowserWindow()

win.webContents.openDevTools()Copy

2、主進程

調試主進程有點棘手, 由於您不能簡單地打開開發者工具來調試它們。 多虧了谷歌和Node.js的緊密合做，Chromium開發者工具能夠被用來調試Electron的主進程，不然你也許會遇到許多怪事就像require不能再控制檯中顯示。

打包

安裝打包工具npm install electron-packager -g

配置打包命令

"scripts": {

    "start": "electron .",

    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"

  }

打包的時候能夠規定目標文件的名稱