Electronjs编写程序之dialog类教程

摘要

有关electronjs的开发文档相关内容，伯衡君看后有太多内容，单一文章根本解决，形成自己的系统知识，所以有必要分文别类进行细分学习，这篇文章主要是学习这个类dialog，进行图文的学习能够很快掌握，加深了解，让我们开始吧……

开篇寄语

有关electronjs的开发文档相关内容，伯衡君看后有太多内容，单一文章根本解决，形成自己的系统知识，所以有必要分文别类进行细分学习，这篇文章主要是学习这个类dialog，进行图文的学习能够很快掌握，加深了解，让我们开始吧。

官方文档

• dialog

内容详情

释义：显示用于打开和保存文件，警报等对话框。

包含：showOpenDialogSync，showOpenDialog，showSaveDialogSync，showSaveDialog，showMessageBoxSync，showMessageBox，showErrorBox，showCertificateTrustDialog

showOpenDialog：如何使用Electron的对话框模块从主进程或渲染器进程打开文件（或目录），代码片段如下：

const {dialog} = require('electron'),
win = new BrowserWindow({width: 800, height: 600})
let options = {
 // See place holder 1 in above image
 title : "Custom title bar", 
 
 // See place holder 2 in above image
 defaultPath : "D:\\electron-app",
 
 // See place holder 3 in above image
 buttonLabel : "Custom button",
 
 // See place holder 4 in above image
 filters :[
  {name: 'Images', extensions: ['jpg', 'png', 'gif']},
  {name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
  {name: 'Custom File Type', extensions: ['as']},
  {name: 'All Files', extensions: ['*']}
 ],
 properties: ['openFile','multiSelections']
}

//Synchronous
let filePaths = dialog.showOpenDialog(win, options)

dialog.showOpenDialog(win, options, (filePaths) => {
})

生成的图片就是这个样子：

showSaveDialog：保存对话框向用户显示一个对话框，并返回包含所选路径的路径，代码片段如下：

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

const options = {
  defaultPath: app.getPath('documents') + '/electron-tutorial-app.pdf',
}
dialog.showSaveDialog(null, options, (path) => {
  console.log(path);
});

生成的图片如下所示：

showMessageBox：使用showMessageBox，可以显示多项选择的一条消息，代码片段如下：

const { dialog } = require('electron')
const options = {
    type: 'question',
    buttons: ['Cancel', 'Yes, please', 'No, thanks'],
    defaultId: 2,
    title: 'Question',
    message: 'Do you want to do this?',
    detail: 'It does not really matter',
    checkboxLabel: 'Remember my answer',
    checkboxChecked: true,
  };
  dialog.showMessageBox(null, options, (response, checkboxChecked) => {
    console.log(response);
    console.log(checkboxChecked);
  });

生成的结果就是如下样子：

showErrorBox：使用电子对话框showErrorBox向用户显示错误消息，代码片段如下：

const { dialog } = require('electron')
dialog.showErrorBox("错误", "点击返回")

生成的结果就是如下样子：

showCertificateTrustDialog：暂时意义不明，待日后明白后再更新此处