Electron初步【01】--主進程VS渲染進程&不同頁面間共享數據

Ajian 發布于2019-08-19 18:18 / 3786人閱讀

摘要：主進程渲染進程主進程在中，跑里的主腳本的進程叫作主進程。主進程負責掌管所有的頁面和它們相應的渲染進程。不同頁面間共享數據非常簡單，使用就能完成。

Electron使用了網頁頁面作為App的GUI，因此你可以將它看做是一個由JavaScript控制的一個小型的Chrome內核瀏覽器。

主進程VS渲染進程 主進程

在Electron中，跑package.json里的主腳本的進程叫作主進程。在主進程里跑的腳本可以通過創建web頁面的窗口來扮演GUI角色。

主進程看起來就是一段腳本：

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var window = null;

app.on("ready", function() {
  window = new BrowserWindow({width: 800, height: 600});
  window.loadURL("https://github.com");
});

渲染進程

正因為Electron使用了chrome內核，才使得它多進程的結構也可以被我們使用。在Electron里的每個頁面都有它自己的進程，叫作渲染進程。

在普通的瀏覽器里，網頁頁面跑在一個沙盒環境下，不能接觸到native源碼。而Electron則允許你在頁面中使用Node.js的API，較低程度上的和操作系統進行交互。

渲染進程如同傳統的HTML，但它可以直接使用Node模塊：

主進程和渲染進程的不同

主進程通過實例化BrowserWindow，每個BrowserWindow實例都在它自己的渲染進程內返回一個web頁面。當BrowserWindow實例銷毀時，相應的渲染進程也會終止。

主進程負責掌管所有的web頁面和它們相應的渲染進程。每個渲染進程都是相互獨立的，它們只關心自己所運行的web頁面。

在頁面（渲染進程）中不允許調用原生GUI相關的API，那是因為在網頁（渲染進程）中中掌管原生GUI很危險，易造成內存泄露。如果你想在網頁中進行GUI的操作，渲染進程必須向主進程傳達請求，然后在主進程中完成操作。

在Electron中，我們有幾種連接主進程和渲染進程的方法，例如用于傳送消息的ipcRenderer和ipcMain模塊，以及用于RPC的remote模塊。

不同頁面間共享數據

非常簡單，使用HTML5 API就能完成。

Storage API，IndexedDB都是很好的選擇。

你還可以使用Electron中提供的IPC系統。它在主進程中將一個對象儲存為全局變量，然后可以通過remote模塊操作它們：

// 在主進程里
global.sharedObject = {
  someProperty: "default value"
};

// In page 1.
require("remote").getGlobal("sharedObject").someProperty = "new value";

// In page 2.
console.log(require("remote").getGlobal("sharedObject").someProperty);

GPU云服務器云服務器 linux 進程間共享數據進程間共享數據 linux linux 進程間數據 linux進程間數據交換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79438.html

【Electron】酷家樂客戶端開發實踐分享 — 進程通信

摘要：為了能使不同的進程互相訪問資源并進行協調工作，才有了進程間通信。此時，就需要與渲染進程通信了。發消息，渲染進程收消息內部使用來發消息。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...

aervon 2019-08-02 15:18 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 進程通信

摘要：為了能使不同的進程互相訪問資源并進行協調工作，才有了進程間通信。此時，就需要與渲染進程通信了。發消息，渲染進程收消息內部使用來發消息。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...

Wuv1Up 2019-08-23 18:06 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 進程通信

摘要：為了能使不同的進程互相訪問資源并進行協調工作，才有了進程間通信。此時，就需要與渲染進程通信了。發消息，渲染進程收消息內部使用來發消息。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...

winterdawn 2019-08-30 11:10 評論0 收藏0
XCel 項目總結 - Electron 與 Vue 的性能優化

摘要：而這里的單元格信息是唯一的，所以直接通過為一個空對象賦值即可。和相關的知識和技巧高亮的列單元格采用展示。在中，被選中的單元格會高亮相應的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個 Excel 數據清洗工具，其通過可視化的方式讓用戶輕松地對 Excel 數據進行篩選。 XCEL...

XUI 2019-08-22 10:45 評論0 收藏0
一口氣完成electron的入門學習

摘要：目前類似的工具有，等。在渲染進程中，直接調用原生的接口是十分危險的。這里介紹一種，通過和對象，以消息的方式進行通信。主進程獲得消息后，通過返回信息。另外，還提供了一種同步的消息傳遞方式。打包完成功能代碼后，我們需要將代碼打成可運行的包。介紹目前，使用前端技術開發桌面應用已經越來越成熟，這使得前端同學也可以參與桌面應用的開發。目前類似的工具有electron，NW.js等。這里我們著...

Ethan815 2019-08-22 11:01 評論0 收藏0