码云 03. 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 . 命令，跳出我们的界面，点击按钮，就可以看到象牙山三巨头进入了界面中。
以上关于03. Electron的主进程和渲染进程 编写邀请象牙山三巨头程序的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 03. Electron的主进程和渲染进程 编写邀请象牙山三巨头程序
