码云 Electron教程 2021-03-23

03. Electron的主进程和渲染进程编写邀请象牙山三巨头程序

文章目录隐藏

Electron 的运行流程
Electron 的主进程和渲染进程
简单示例

在 02 节我们写了一个最简单的 Hello World 程序，这篇文章我们就用生硬的或者说专业的语言的界目讲解一下什么是 Electron 的主进程和渲染进程。在了解他们前,先来了解一下 Electron 的运行流程。

Electron 的运行流程

1. 读取 package.json 的中的入口文件，这里我们是 main.js

2. main.js 主进程中创建渲染进程

3. 读取应用页面的布局和样式

4. 使用 IPC 在主进程执行任务并获取信息

也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题.

Electron 的主进程和渲染进程

我们可以理解package.json中定义的入口文件就是主进程，那一般一个程序只有一个主进程，而我们可以利用一个主进程，打开多个子窗口.

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程。

也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程。

如果你实在不理解，也没关系，你可以简单的把 main.js 看成主进程，我们写的 html 部分看成渲染进程。虽然这样不太严谨，但是方便我们记忆，我们目的是学会使用 Electron，而不是成为 Electron 的专家。

简单示例

在我们了解主进程和渲染进程后，我们来作一个读取象牙山三巨头案例。在项目根目录下建立一个xiangcunaiqing.txt的文件，然后写入象牙山三巨头的名字。

内容如下:

1.刘能
2.赵四
3.谢广坤

有了这个文件，我们修改一下 main.js 文件，因为我们要使用 node 里的fs模块，所以在设置窗口时，增加全量使用 node.js：

var electron = require('electron'); // 引入 electron 模块

var app = electron.app; // 创建 electron 引用

var BrowserWindow = electron.BrowserWindow; // 控制窗口引用

var mainWindow = null; // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width:500,
        height:500, // 设置打开的窗口大小
        webPreferences: {
            contextIsolation: false,
            worldSafeExecuteJavaScript: false,
            webSecurity: false,
            nodeIntegration: true, // 是否集成 node.js，解决 require is not defined 问题
            nodeIntegrationInWorker: true,
            webviewTag: true, // 解决 webview 无法显示问题
            enableRemoteModule: true
        }
    }); 
    mainWindow.loadFile('index.html'); // 加载 HTML 页面
    // 监听关闭事件，把主窗口设置为 null
    mainWindow.on('closed', () => {
        mainWindow = null;
    })
})

修改完主进程，然后我们到index.html里边写一下界面。这里我们写了一个按钮，然后在按钮下方加一个<div>，这个 DIV 用来作读取过来内容的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <button id="btn">点我</button>
    <div id="mybaby"></div>
</body>
</html>

有了界面之后，我们可以在根目录下单独新建一个render文件夹，注意起这个名字意思是渲染进程中的操作。文件夹建立完成后，在文件里新建index.js文件，然后再 index.html 页面里用<script>先进行引入。

<script src="render/index.js"></script>

然后编写index.js里的代码，代码如下:

var fs = require('fs'); // 引入 fs 模块

window.onload = function () {
    var btn = this.document.querySelector('#btn');
    var mybaby = this.document.querySelector('#mybaby');
    btn.onclick = function (){
        fs.readFile('xiangcunaiqing.txt',(err,data) => { // 读取文件
            console.log('data')
            mybaby.innerHTML = data;
        })
    }
}

写完这些，就可以在中台使用electron . 命令，跳出我们的界面，点击按钮，就可以看到象牙山三巨头进入了界面中。