dialog 模块是主进程模块,它允许我们在 Electron 应用程序中创建各种类型的对话框,包括警告框、信息框、文件选择框等。这些对话框可用于与用户交互,获取输入、展示消息、选择文件等操作。

消息框 (MessageBox)

dialog 模块的 showMessageBox()showMessageBoxSync() 方法可以弹出消息框。一般会在渲染进程中想主进程发送信息,然后弹出消息框,这里为了代码演示方便,直接写到主进程了

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

app.on('ready', () => {
    // 创建窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
    })
         // 警告框
    dialog.showMessageBox({
        type: 'warning',
        title: '警告',
        message: '这是一个警告框。',
        buttons: ['确定']
    });
        // 信息框
    dialog.showMessageBox({
        type: 'info',
        title: '信息',
        message: '这是一个信息框。',
        buttons: ['确定']
    });
})

dialog.showMessageBox

  • 这是一个异步方法,不会阻塞主线程,而是通过 Promise 或回调函数来处理用户的响应。
  • 它返回一个 Promise 对象,你可以使用 then 方法来获取用户点击的按钮的索引。
  • 它是非阻塞的,因此在对话框显示期间,应用程序可以继续执行其他操作。
  • 使用它时,代码的执行会继续进行,不会停止在对话框显示期间。

dialog.showMessageBoxSync

  • 这是一个同步方法,会阻塞主线程直到用户关闭对话框。
  • 它返回一个整数值,表示用户点击的按钮的索引。
  • 它是阻塞式的,因此在对话框显示期间,应用程序的其他部分将无法执行。
  • 使用它时,代码的执行会在对话框关闭之前停止。

各系统之间的差异请参考文档:https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowmessageboxbrowserwindow-options

错误框 (ErrorBox)

错误框用于显示一个错误消息,使用dialog.showErrorBox()

dialog.showErrorBox('发生错误', '发生了一个错误!');

文件选择框

显示选择文件的对话框

dialog.showOpenDialog({
  properties: ['openFile']
}).then(result => {
  console.log(result.filePaths);
}).catch(err => {
  console.log(err);
});

该方法有很多配置项,具体可以参考文档。

文档地址:https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowopendialogbrowserwindow-options

dialog.showOpenDialogSync()

文件保存框

显示保存文件的对话框

dialog.showSaveDialog({
  defaultPath: '~/Documents/myfile.txt'
}).then(result => {
  console.log(result.filePath);
}).catch(err => {
  console.log(err);
});

该方法有很多配置项,具体可以参考文档。

文档地址:https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowsavedialogbrowserwindow-options

dialog.showSaveDialogSync()
Last modification:March 26, 2024
如果觉得我的文章对你有用,请随意赞赏