electron跳坑指南 2(主進程和渲染進程)

時間 2019-12-05

標籤 electron 指南進程渲染简体版

原文原文鏈接

主進程和渲染器進程：

ackage.json 的 main 腳本的進程爲 主進程
在主進程中運行的腳本經過建立 web 頁面來展現用戶界面
一個 Electron 應用老是有且只有一個主進程。html

因爲 electron 使用了 Chromium（谷歌瀏覽器）來展現 web 頁面，因此 Chromium 的多進程架構也被使用到
每一個 electron 中的 web 頁面 運行在它本身的渲染進程中
主進程使用 BrowserWindow 實例建立頁面
每一個 BrowserWindow 實例都在本身的渲染進程裏運行頁面
當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。node

`electron` 渲染進程中經過 `nodejs` 讀取本地文件:

在普通的瀏覽器中，不容許去接觸原生的資源。
而 electron 的用戶在 node.js 的 API 支持下能夠在頁面中和操做系統進行一些底層交互。
nodejs 在主進程和渲染進程中均可以使用。渲染進程由於安全限制，不能直接操做原生 GUI。
雖然如此，由於集成了 nodejs，渲染進程也有了操做系統底層 API 的能力
Nodejs中經常使用的 path fs Crypto 等模塊在 electron 能夠直接使用，方便咱們處理連接、路徑、文件 MD5 等，同時 npm 還有成千上萬的模塊供咱們選擇web

index.html 文件內容:npm

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"></div>
<button type="button" id="btn">獲取文件內容</button>

<script src="./renderer.js"></script>
</body>
</html>

renderer.js 文件內容:json

var fs = require("fs");

// 獲取按鈕和容器的DOM節點
var content = document.getElementById('content'),button = document.getElementById('btn');

/**
 * 註冊按鈕點擊事件
 * 當按鈕點擊的時候讀取當前目錄下的 1.text
 * 以後將裏面的內容放到content 之中
 */
button.addEventListener('click', (e) => {
    fs.readFile('1.text', 'utf8', function (err, data) {
        content.innerText = data;
    });
});