对话框

Dialog

向军大叔每晚八点在抖音和 bilibli 直播

dialog 模块用于打开和保存文件、显示警告或确认消息框等功能，dialog 运行于主进程中。下面我们来介绍具体的dialog功能使用。

错误消息

使用 showErrorBox 可以控制显示错误消息，两个参数第一个参数是标题，第一个参数是显示内容。

dialog.showErrorBox('通知', '你没有接收协议')

消息框

使用 showMessageBox 或 showMessageBoxSync 显示消息框，返回结果是点击的按钮索引，然后你可以根据不同点击的按钮实现不同的业务。

建议使用 showMessageBox 异步方法处理消息框

app.whenReady().then(async () => {
  createWindow()
	const res = await dialog.showMessageBox({
    type: 'warning',
    title: '你要退出吗？',
    detail: '有问题可以访问后盾人网站',
    buttons: ['取消', '退出'],
    //取消按钮的索引，使用esc根据索引调用取消按钮，默认为0，所以建议在buttons中将取消设置为第一个
    cancelId: 0,
    checkboxLabel: '接收协议',
    checkboxChecked: false,
  })
  
  if (!res.checkboxChecked) return dialog.showErrorBox('通知', '你没有接收协议')
  if (res.response == 1) app.quit()
})

选择文件

main.js 主进程，定义IPC通信事件 fileDialog 用于被渲染进程调用。

...
app.whenReady().then(() => {
  createWindow()
  ipcMain.handle('fileDialog', () => {
    return dialog.showOpenDialog({
	    //对话框窗口的标题
      title: '选择文件',
      //选择文件、目录，并支持多选
      properties: [
        'openFile',
        'openDirectory',
        'multiSelections',
      ],
      //文件类型限制
      filters: [
        {
          name: 'Images',
          extensions: ['jpg', 'png', 'gif'],
        },
      ],
    })
  })
})
...

preload.js 预加载脚本，用于向主进程main.js发送IPC通信，调用dialog模块选择文件

const {
  contextBridge,
  ipcRenderer,
} = require('electron/renderer')

contextBridge.exposeInMainWorld('api', {
  selectFiles: () => {
    return ipcRenderer.invoke('fileDialog')
  },
})

renderer.js 渲染脚本，使用IPC通信通过preload.js调用主进程任务，并将dialog获取到的文件路径放入DOM #files 标签中。

const bt = document.querySelector('#btn')
bt.addEventListener('click', async () => {
  const res = await api.selectFiles()
  document.querySelector('#files').innerHTML =
    res.filePaths.join('<br/>')
})

index.html 模板

#btn 按钮用于触发IPC通信
#files 标签用于显示dialog获取的文件列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'" />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'" />
    <title>houdunren</title>
  </head>
  <body>
    <button id="btn">选择文件</button>
    <div id="files"></div>
    <script src="renderer.js"></script>
  </body>
</html>

保存文件

使用 showSaveDialogSync 与 showSaveDialog 接口用于保存文件。

下面是使用dialog保存文件的示例

main.js 主进程，使用dialog模块选择文件保存位置，并调用node的fs模块写入文件。

app.whenReady().then(() => {
  createWindow()
  ipcMain.handle('saveFileDialog', async () => {
    const res = await dialog.showSaveDialog({
      //默认文件名
      defaultPath: fileName,
      //对话框窗口的标题
      title: '保存壁纸图片',
      //额外令牌
      message: '向军大叔作品',
      //允许创建目录
      properties: ['createDirectory']
    })
    writeFileSync(res.filePath, 'houdunren')
    return res
  })
})

preload.js 预加载脚本，用于向主进程main.js发送IPC通信，调用dialog模块保存文件

const {
  contextBridge,
  ipcRenderer,
} = require('electron/renderer')

contextBridge.exposeInMainWorld('api', {
  saveFile: () => {
    return ipcRenderer.invoke('saveFileDialog')
  },
})

renderer.js 渲染脚本，使用IPC通信通过preload.js调用主进程任务，并将dialog保存文件。

const bt = document.querySelector('#btn')
bt.addEventListener('click', async () => {
  const res = await api.saveFile()
})

index.html 模板，定义#btn按钮用于触发保存文件的IPC通信

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'" />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'" />
    <title>houdunren</title>
  </head>
  <body>
    <button id="btn">保存文件</button>
    <div id="files"></div>
    <script src="renderer.js"></script>
  </body>
</html>

对话框 ​

Dialog ​

错误消息 ​

消息框 ​

选择文件 ​

保存文件 ​

对话框

Dialog

错误消息

消息框

选择文件

保存文件