Electron学习笔记（一）

阿莫、2024-05-16 13:30

文章目录

相关笔记

笔记说明

文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍，针对原理部分并无相关记录。笔记记录于 2023年9月。

一、轻松入门

1、搭建开发环境

安装 yarn ：

npm i -g yarn

创建一个文件夹，进行项目的初始化：

yarn init -y

配置 Electron 的镜像网站：

yarn config set electron_mirror https://registry.npmmirror.com/-/binary/electron/

使用 yarn 安装 Electron：

yarn add electron --dev

2、创建窗口界面

创建一个 index.html 文件，内容如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

新建一个 index.js 文件，内容如下：

javascript 复制代码 
const {app,BrowserWindow} = require('electron');

let win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true
        }
    });
    // 访问资源文件
    win.loadFile('index.html');

    // 程序启动后开启 开发者工具
    // win.webContents.openDevTools();
    
    win.on('close',function() {
        win = null;
    })
});

app.on('window-all-closed',function() {
    app.quit();
})

更新 package.json 文件：

json 复制代码 
"scripts": {
"start": "electron ./index.js"
},

启动项目：

yarn start

结果展示：

3、调试主进程

点击调试按钮，创建 launch.json 文件 -> 选择Node.js环境

修改 launch.json 文件如下：

json 复制代码 
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "调试主进程",
            // type: 调试环境为 Node.js 环境
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            // runtimeExecutable: 指向的是批处理文件，该批处理文件用于启动 Electron
            // ${workspaceRoot} 是正在进行调试的程序的工作目录的绝对路径
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            // 此处的参数是主进程程序路径的简写形式，填写 "./index.js" 亦可
            "args": ["."],
            "outputCapture": "std"
        }
    ]
}

快捷键：

Ctrl+Shift+I：打开渲染进程的调试窗口

Ctrl+R：代码修改后，刷新界面

二、主进程和渲染进程

1、进程互访

注：原书籍中的代码由于 Electron 版本的更新，remote 模块无法直接导入使用，需要进行下载：

下载 remote 模块：

yarn add @electron/remote

更新 index.js 文件如下：（主进程代码）

javascript 复制代码 
const {app,BrowserWindow} = require('electron');

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    require("@electron/remote/main").initialize();
    require("@electron/remote/main").enable(win.webContents);

    // 访问资源文件
    win.loadFile('index.html');

    // 程序启动后开启 开发者工具
    // win.webContents.openDevTools();

    win.on('close',function() {
        win = null;
    })
});

app.on('window-all-closed',function() {
    app.quit();
})

参考链接：https://blog.csdn.net/m0_45961428/article/details/122982510

在 index.html 添加以下代码：

html 复制代码 
<button id="openDevToolsBtn">打开开发者工具</button>
<script>
    const remote =require('@electron/remote');
    document.querySelector('#openDevToolsBtn').addEventListener('click',function() {
        remote.getCurrentWindow().webContents.openDevTools();
    })
</script>

运行程序：

yarn start

运行结果：（点击按钮可打开开发者工具）

2、渲染进程访问主进程类型

主进程代码：主进程代码

更新 index.html 文件如下：

html 复制代码 
<button id="makeNewWindow">创建新窗口</button>
<script>
    const remote = require('@electron/remote');

    // 在渲染进程中创建一个新的窗口
    document.querySelector('#makeNewWindow').addEventListener('click',function() {
        win = new remote.BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
            }
        });
        win.loadFile('newWin.html');
    });
</script>

说明：创建 BrowserWindow 的过程依然在主进程中进行，是由 remote 模块通知主进程完成相应的操作的，主进程创建了 BrowserWindow 对象的实例后，把对象的实例以远程对象的形式返回给渲染进程。

3、渲染进程访问主进程自定义内容

主进程代码：主进程代码

新建文件 mainModel.js：

javascript 复制代码 
let {BrowserWindow} = require('electron');

exports.makeWin = function() {
    let win = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
        }
    });
    return win;
}

更新 index.html 文件如下：

html 复制代码 
<button id="makeNewWindow2">创建新窗口2</button>
<script>
    const remote = require('@electron/remote');
    const mainModel = remote.require('./mainModel');

    let win2 = null;
    document.querySelector('#makeNewWindow2').addEventListener('click',function() {
        win2 = mainModel.makeWin();
        win2.loadFile('newWin.html');
    });
</script>

4、渲染进程向主进程发送消息

更新 index.html 文件：

html 复制代码 
<button id="sendMsg">向主进程发送消息</button>
<script>
    const {ipcRenderer} = require('electron');

    document.querySelector('#makeNewWindow2').addEventListener('click',() => {
        // msg：消息管道的名称
        ipcRenderer.send('msg',{name: 'xiaom'},{name: 'xiaoh'});
    });
</script>

index.js 文件添加以下内容：（其余主进程代码见：主进程代码）

javascript 复制代码 
const {ipcMain} = require('electron');

ipcMain.on('msg',(event,param1,param2) => {
    console.log(param1);
    console.log(param2);
    console.log(event.sender);
})

运行结果：

5、主进程向渲染进程发送消息

在主进程 index.js 文件中添加以下代码：

javascript 复制代码 
const {app,BrowserWindow} = require('electron');
const {ipcMain} = require('electron');

let win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    // 监听渲染进程发来的消息，随后再次发回给渲染进程
    ipcMain.on('msg',(event,param1,param2) => {
        win.webContents.send('msg_main',param1,param2);
    })

    // 访问资源文件
    win.loadFile('index.html');

    win.on('close',function() {
        win = null;
    })
});

更新渲染进程 index.html 文件如下：

html 复制代码 
<button id="sendMsg">向主进程发送消息</button>
<script>
    const {ipcRenderer} = require('electron');

    // 接收 主进程发送的消息
    ipcRenderer.on('msg_main',(event,param1,param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    })

    document.querySelector('#sendMsg').addEventListener('click',() => {
        ipcRenderer.send('msg',{name: 'xiaom'},{name: 'xiaoh'});
    });
</script>

运行程序后 -> 点击按钮(向主进程发送消息) -> Electron 程序控制台将会打印主进程发送来的消息。

运行结果：

6、多个窗口的渲染进程接收主进程发送的消息

更新主进程 index.js 文件：

javascript 复制代码 
const {app,BrowserWindow} = require('electron');
const {ipcMain} = require('electron');

// 接收 渲染进程 发送来的消息 在VSCode控制台打印消息
ipcMain.on('msg',(event,param1,param2) => {
    console.log(param1);
    console.log(param2);
    console.log(event.sender);
});

let win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    // 为了使 remote 模块能够使用需要执行以下操作
    require("@electron/remote/main").initialize();
    require("@electron/remote/main").enable(win.webContents);

    // 监听 渲染进程 发来的消息，随后再次发回给渲染进程
    ipcMain.on('msg',(event,param1,param2) => {
        // 单个窗口时使用：
        // win.webContents.send('msg_main',param1,param2);

        // 多个窗口时使用
        // 方法一：
        // event.sender.send('msg_main',param1,param2);
        // 方法二：
        event.reply('msg_main',param1,param2);
    })

    // 访问资源文件
    win.loadFile('index.html');

    win.on('close',function() {
        win = null;
    })
});

app.on('window-all-closed',function() {
    app.quit();
});

更新 index.html 文件如下：

html 复制代码 
<button id="makeNewWindow">创建新窗口</button>
<button id="sendMsg">向主进程发送消息</button>
<script>

    const remote = require('@electron/remote');
    const { ipcRenderer } = require('electron');

    // 在渲染进程中创建一个新的窗口
    document.querySelector('#makeNewWindow').addEventListener('click', function () {
        win = new remote.BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false
            }
        });
        win.loadFile('newWin.html');
    });

    // 监听主进程发送来的消息
    ipcRenderer.on('msg_main', (event, param1, param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    })

    // 点击发送按钮 发送消息至主进程
    document.querySelector('#sendMsg').addEventListener('click', () => {
        ipcRenderer.send('msg', { name: 'xiaom' }, { name: 'xiaoh' });
    });
</script>

newWin.html 文件内容如下：

html 复制代码 
<h1>newWindow</h1>
<button id="sendMsg2">向主进程发送消息</button>
<script>
    const { ipcRenderer } = require('electron');

    // 监听主进程发送来的消息
    ipcRenderer.on('msg_main', (event, param1, param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    })

    // 点击发送按钮 发送消息至主进程
    document.querySelector('#sendMsg2').addEventListener('click', () => {
        ipcRenderer.send('msg', { name: 'xiaod' }, { name: 'xiaoc' });
    });
</script>

7、渲染进程之间消息传递

一个程序有多个窗口，并要在窗口之间传递消息，可以通过主进程中转，此处通过win1先将消息发送给主进程，主进程再将消息发送给win2。

方法一：利用主进程进行中转

窗口(win1) --> 主进程(中转) --> 窗口(win2)

窗口(win2) --> 主进程(中转) --> 窗口(win1)

主进程 index.js 文件内容如下：

javascript 复制代码 
const {app,BrowserWindow} = require('electron');
const {ipcMain} = require('electron');

let win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    require("@electron/remote/main").initialize();
    require("@electron/remote/main").enable(win.webContents);

    // 监听 窗口win1 (index.html) 发来的消息
    ipcMain.on('msg_1',(event,param1,param2) => {
        // 向 窗口win1 (index.html) 发送消息
        win.webContents.send('msg_main',param1,param2);
    });

    // 访问资源文件
    win.loadFile('index.html');

    // 程序启动后开启 开发者工具
    win.webContents.openDevTools();

    win.on('close',function() {
        win = null;
    })
});

app.on('window-all-closed',function() {
    app.quit();
})

窗口(win1) index.html 文件内容如下：

html 复制代码 
<h1>win1</h1>
<button id="makeNewWindow">创建新窗口win2</button>
<button id="sendMsg">向主进程发送消息</button>
<script>

    const remote = require('@electron/remote');
    const { ipcRenderer } = require('electron');

    // 在渲染进程中创建一个新的窗口（win2）
    document.querySelector('#makeNewWindow').addEventListener('click', function () {
        win2 = new remote.BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false
            }
        });
        win2.loadFile('win2.html');
        win2.webContents.openDevTools();

        // 接收 主进程 的消息后 向 win2 发送消息
        ipcRenderer.on('msg_main', (event, param1, param2) => {
            win2.webContents.send('msg_win2',param1,param2);
        });
    });

    // 接收 主进程 发送的消息
    ipcRenderer.on('msg_main', (event, param1, param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    })

    // 点击按钮向 主进程 发送消息
    document.querySelector('#sendMsg').addEventListener('click', () => {
        ipcRenderer.send('msg_1', { name: 'xiaom' }, { name: 'xiaoh' });
    });
</script>

窗口(win2) win2.html 文件内容如下：

html 复制代码 
<h1>win2</h1>
<button id="sendMsg2">向主进程发送消息</button>
<script>
    const { ipcRenderer } = require('electron');

    // 接收 窗口 win1 (index.html) 发送来的消息
    ipcRenderer.on('msg_win2', (event, param1, param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    })

    // 点击按钮向 主进程 发送消息
    document.querySelector('#sendMsg2').addEventListener('click', () => {
        ipcRenderer.send('msg_1', { name: 'xiaod' }, { name: 'xiaoc' });
    });
</script>

结果展示：

方法二：单向传递

窗口(win1) --> 窗口(win2)

主进程 index.js 文件内容如下：（此方法无需主进程中转，所以主进程无需接收消息）

javascript 复制代码 
const {app,BrowserWindow} = require('electron');

let win = null;

app.on('ready', function() {
    win = new BrowserWindow({
        // 为页面集成Node.js环境
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    require("@electron/remote/main").initialize();
    require("@electron/remote/main").enable(win.webContents);

    // 访问资源文件
    win.loadFile('index.html');

    // 程序启动后开启 开发者工具
    win.webContents.openDevTools();

    win.on('close',function() {
        win = null;
    })
});

app.on('window-all-closed',function() {
    app.quit();
});

窗口(win1) index.html 文件内容如下：

html 复制代码 
<h1>win1</h1>
<button id="makeNewWindow">创建新窗口win2</button>
<button id="sendMsg">向窗口win2发送消息</button>
<script>

    const remote = require('@electron/remote');
    const { ipcRenderer } = require('electron');

    // 在渲染进程中创建一个新的窗口（win2）
    document.querySelector('#makeNewWindow').addEventListener('click', function () {
        win2 = new remote.BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false
            }
        });
        win2.loadFile('win2.html');
        win2.webContents.openDevTools();

        // 获取 窗口(win2) 的 webContents.id 并通过 ipcRenderer.sendTo 方法发送消息至 win2
        document.querySelector('#sendMsg').addEventListener('click', () => {
            ipcRenderer.sendTo(win2.webContents.id,'msg_win2', { name: 'xiaom' }, { name: 'xiaoh' });
        });
    });

</script>

窗口(win2) win2.html 文件内容如下：

html 复制代码 
<h1>win2</h1>
<script>
    const { ipcRenderer } = require('electron');

    // 接收 窗口(win1) 发送来的消息
    ipcRenderer.on('msg_win2', (event, param1, param2) => {
        console.log(param1);
        console.log(param2);
        console.log(event.sender);
    });
</script>

结果展示：

相关推荐
ssf-yasuo13 分钟前
SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记
论文阅读·笔记·prompt
As977_22 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
ajsbxi25 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking26 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
TeYiToKu1 小时前
笔记整理—linux驱动开发部分（9）framebuffer驱动框架
linux·c语言·arm开发·驱动开发·笔记·嵌入式硬件·arm
dsywws1 小时前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然04021 小时前
Ethernet 系列（8）-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒1 小时前
深入学习指针（5）！！！！！！！！！！！！！！！
c语言·开发语言·数据结构·学习·计算机网络·算法
cuisidong19973 小时前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
乌恩大侠3 小时前
5G周边知识笔记
笔记·5g
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play