6.electron之上下文隔离,预加载JS脚本

如果可以实现记得点赞分享,谢谢老铁~

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和

Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux

的跨平台应用。

1.项目效果, 我的目的是通过在渲染线程自定义事件,然后在主线程中监听。

2.在渲染线程中,如果直接导入,会报错... "require is not defined" 这是因为官方为了安全性,将 electron v12.0.0 的 contextIsolation 的默认值改了。

index.tsx

powershell 复制代码
const {ipcRenderer} = require("electron");
  1. 所以不能直接在index.tsx 里面直接导入。而是需要在主进程里进行配置
js 复制代码
const {
    app,
    BrowserWindow,
    dialog,
    ipcMain,
} = require("electron");
const path = require("path");

mainWindow = new BrowserWindow({
        width: 1200,
        height: 700,
        minWidth: 1200, // 设置窗口的最小宽度
        minHeight: 700, // 设置窗口的最小高度
        icon: __dirname + "/favicon.ico",
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeIntegration: true,
            // 关闭上下文隔离
            contextIsolation: false,
        }
    });

PS:上述代码中 将 contextIsolation: false ,关闭上下文隔离。 然后在public 下创建一个preload.js 脚本,进行预加载处理。

4.我们看看preload.js 脚本

js 复制代码
window.ipcRenderer = require('electron').ipcRenderer;

哈哈哈哈,没错就只有一句代码,将模块赋值给全局window即可。

想要看具体实现,看下下一篇文章讲解《7.electron之渲染线程发送事件,主进程监听事件》

5.运行以下命令来构建React项目:

powershell 复制代码
npm run build
```**

6.运行以下命令来启动Electron应用程序:

```powershell
npm run electron:dev

这将启动Electron应用程序,并加载React应用程序的构建文件。

7.运行以下命令来打包Electron应用程序:

powershell 复制代码
npm run electron:build

收工!谢谢老铁们的点赞收藏~

相关推荐
_AaronWong3 天前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
alphageek83 天前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
xiaoyan20153 天前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
槿泽5 天前
Vue集成Electron目前最新版本
前端·vue.js·electron
LDM>W<6 天前
Electron下载失败
前端·javascript·electron
EndingCoder6 天前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
ayaya_mana7 天前
BilldDesk:基于Vue3+WebRTC+Nodejs+Electron的开源远程桌面控制
electron·开源·webrtc
卸任7 天前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
F2E_zeke7 天前
使用electron将vue3网页项目包装成pc客户端
javascript·vue.js·electron