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

時間 2019-11-08

標籤 electron 初步進程渲染不一樣頁面共享數據简体版

原文原文鏈接

Electron使用了網頁頁面做爲App的GUI，所以你能夠將它看作是一個由JavaScript控制的一個小型的Chrome內核瀏覽器。html

主進程VS渲染進程

主進程

在Electron中，跑package.json裏的主腳本的進程叫做主進程。在主進程裏跑的腳本能夠經過建立web頁面的窗口來扮演GUI角色。git

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

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裏的每一個頁面都有它本身的進程，叫做渲染進程。web

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

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

<!DOCTYPE html>
<html>
  <body>
  <script>
    const remote = require('electron').remote;
    console.log(remote.app.getVersion());
  </script>
  </body>
</html>

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

主進程經過實例化BrowserWindow，每一個BrowserWindow實例都在它本身的渲染進程內返回一個web頁面。當BrowserWindow實例銷燬時，相應的渲染進程也會終止。api

主進程負責掌管全部的web頁面和它們相應的渲染進程。每一個渲染進程都是相互獨立的，它們只關心本身所運行的web頁面。瀏覽器

在頁面（渲染進程）中不容許調用原生GUI相關的API，那是由於在網頁（渲染進程）中中掌管原生GUI很危險，易形成內存泄露。若是你想在網頁中進行GUI的操做，渲染進程必須向主進程傳達請求，而後在主進程中完成操做。app

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

不一樣頁面間共享數據

很是簡單，使用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);

相關標籤/搜索

每日一句

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