Electron学习笔记（一）

已于 2024-05-12 13:18:56 修改
阅读量512 收藏 6
点赞数 4
文章标签： electron 学习 笔记
于 2024-05-09 12:29:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45897239/article/details/138608520
版权

文章目录

相关笔记

笔记说明

文本为学习《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 文件，内容如下：

<!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 文件，内容如下：

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 文件：

"scripts": {
"start": "electron ./index.js"
},

启动项目：

yarn start

结果展示：

效果展示

3、调试主进程

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

调试

修改 launch.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 文件如下：（主进程代码）

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 添加以下代码：

<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 文件如下：

<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：

let {BrowserWindow} = require('electron');

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

更新 index.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 文件：

<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 文件添加以下内容：（其余主进程代码见：主进程代码）

const {ipcMain} = require('electron');

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

运行结果：

运行结果

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

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

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 文件如下：

<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 文件：

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 文件如下：

<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 文件内容如下：

<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 文件内容如下：

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 文件内容如下：

<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 文件内容如下：

<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 文件内容如下：（此方法无需主进程中转，所以主进程无需接收消息）

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 文件内容如下：

<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 文件内容如下：

<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>

结果展示：

结果展示

阿莫、
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue & element & electron MAC学习笔记
01-07
1.  首先下载 去下载nodejs 网址: http://nodejs.cn, 自行安装 查看vue版本 vue --version 2. 下载安装vue cli , 命令行安装 sudo npm install -g @vue/cli # xcode 的CLI 工具 sudo xcode-select --install # 查看vue历史版本 npm view @vue/cli --versions --json # 根据所需版本号下载 sudo npm install -g @vue/cli@版本号 # 如遇到没有权限的问题 sudo chown 你的用户名 /usr/loca
Electron学习笔记
qq_41967499的博客
09-22 839
CloudHubRTC
electron学习笔记（一）
aolihui的博客
04-03 143
文接上文： 上一回我们说到各种库的安装，按说这时候已经有不少家人已经可以很好的下载一个网页了，但是学无止境。你学了三十六天罡顶多是个天蓬元帅，现在我在教你一个筋斗云（不会吧不会吧，真的有人要学七十二地煞吧？）老实一点，这一篇学会了基本上小网站，这种化形期的小妖拦不住你了。还有一件事万一施主您的慧根卓绝，学的很nb。不要报为师的名字。 那么本次的学习内容： 正则表达式——嗯！没了！爬虫不就是正则表达式吗？ 本次灵力灌顶将会需要您半小时准备好了吗？： 学习产出： 提示：这里统计学习计划的总量 例如：
electron学习笔记一：从零实现一个electron应用
九段刀客的博客
05-04 1076
官方文档地址：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 都是跟着官方文档来的,自己实现了一遍，有些地方加了一点自己的理解 一、初始化 yarn init 二、添加.npmrc文件 解决依赖安装慢问题 ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.or.
electron（v29）学习笔记
m0_73095627的博客
03-14 136
electron（v29）学习笔记
electron学习笔记
alexis7的博客
08-04 318
electron学习笔记 electron Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，它的出现让前端工程师能够用JavaScript写出跨平台的桌面应用，它几乎是前端开发人员开发桌面客户端的唯一途径，最重要的是，我们可以利用我们学的Vue和React框架构建electron程序，因此学习electron需要我们抱有对技术的热爱。第一次接触electron是在b站的一位up主直播写代码看起来好玩于是学了，最近做在线记账系统的时候想到可以结合electron
study-electron:电子学习笔记
05-31
电子学习笔记 什么是电子？ 您可以使用 node.js (io.js) + Chromium 使用 web 技术 (html + css + javascript) 创建桌面应用程序 → 您可以使用浏览器 API 和节点 API 的组合 跨平台（mac、windows、Linux）兼容 ...
mxgraph的学习笔记
07-21
mxgraph的学习笔记,基于开源技术，非常不错哦
youdao-note-electron:有道云笔记 electron 版，支持 Windows、Linux、Mac 平台。在网页版基础上，进行界面的优化，并支持切换日夜间模式
05-23
有道云笔记 electron 版，支持 Windows、Linux、Mac 平台。在网页版基础上，进行界面的优化，并支持切换日/夜间模式。 不知从什么时候开始，我使用 Windows 有道云笔记同步笔记内容的时候，经常出现下面这种情况： ...
thinkord:一个开源的Electron应用程序，致力于帮助您轻松快速地做笔记
05-01
Thinkord Thinkord是一款开放源代码的Electron应用程序，致力于帮助人们轻松，快速地做笔记。 我们相信Thinkord可以通过专注于捕捉他们的想法而不是编辑它们来改变人们做笔记的方式。 希望您发现此应用程序有帮助。 ...
Electron笔记
weixin_39371280的博客
12-27 357
基于Chromium和Node.js事件循环机制的实现：独立的线程基于Electron开发的应用：HTTP网络测试工具Postman、MongoDB桌面版管理工具Compass。
我的Electron个人学习笔记
qq_33317597的博客
03-25 1553
文章目录Electron简单了解第一个窗口程序引入js执行读txtRemote模块Electron快速上手五分钟快速上手自动刷新页面主进程和渲染进程自定义原生菜单自定义顶部菜单点击菜单创建新窗口a标签跳转浏览器打开对话框读取文件读取文件保存文件定义快捷键主线程定义渲染进程定义渲染进程和主线程通讯断网提醒打包附录electron结合框架开发直接使用模板创建electron-vue直接使用模板创建electron-vue Electron简单了解 首先npm init -y 然后项目目录下: npm insta
electron 学习笔记
娃哈哈_的博客
08-06 417
electron 基础学习笔记
qq_38388578的博客
02-10 1003
1、创建项目 1、安装 npm install -g electron / cnpm install -g electron 2、项目搭建方式 2-1、 克隆一个仓库、快速启动一个项目 克隆示例项目的仓库 git clone https://github.com/electron/electron-quick-start 进入这个仓库 cd electron-quick-start 安装依赖并运行 npm install && npm start 2-2、electron-f
electron打包时资源下载失败cannot resolve xxx/30.0.9/electron-v30.0.9-win32-ia32.zip
关注前端，关注原创
05-31 178
同学们可以私信我加入学习群！最近electron更新频繁，而我在用electron做个人项目，对稳定性没有太高要求，希望保持着electron的最新版本，所以就没有固定版本。单位网络不太好，打包时遇到无法下载资源包的问题： 如图所示： 第一反应，当然是希望修改镜像源，让打包工具可以自行下载资源包。但是如果镜像源设置后，都无法下载，就需要我们手动下载资源包了。截止到2024年5月31日，淘宝镜像源资源地址为：https://registry.npmmirror.com/binary.html打开后，是所有的
electron初学
最新发布
weixin_43487532的博客
05-31 96
引用官网：Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux。我这里会把我项目中的代码全部贴出来，个人理解就是主程序为核心，然后渲染主页面，页面上可以做各种交互。在electron项目中，最重要的就是main.js，这是主程序的入口。
Mac逆向Electron应用
weixin_42429220的博客
05-30 246
【代码】Mac逆向Electron应用。
nodejs中使用ffmpeg零基础教程（electron+vue3）
关注前端，关注原创
05-28 1007
最近想要把自己写的一些知识点，在写完demo后，除了形成博客记录笔记，还可以便捷地录屏形成视频教程。所以研究了好久如何在nodejs中完成录屏功能。本功能模块基于electron+vue3完成，原生nodejs也可以作为参考，原理是一致的。踩了很多坑，否了很多方案后，终于形成了目前的方案。ffmpeg插件：这是真正的录屏插件，windows系统中以exe可执行文件形式存在，其它所有插件都是围绕它开发。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1044
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
electron 如何学习
06-08
如果你想学习 Electron，可以按照以下步骤： 1. 学习基础知识 首先你需要了解一些基础知识，例如 Node.js 和前端开发技术（HTML、CSS、JavaScript）。如果你已经掌握了这些知识，那么就可以开始学习 Electron。 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值