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

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

Electron的运行流程

Electron的运行流程

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

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

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

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

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

Electron的主进程和渲染进程

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

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

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

Electron的主进程和渲染进程

如果你实在不理解,也没关系,你可以简单的把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 . 命令,跳出我们的界面,点击按钮,就可以看到象牙山三巨头进入了界面中。

Electron编写邀请象牙山三巨头程序

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 03. Electron的主进程和渲染进程 编写邀请象牙山三巨头程序

发表评论

提供最优质的资源集合

立即查看 了解详情