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

主进程和渲染器进程:


ackage.jsonmain 脚本的进程为 主进程
在主进程中运行的脚本通过创建 web 页面来展示用户界面
一个 Electron 应用总是有且只有一个主进程。

由于 electron 使用了 Chromium(谷歌浏览器)来展示 web 页面,所以 Chromium 的多进程架构也被使用到
每个 electron 中的 web 页面 运行在它自己的渲染进程中
主进程使用 BrowserWindow实例创建页面
每个 BrowserWindow 实例都在自己的渲染进程里运行页面
当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。


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

在普通的浏览器中,不允许去接触原生的资源。
electron 的用户在 node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。
nodejs 在主进程和渲染进程中都可以使用。渲染进程因为安全限制,不能直接操作原生 GUI
虽然如此,因为集成了 nodejs,渲染进程也有了操作系统底层 API 的能力
Nodejs中常用的 path fs Crypto 等模块在 electron 可以直接使用,方便我们处理链接、路径、文件 MD5 等,同时 npm 还有成千上万的模块供我们选择


index.html 文件内容:

<!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 文件内容:

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

对代码不满足,是任何真正有天才的程序员的根本特征,做一个有魅力的程序员- 学无止境

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!