Electronjs编写程序之dialog类教程

百度已收录   阅读次数: 387
2021-05-2219:37:21 发表评论
摘要

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

Electronjs编写程序之dialog类教程

开篇寄语

有关electronjs的开发文档相关内容,伯衡君看后有太多内容,单一文章根本解决,形成自己的系统知识,所以有必要分文别类进行细分学习,这篇文章主要是学习这个类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) => {
})

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

Electronjs编写程序之dialog类教程

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

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

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

生成的图片如下所示:

Electronjs编写程序之dialog类教程

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);
  });

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

Electronjs编写程序之dialog类教程

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

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

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

Electronjs编写程序之dialog类教程

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

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: