# xmagic-electron-demo

**Repository Path**: xmagic_admin/xmagic-electron-demo

## Basic Information

- **Project Name**: xmagic-electron-demo
- **Description**: electron示例程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1 渲染进程调用node
## 1.1 使用 @electron/remote 模块
如果你的项目依赖了较多 remote 模块的代码，希望较快地迁移，可以采用此方案。
### 1.1.1 安装模块
在你的项目目录下，运行以下命令来安装 @electron/remote 包
```shell
npm install --save @electron/remote
```
### 1.1.2 在主进程中初始化
在主进程文件（通常是 main.js）中，引入并初始化这个模块
```javascript
// 在主进程开头引入并初始化
require('@electron/remote/main').initialize();
```
然后，对于每个需要启用 @electron/remote 的浏览器窗口，调用 enable 方法
```javascript
const mainWindow = new BrowserWindow({
  webPreferences: {
    // ... 其他配置
      nodeIntegration: true, //设置在渲染进程中可以使用nodejs
      contextIsolation: false, //nodeIntegration为true时必须设置为false
      nodeIntegrationInWorker: true,
      nodeIntegrationInSubFrames: true,
  }
});
// 为具体的窗口启用
require('@electron/remote/main').enable(mainWindow.webContents);
```
### 1.1.3 在渲染进程中引用
在渲染进程的脚本文件中，你现在应该从 @electron/remote 包中引入所需的模块，而不是使用原始的 electron.remote
```javascript
// 渲染进程脚本 (例如 renderer.js)
// 以前的写法：const { BrowserWindow } = require('electron').remote;
const { BrowserWindow } = require('@electron/remote');

// 现在你可以像以前一样使用 BrowserWindow 了
const win = BrowserWindow.getFocusedWindow();
win.minimize();
```
### 1.1.4 在页面中引用
```html
<script type="text/javascript">

    // console.log("Hello from Electron renderer!");
    // alert(window.objRender.key);

    // let objRender2 = require('./objRender2.js');
    // alert(objRender2.key);
    const { BrowserWindow } = require('@electron/remote');
    document.querySelector("#openDevToolsBtn").addEventListener("click", e => {
        // remote.getCurrentWindow().webContents.openDevTools();
        BrowserWindow.getFocusedWindow().webContents.openDevTools()
        // const win = require('@electron/remote').getCurrentWindow();
        // win.webContents.openDevTools();
    })
</script>
```
## 1.2 使用 IPC 通信（推荐做法）
从长远来看，更安全、更推荐的方法是使用 IPC（Inter-Process Communication） 在渲染进程和主进程之间进行通信。虽然这可能需要重构一些代码，但它能更好地遵循 Electron 的安全原则。

### 1.2.1 预加载脚本 (preload.js)
```javascript
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getWindowId: () => ipcRenderer.invoke('get-window-id'),
  minimizeWindow: ()=>ipcRenderer.invoke('minimize-active-window')
});
```

### 1.2.1 主进程 (main.js) 设置 IPC 监听器
```javascript
const { ipcMain, BrowserWindow } = require('electron');

ipcMain.handle('minimize-active-window', () => {
  const win = BrowserWindow.getFocusedWindow();
  if (win) {
    win.minimize();
  }
});
ipcMain.handle('get-window-id', (event) => {
    // 这里可以根据需要返回窗口的ID或其他标识
    const win = BrowserWindow.fromWebContents(event.sender);
    return win.id; // 或者返回 win 的其他属性
});
```
### 1.2.2 渲染进程 (renderer.js) 通过预加载脚本发送 IPC 消息
```javascript
// 通过预加载脚本暴露的 API
window.electronAPI.minimizeWindow();

window.electronAPI.getWindowId().then(windowId => {
    console.log('当前窗口ID:', windowId);
});
```

> 重要提醒
> 安全配置：无论选择哪种方法，请确保在创建 BrowserWindow 时，不再在 webPreferences 中设置已被移除的 enableRemoteModule: true
> 版本考量：@electron/remote 是官方为平滑过渡提供的方案，而 IPC 通信是官方更鼓励的长期方向