工作流程#

主进程#

可以看做是 package.json 中 main 属性对应的文件
一个应用只会有一个主进程
只有主进程可以进行GUI的API操作

渲染进程#

Windows 中显示的界面通过渲染进程表现
一个应用可以有多个渲染进程

环境搭建#

可以使用 electron-vite 快速搭建一个项目

1
npm create @quick-start/electron@latest

electron-vite (cn-evite.netlify.app)

打包配置#

electron-builder.yml中 nsis 的配置

1
nsis:
2
  artifactName: ${name}-${version}-setup.${ext}
3
  shortcutName: ${productName}
4
  uninstallDisplayName: ${productName}
5
  createDesktopShortcut: always  # 始终创建桌面快捷方式
6
  oneClick: false                 # 一键安装（直接安装，不显示界面） true=一键安装 false=手动安装
7
  perMachine: false             # 仅当前用户安装（true=所有用户） true=所有用户 false=当前用户
8
  allowElevation: true          # 允许提权（如需安装到 Program Files） true=允许 false=不允许
9
  allowToChangeInstallationDirectory: true  # 用户选择安装路径 true=允许 false=不允许
10
  runAfterFinish: true          # 安装完成后自动运行应用 true=允许 false=不允许
11
  # silent: true               # 完全静默（无任何界面，适合企业部署）

开发#

项目结构#

约定

推荐使用如下项目结构

1
.
2
├──src
3
│  ├──main
4
│  │  ├──index.ts
5
│  │  └──...
6
│  ├──preload
7
│  │  ├──index.ts
8
│  │  └──...
9
│  └──renderer    # with vue, react, etc.
10
│     ├──src
11
│     ├──index.html
12
│     └──...
13
├──electron.vite.config.ts
14
├──package.json
15
└──...

遵循此约定，electron-vite 可以用最少的配置进行工作。

当运行 electron-vite 时，它会自动寻找主进程、渲染器和预加载脚本的入口文件。默认的入口配置：

主进程： <root>/src/main/{index|main}.{js|ts|mjs|cjs}
预加载脚本： <root>/src/preload/{index|preload}.{js|ts|mjs|cjs}
渲染器： <root>/src/renderer/index.html

生命周期#

主进程生命周期#

准备阶段
- Electron 初始化
- 加载 Node.js 环境
应用启动
- app.whenReady(): 应用准备就绪的 Promise
- ready 事件: 当 Electron 完成初始化时触发
窗口管理
- 创建 BrowserWindow 实例
- window-all-closed 事件: 所有窗口关闭时触发
- before-quit 事件: 应用开始退出前触发
- will-quit 事件: 即将退出时触发
- quit 事件: 应用退出时触发

渲染进程生命周期#

页面加载
- dom-ready: DOM 加载完成
- did-finish-load: 页面加载完成
- did-fail-load: 页面加载失败
页面交互
- 各种 DOM 事件和用户交互
页面关闭
- beforeunload: 页面即将卸载
- unload: 页面卸载

常用生命周期事件#

1
const { app, BrowserWindow } = require('electron')
2

3
app.whenReady().then(() => {
4
  // 应用已准备好，可以创建窗口
5
  const win = new BrowserWindow({ /* 配置 */ })
6

7
  win.webContents.on('did-finish-load', () => {
8
    console.log('页面加载完成')
9
  })
10
})
11

12
app.on('window-all-closed', () => {
13
  if (process.platform !== 'darwin') {
14
    app.quit()
15
  }
16
})
17

18
app.on('before-quit', (e) => {
19
  // 可以在这里阻止退出或执行清理操作
20
})
21

22
app.on('will-quit', () => {
23
  // 即将退出
24
})
25

26
app.on('quit', () => {
27
  // 应用已退出
28
})

1
function createWindow() {
2
  // 创建窗口
3
  let mainWindow = new BrowserWindow({
4
    x: 100,
5
    y: 100,//设置窗口显示的位置
6
    width: 900,//窗口宽度
7
    height: 670,//窗口高度
8
    maxHeight:670,//窗口最大高度
9
    minHeight:100,//窗口最小高度
10
    maxWidth:1000,//窗口最大宽度
11
    minWidth: 100,//窗口最小宽度
12
    resizable: true,//窗口是否可以改变大小  true可以  false不可以
13
    show: false, //默认情况下创建一个窗口对象之后就会显示，设置为false就不会显示
14
    autoHideMenuBar: true,//菜单栏是否隐藏  true隐藏  false不隐藏
15
    frame: false,//窗口是否显示边框 true显示 false不显示
16
  title:'测试',//窗口标题
17
    icon:'图标地址',//图标
18
    ...(process.platform === 'linux' ? { icon } : {}),
19
    webPreferences: {
20
      preload: join(__dirname, '../preload/index.js'),
21
      sandbox: false
22
    }
23
  })
24
}

修改窗口标题时要先将 index.html中的title标签设置为空

模态窗口#

主窗口创建新的窗口以后不允许操作主窗口

parent: BrowserWindow.fromWebContents(event.sender),//父窗口

modal: true,//是否为模态窗口 true是 false否

1
ipcMain.handle('open-new-window', (event, url) => {
2
  // 创建新窗口
3
  const newWindow = new BrowserWindow({
4
    width: 800,
5
    height: 600,
6
    show: false,
7
    parent: BrowserWindow.fromWebContents(event.sender),//父窗口
8
    modal: true,//模态窗口
9
    webPreferences: {
10
      preload: join(__dirname, '../preload/index.js'), // 使用绝对路径更安全
11
      sandbox: true, // ✅ 启用沙盒
12
      contextIsolation: true, // ✅ 启用上下文隔离
13
      nodeIntegration: false // ✅ 禁用 Node 集成
14
    }
15
  })
16

17
  // 加载内容（使用参数传入的 URL 或默认页面）
18
  const loadUrl = url || 'about:blank'
19
  newWindow.loadURL(loadUrl).catch(err => {
20
    console.error('Failed to load window content:', err)
21
    newWindow.close()
22
  })
23

24
  // 窗口准备就绪后显示
25
  newWindow.on('ready-to-show', () => {
26
    newWindow.show()
27
  })
28

29
  // 窗口关闭时清理引用
30
  newWindow.on('closed', () => {
31
    // 在实际应用中可能需要执行其他清理操作
32
  })
33

34
  // 返回窗口 ID 以便后续管理
35
  return newWindow.id
36
})

自定义菜单#

label 菜单名称

submenu 子菜单

role 是一个特殊属性，用于指定菜单项的标准功能，而不需要手动实现这些功能的代码。

click点击事件

1
import { Menu } from 'electron'
2

3
//定义菜单模版
4
let menuTemp = [
5
  {
6
    label: '文件',//菜单名称
7
    submenu: [
8
      {
9
        label: '新建',
10
        click: () => { //点击事件
11
          console.log('新建')
12
        }
13
      },
14
      { type: 'separator' },//分隔符
15
      { label: '打开' },
16
      { label: '关于' ,role: 'about' },
17
      { label: '最小化', role: 'minimize' }
18
    ]
19
  },
20
  { label: '编辑' }
21
]
22

23
//用上述模版生成菜单项
24
let menu = Menu.buildFromTemplate(menuTemp)
25

26
//将自定义菜单项添加到应用
27
Menu.setApplicationMenu(menu)

获得当前平台#

1
//获取当前平台
2
console.log(process.platform)

菜单角色及类型#

accelerator 设置快捷键

icon设置图标

1
import { Menu } from 'electron'
2

3
//定义菜单模版
4
let menuTemp = [
5
  {
6
    label: '文件',
7
    submenu: [
8
      { label: '复制', role: 'copy' },
9
      { label: '粘贴', role: 'paste' },
10
      { label: '剪贴', role: 'cut' },
11
      { label: '全选', role: 'selectall' },
12
      { label: '最小化', role: 'minimize' }
13
    ]
14
  },
15
  {
16
    label: '类型',
17
    submenu: [
18
      { label: '选项一', type: 'checkbox' },
19
      { label: '选项二', type: 'checkbox' },
20
      { label: '选项三', type: 'checkbox' },
21
      { type: 'separator' },
22
      { label: 'item1', type: 'radio' },
23
      { label: 'item2', type: 'radio' },
24
      { type: 'separator' },
25
      { label: 'windows', type: 'submenu', role: 'windowMenu' } //window原生菜单
26
    ]
27
  },
28
  {
29
    label: '其他',
30
    submenu: [
31
      {
32
        label: '打开',
33
        icon: './resources/icon.png',
34
        accelerator: 'ctrl + o',//设置快捷键
35
        click: () => {
36
          console.log('操作完了')
37
        }
38
      },
39
    ]
40
  }
41
]
42

43
//利用上述模版生成菜单项
44
let menu = Menu.buildFromTemplate(menuTemp)
45

46
//将自定义菜单项添加到应用
47
Menu.setApplicationMenu(menu)

动态创建菜单#

页面

1
  <input type="text" placeholder="请输入内容" v-model="lableValue" />
2
  <button @click="newMenu">创建新菜单</button>
3

4

5
/////////////////////////////js
6
const lableValue = ref('')
7

8
const newMenu = () => {
9
  window.electron1.newMenu('new-menu', lableValue.value)
10
}

preload

1
contextBridge.exposeInMainWorld('electronAPI', {
2
  newMenu: (menu, ) => ipcRenderer.invoke('new-menu', menu, test)
3
})

main

1
import {ipcMain, Menu, MenuItem } from 'electron'
2
let menuList = Menu()
3

4
ipcMain.handle('new-menu', (event, menu, lableValue) => {
5
  console.log(lableValue)
6
  console.log(menu)
7
  let newMenuItem = new MenuItem({ label: lableValue, submenu: new Menu() })
8
  menuList.append(newMenuItem)
9
  Menu.setApplicationMenu(menuList)
10
})

自定义右键菜单#

main

1
import { BrowserWindow, ipcMain, Menu } from 'electron'
2
//定义鼠标右键菜单内容
3
let contextTemp = [
4
  {
5
    label: '复制',
6
    role: 'copy',
7
    accelerator: 'ctrl + c'
8
  },
9
  {
10
    label: '粘贴',
11
    role: 'paste',
12
    accelerator: 'ctrl + v'
13
  },
14
  {
15
    label: '剪贴',
16
    role: 'cut',
17
    accelerator: 'ctrl + x'
18
  },
19
  {
20
    label: '全选'
21
  },
22
  {
23
    type: 'separator'
24
  },
25
  {
26
    label: '其他',
27
    click: () => {
28
      console.log('其他')
29
    }
30
  }
31
]
32
//依据上述的内容创建 menu
33
let menuRight = Menu.buildFromTemplate(contextTemp)
34

35
//给鼠标右键添加监听
36
ipcMain.handle('right-click', (event) => {
37
  //获取当前窗口
38
  let win = BrowserWindow.fromWebContents(event.sender)
39
  //设置右键菜单
40
  win.webContents.on('context-menu', (e, params) => {
41
    //设置菜单位置
42
    menuRight.popup({
43
      window: win,
44
      x: params.x,
45
      y: params.y
46
    })
47
  })
48
})

preload

1
contextBridge.exposeInMainWorld('electronAPI', {
2
  rightClick: () => ipcRenderer.invoke('right-click')
3
})

页面

1
//给右键添加监听
2
window.electronAPI.rightClick('right-click', (event, data) => {
3
  console.log('右键菜单', data)
4
})

主进程与渲染进程通信#

ipcMain.on() 和 ipcMain.handle() 是两种不同的 IPC 通信方式

IPC通信#

ipcMain.on()#

`ipcMain.on()` 与 `event.reply()`#

main

1
ipcMain.on('message-from-renderer', (event, arg) => {
2
  console.log(arg); // 打印消息
3
  event.reply('message-reply', 'pong'); // 回复消息
4
});

preload

1
const { contextBridge, ipcRenderer } = require('electron');
2
contextBridge.exposeInMainWorld('electronAPI', {
3
  send: (channel, data) => ipcRenderer.send(channel, data),
4
  invoke: (channel, data) => ipcRenderer.invoke(channel, data),
5
  on: (channel, callback) => ipcRenderer.on(channel, callback)
6
});

渲染进程

1
// 渲染进程调用
2
window.electronAPI.invoke('get-data').then(result => { ... });

特点：

单向通信：渲染进程通过 ipcRenderer.send() 发送消息，主进程通过 event.reply() 回复。
多次响应：主进程可以多次调用 event.reply() 发送多条回复。
无 Promise 支持：渲染进程需要通过监听另一个事件来接收回复。
适用场景：适合需要主进程主动推送多次响应的场景（如进度更新、实时数据流）。

ipcMain.handle()#

main

1
ipcMain.handle('message-from-renderer', (event, arg) => {
2
  console.log(arg); // 打印消息
3
  return 'pong'; // 直接返回值
4
});

渲染进程

1
const { ipcRenderer } = require('electron');
2

3
// 使用 invoke 调用并等待结果
4
(async () => {
5
  const result = await ipcRenderer.invoke('message-from-renderer', 'ping');
6
  console.log(result); // 'pong'
7
})();

特点：

双向通信：渲染进程通过 ipcRenderer.invoke() 调用，主进程直接返回结果（类似函数调用）。
Promise 支持：渲染进程通过 await 或 .then() 直接获取返回值。
单次响应：主进程只能通过 return 返回一次结果。
适用场景：适合需要同步等待结果的场景（如读取文件、数据库查询）。

`webContents.send()`#

使用 SharedArrayBuffer 和 Atomics 实现高性能数据共享（适用于大量数据交换）。

main

1
// 创建共享内存
2
const sharedBuffer = new SharedArrayBuffer(1024);
3
const sharedArray = new Uint8Array(sharedBuffer);
4

5
// 写入数据
6
sharedArray[0] = 42;
7

8
// 通过 IPC 传递 SharedArrayBuffer（注意安全限制）
9
ipcRenderer.send('share-buffer', sharedBuffer);

注意事项

需要启用 contextIsolation: false 或通过 postMessage 传递。
需配置 CSP 头允许 SharedArrayBuffer（如 Cross-Origin-Opener-Policy: same-origin）

使用 Node.js 的 `child_process`#

主进程可以创建子进程（如 Python、C++ 程序），并通过标准输入输出或 IPC 通信。

main

1
const { exec } = require('child_process');
2

3
const pythonProcess = exec('python script.py', (error, stdout, stderr) => {
4
  if (error) console.error(error);
5
  console.log(stdout); // 子进程输出
6
});
7

8
// 发送数据到子进程
9
pythonProcess.stdin.write('data\n');

适用场景

需要调用外部程序或脚本。
高性能计算（如机器学习、图像处理）。

使用 WebSocket 或 HTTP 通信#

如果应用涉及多个 Electron 实例或远程服务，可以用 WebSocket/HTTP 通信。

主进程或渲染进程:

1
const ws = new WebSocket('ws://localhost:8080');
2
ws.onmessage = (event) => {
3
  console.log('Received:', event.data);
4
};
5
ws.send('Hello Server!');

适用场景

多窗口/多进程通信。
与后端服务或其他设备交互。

使用文件或数据库作为中介#

通过读写文件或数据库（如 SQLite、LevelDB）实现数据交换。

使用 `MessagePort` (高级 API)#

适用性：官方推荐替代 remote 的方案，支持复杂通信场景

1
// 主进程
2
const { port1, port2 } = new MessageChannel();
3
win.webContents.postMessage('port', null, [port1]);
4

5
// 渲染进程（通过 preload 暴露）
6
window.electronAPI.onPortMessage((port) => {
7
  port.postMessage('ping');
8
  port.onmessage = (e) => console.log(e.data);
9
});

注意#

上下文隔离（Context Isolation）：
- 默认启用，必须通过 preload 脚本使用 contextBridge 暴露 API。
- 错误配置会导致 require 或 window.electronAPI 不可用。
沙箱（Sandbox）：
- 渲染进程默认受限，禁止直接访问 Node.js API。
- 需通过 preload 脚本的白名单控制权限。

渲染进程间的通信#

在 Electron 中，渲染进程（Renderer Process）之间不能直接通信，必须通过主进程（Main Process）作为中介。

通过主进程转发#

main

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

3
// 存储所有窗口的引用
4
const windows = new Map();
5

6
// 注册转发逻辑
7
ipcMain.on('renderer-to-renderer', (event, { targetWindowId, message }) => {
8
  const targetWindow = windows.get(targetWindowId);
9
  if (targetWindow) {
10
    targetWindow.webContents.send('renderer-message', message);
11
  }
12
});

渲染进程A (发送消息):

1
const { ipcRenderer } = require('electron');
2

3
// 发送给ID为2的窗口
4
ipcRenderer.send('renderer-to-renderer', {
5
  targetWindowId: 2,
6
  message: 'Hello from Window 1'
7
});

渲染进程B (接收消息):

1
ipcRenderer.on('renderer-message', (event, message) => {
2
  console.log('Received:', message); // "Hello from Window 1"
3
});

使用 MessagePort (Electron 14+)#

原理：

通过主进程建立直接的 MessageChannel 连接
高性能，适合频繁通信

main

1
const { MessageChannel } = require('electron');
2

3
// 窗口1和窗口2建立时连接它们
4
function connectWindows(win1, win2) {
5
  const { port1, port2 } = new MessageChannel();
6

7
  win1.webContents.postMessage('port', null, [port1]);
8
  win2.webContents.postMessage('port', null, [port2]);
9
}

preload.js

1
contextBridge.exposeInMainWorld('electronAPI', {
2
  onPort: (callback) => {
3
    window.addEventListener('message', (event) => {
4
      if (event.data === 'port') {
5
        const [port] = event.ports;
6
        callback(port);
7
      }
8
    });
9
  }
10
});

渲染进程A (发送端):

1
window.electronAPI.onPort((port) => {
2
  port.postMessage('Direct message!');
3
});

渲染进程B (接收端):

1
window.electronAPI.onPort((port) => {
2
  port.onmessage = (e) => {
3
    console.log('Direct message:', e.data);
4
  };
5
});

使用 localStorage/sessionStorage (同源窗口)#

适用场景：

仅限同一浏览器窗口内的多个页面（如多个 <webview>）
简单状态同步

页面

1
// 窗口A发送
2
localStorage.setItem('shared-data', JSON.stringify({ key: 'value' }));
3

4
// 窗口B监听
5
window.addEventListener('storage', (e) => {
6
  if (e.key === 'shared-data') {
7
    console.log('Data changed:', JSON.parse(e.newValue));
8
  }
9
});

使用远程共享状态#

适用场景：

需要跨窗口实时同步复杂数据
例如使用 Redux/MobX 等状态管理库

main

1
const sharedStore = createStore(/* reducers */);
2

3
// 将store注入所有窗口
4
function attachStoreToWindow(win) {
5
  win.sharedStore = sharedStore;
6
}

preload

1
contextBridge.exposeInMainWorld('electronAPI', {
2
  getSharedStore: () => window.sharedStore
3
});

如何选择#

大多数场景：方案1（主进程转发）
高性能需求：方案2（MessagePort）
同源简单同步：方案3（localStorage）
复杂状态管理：方案4（共享状态库）

dialog模块#

dialog 模块用于显示原生系统对话框，如文件选择、消息提示、错误弹窗等。它提供了与操作系统风格一致的对话框，增强了应用的原生体验。

1. 基本用法#

dialog 需要在 主进程 中使用，但可以通过 ipc 在渲染进程中调用。

1.1 引入模块#

1
// 主进程中
2
const { dialog } = require('electron');

1.2 常用方法#

方法	用途	返回值
`dialog.showOpenDialog([options])`	打开文件/目录选择对话框	`Promise<{ filePaths: string[] }>`
`dialog.showSaveDialog([options])`	显示文件保存对话框	`Promise<{ filePath: string }>`
`dialog.showMessageBox([options])`	显示消息提示框（确认/取消）	`Promise<{ response: number }>`
`dialog.showErrorBox(title, content)`	显示错误弹窗（无回调）	`void`

2. 文件选择对话框 (`showOpenDialog`)#

1
const { dialog } = require('electron');
2

3
// 异步方式（推荐）
4
dialog.showOpenDialog({
5
  title: '选择文件',
6
  properties: ['openFile', 'multiSelections'], // 可选文件、多选
7
  filters: [
8
    { name: 'Images', extensions: ['jpg', 'png'] },
9
    { name: 'All Files', extensions: ['*'] }
10
  ]
11
}).then(result => {
12
  if (!result.canceled) {
13
    console.log('选择的文件:', result.filePaths);
14
  }
15
});

常用选项 (options):

properties(属性):
- openFile (选择文件)
- openDirectory (选择目录)
- multiSelections (允许多选)
filters: 文件类型过滤器

3. 保存文件对话框 (`showSaveDialog`)#

1
dialog.showSaveDialog({
2
  title: '保存文件',
3
  defaultPath: '/path/to/default.txt',
4
  filters: [{ name: 'Text', extensions: ['txt'] }]
5
}).then(result => {
6
  if (!result.canceled) {
7
    fs.writeFileSync(result.filePath, '文件内容');
8
  }
9
});

4. 消息提示框 (`showMessageBox`)#

1
dialog.showMessageBox({
2
  type: 'info',
3
  title: '提示',
4
  message: '操作确认',
5
  detail: '确定要删除吗？',
6
  buttons: ['确定', '取消'],
7
  cancelId: 1 // 按ESC时返回的按钮索引
8
}).then(result => {
9
  if (result.response === 0) {
10
    console.log('用户点击了确定');
11
  }
12
});

按钮返回值:

result.response 是按钮的索引（从0开始）

5. 错误弹窗 (`showErrorBox`)#

1
dialog.showErrorBox(
2
  '错误标题',
3
  '发生了一个致命错误！'
4
);
5
// 无回调，仅显示

6. 在渲染进程中调用 `dialog`#

由于安全限制，渲染进程不能直接使用 dialog，需通过 ipc 通信。

6.1 主进程暴露 API (preload.js)#

1
const { contextBridge, ipcRenderer } = require('electron');
2

3
contextBridge.exposeInMainWorld('electronAPI', {
4
  openFile: () => ipcRenderer.invoke('dialog:openFile')
5
});

6.2 主进程实现 (main.js)#

1
ipcMain.handle('dialog:openFile', async () => {
2
  const result = await dialog.showOpenDialog({ /* 选项 */ });
3
  return result.filePaths;
4
});

6.3 渲染进程调用#

1
document.getElementById('open-btn').addEventListener('click', async () => {
2
  const files = await window.electronAPI.openFile();
3
  console.log('选择的文件:', files);
4
});

7. 跨平台差异#

功能	Windows	macOS	Linux
文件选择器	√	√	√ (风格可能不同)
消息框图标	⚠️ 部分样式不同	✅	⚠️ 依赖桌面环境
默认路径	支持 `C:\\`	支持 `/Users`	支持 `/home`

8. 最佳实践#

错误处理：

1
try {
2
  const result = await dialog.showOpenDialog();
3
} catch (err) {
4
  console.error('对话框错误:', err);
5
}

优化用户体验
- 设置合理的 defaultPath（如上次打开的目录）
- 使用 filters 限制可选择的文件类型

安全提示：

1
const isValid = fs.existsSync(userSelectedPath);

消息通知#

通过前端实现

1
const createNotification = () => {
2
  let option = {
3
    title: '标题',
4
    body: '内容',
5
    icon: './assets/electron.svg'
6
  }
7

8
  //创建消息卡
9
  let myNotification = new Notification(option.title, option)
10

11
  //监听是否点击
12
  myNotification.onclick = () => {
13
    console.log('点击了消息卡')
14
  }
15
}
16

17
<a target="_blank" rel="noreferrer" @click="createNotification">消息通知</a>

快捷键注册#

剪切板模块#

sqlite数据库操作#

控制台输出乱码#

1
chcp 65001

工作流程#

主进程#

渲染进程#

环境搭建#

打包配置#

开发#

项目结构#

生命周期#

主进程生命周期#

渲染进程生命周期#

常用生命周期事件#

模态窗口#

自定义菜单#

获得当前平台#

菜单角色及类型#

动态创建菜单#

自定义右键菜单#

主进程与渲染进程通信#

IPC通信#

ipcMain.on()#

ipcMain.on() 与 event.reply()#

ipcMain.handle()#

webContents.send()#

使用 Node.js 的 child_process#

使用 WebSocket 或 HTTP 通信#

使用文件或数据库作为中介#

使用 MessagePort (高级 API)#

注意#

渲染进程间的通信#

通过主进程转发#

使用 MessagePort (Electron 14+)#

使用 localStorage/sessionStorage (同源窗口)#

使用远程共享状态#

如何选择#

dialog模块#

1. 基本用法#

1.1 引入模块#

1.2 常用方法#

2. 文件选择对话框 (showOpenDialog)#

3. 保存文件对话框 (showSaveDialog)#

4. 消息提示框 (showMessageBox)#

5. 错误弹窗 (showErrorBox)#

6. 在渲染进程中调用 dialog#

6.1 主进程暴露 API (preload.js)#

6.2 主进程实现 (main.js)#

6.3 渲染进程调用#

7. 跨平台差异#

8. 最佳实践#

消息通知#

快捷键注册#

剪切板模块#

sqlite数据库操作#

控制台输出乱码#

`ipcMain.on()` 与 `event.reply()`#

`webContents.send()`#

使用 Node.js 的 `child_process`#

使用 `MessagePort` (高级 API)#

2. 文件选择对话框 (`showOpenDialog`)#

3. 保存文件对话框 (`showSaveDialog`)#

4. 消息提示框 (`showMessageBox`)#

5. 错误弹窗 (`showErrorBox`)#

6. 在渲染进程中调用 `dialog`#