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

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

相关推荐
EndingCoder11 小时前
Electron 跨平台兼容性:处理 OS 差异
前端·javascript·electron·前端框架·node.js·chrome devtools
喂_balabala1 天前
electron安装失败
electron
EndingCoder1 天前
打包应用:使用 Electron Forge
前端·javascript·性能优化·electron·前端框架·打包·electron forge
胖墩会武术1 天前
由浅及深:扫描电子显微镜(Scanning Electron Microscope,SEM)
人工智能·electron
li35742 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
EndingCoder2 天前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
EndingCoder3 天前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
至善迎风3 天前
使用国内镜像源解决 Electron 安装卡在 postinstall 的问题
前端·javascript·electron
mit6.8243 天前
[Upscayl图像增强] docs | 前端 | Electron工具(web->app)
前端·人工智能·electron·状态模式