Electron:进程

усилの博客 2022/9/24 Electron

# Electron 运行流程

在这里插入图片描述

# 主进程和渲染进程

package.json中定义的入口被称为主进程。
在主进程中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程。

// main.js 主进程
const createWindow = () => {
    
    // 渲染进程一
    const mainWindow = new BrowserWindow({
        width: 600,
        height: 400
    });
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    
    // 渲染进程二
    const secondWindow = new BrowserWindow({
        width: 300,
        height: 200,
        // 在 mainWindow 的进程中创建 secondWindow 进程
        parent:mainWindow,
    })
    secondWindow.loadFile(path.join(__dirname, "second.html"));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 在主进程中使用Node第三方模块

// main.js
const path = require("path");
const fs = require("fs");

// 主进程中使用nodejs
fs.readFile("package.json",(err,data)=>{
    if(err){
        console(err);
        return;
    }
    console.log(data.toString())
})

1
2
3
4
5
6
7
8
9
10
11
12

# 在渲染进程中使用 Node 第三方模块

方式一：在 main.js使用

// main.js
const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        webPreferences:{
            preload:path.join(__dirname, "renderer/preload.js")
        }
    });
    mainWindow.loadFile(path.join(__dirname, "index.html"));

1
2
3
4
5
6
7
8
9
10

// preload.js
const fs = require("fs");

 //渲染进程中使用nodejs的第一种方法
 fs.readFile("package.json",(err,data)=>{
    if(err){
        console(err);
        return;
    }
    console.log(data.toString())
})

1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

方式二：在index.html中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="renderer/renderer.js"></script>
    
</head>
<body></body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

// renderer.js
fs.readFile("package.json",(err,data)=>{
    if(err){
        console(err);
        return;
    }
    console.log(data.toString())
})

1
2
3
4
5
6
7
8

// main.js
const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        webPreferences:{
            nodeIntegration: true,  //允许渲染进程使用nodejs
            contextIsolation:false  //允许渲染进程使用nodejs
        }
    });

1
2
3
4
5
6
7
8
9
10