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;
    });
});

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

主进程和渲染器进程：

electron 渲染进程中经过 nodejs 读取本地文件:

`electron` 渲染进程中经过 `nodejs` 读取本地文件: