工业以太网交换机引领现代工厂自动化新潮流-CFANZ编程社区

工业以太网交换机引领现代工厂自动化新潮流

如果可以实现记得点赞分享，谢谢老铁～

1.项目效果, 我的目的是通过在渲染线程自定义事件，然后在主线程中监听。
在这里插入图片描述
2.在渲染线程中，如果直接导入，会报错… “require is not defined” 这是因为官方为了安全性，将 electron v12.0.0 的 contextIsolation 的默认值改了。

index.tsx

const {ipcRenderer} = require("electron");

在这里插入图片描述
3. 所以不能直接在index.tsx 里面直接导入。而是需要在主进程里进行配置

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

window.ipcRenderer = require('electron').ipcRenderer;

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

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

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

npm run build
```**

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

```powershell
npm run electron:dev

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

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

npm run electron:build

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

0 条评论