作者: OBKoro1 

electron原生对话框

electron的原生对话框dialog，提供了零碎对话框, 提供了音讯提醒、音讯提醒操作以及抉择文件、保留文件等操作，明天就跟着本文来理解一下electron。

PS：本文以及相干示例出自electron-playground，所有示例都能够即时运行，这是一个能够疾速试验electron的各种相干API的我的项目，你能够基于它来学习和理解electron的相干api。

1. 音讯提醒 dialog.showMessageBoxSync

1.1 音讯提醒

const { dialog } = require('electron')dialog.showMessageBoxSync({  type: 'info',  title: '这里是题目',  message: '提醒内容',  detail: '额定信息'})

electron-playgroud运行示例:

1.2 音讯提醒与确认

const { dialog } = require('electron')const res = dialog.showMessageBoxSync({  type: 'info',  title: '这里是题目',  message: '提醒内容',  detail: '额定信息',  cancelId: 1, // 按esc默认点击索引按钮  defaultId: 0, // 默认高亮的按钮下标  buttons: ['确认按钮', '勾销按钮'], // 按钮按索引从右往左排序})console.log('操作后果', res, res === 0 ? '点击确认按钮' : '点击勾销按钮') // 依据按钮数组中的下标来判断console.log('操作中还有个checkboxLabel的单选框须要应用showMessageBox api才能够获取到返回值')

electron-playgroud运行示例:

1.3 API阐明

dialog.showMessageBoxSync(browserWindow, options)

显示一个音讯框，它将阻止过程，直到音讯框被敞开。返回值为点击的按钮的索引。

参数：

  • browserWindow

能够指定一个父窗口，作为模态窗口附加到该窗口。

  • options

    • type: String (可选) - "none" ｜ "info" ｜ "error" ｜ "question" 不同的type提醒的图标不同；
    • title: String (可选) - message box 的题目，一些平台不显示，倡议应用message和detail；
    • message:  String - message box 的内容.
    • detail: String (可选) - 额定信息
    • buttons String[] - 字符串按钮数组，按钮按索引从右往左排序，如果未指定默认有一个"OK"的按钮。
    • defaultId: Integer (可选) - 默认高亮的按钮下标，回车的时候主动选中该项
    • cancelId: Integer (可选)  按esc默认点击索引按钮

返回值类型：

  • number: 所点击的按钮的索引
dialog.showMessageBox(browserWindow, options)

与dialog.showMessageBoxSync相似，不同点在于：

  1. 这是一个异步办法，返回值为Promise类型；
  2. 对话框能够指定一个checkbox(复选框)，返回值中也减少了对应的字段, 同步办法(showMessageBoxSyc)拿不到这个字段；

上面是带复选框的示例：

const { dialog } = require('electron')const res = dialog.showMessageBox({  type: 'info',  title: '这里是题目',  message: '提醒内容',  detail: '额定信息',  cancelId: 1, // 按esc默认点击索引按钮  defaultId: 0, // 默认高亮的按钮下标  checkboxLabel: '单选框内容',  checkboxChecked: false, // 是否选中单选框  buttons: ['确认按钮', '勾销按钮'], // 按钮按索引从右往左排序})console.log('操作后果 promise', res) // 返回一个promise能够通过它判断后果

electron-playgroud运行示例:

2. 抉择文件和文件夹

2.1 抉择文件实例

const { dialog, app } = require('electron')const res = dialog.showOpenDialogSync({  title: '对话框窗口的题目',  // 默认关上的门路，比方这里默认关上下载文件夹  defaultPath: app.getPath('downloads'),   buttonLabel: '确认按钮文案',  // 限度可能抉择的文件类型  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', 'openDirectory', 'multiSelections', 'showHiddenFiles' ],  message: 'mac文件选择器title'})console.log('res', res)

electron-playgroud运行示例:

API阐明

dialog.showOpenDialogSync(browserWindow,options)

参数：

options

  • defaultPath  String (可选) - 设置对话框默认关上哪个门路，须要设置一个无效门路否则将不失效。
  • buttonLabel  String (可选) - 确认按钮的文案, 当为空时, 将应用默认标签
  • filters 默认所有文件类型都能够抉择，设置后,只能抉择容许的文件类型

  • properties String[] (可选)

    • openFile - 容许抉择文件
    • openDirectory - 容许抉择文件夹
    • multiSelections - 容许多选。
    • showHiddenFiles - 显示对话框中的暗藏文件
  • message String (可选) -  mac文件选择器的title
tips: 尝试批改options中的参数来查看成果；

返回值类型：

String[] | undefined - 用户抉择的文件或文件夹门路;如果勾销对话框，则返回undefined

残缺API解释参考文档

3. 保留文件

3.1 实例

const { dialog } = require('electron')const res = dialog.showSaveDialogSync({  title: '对话框窗口的题目',  defaultPath: '', // 关上文件选择器的哪个门路 须要输出一个无效门路  buttonLabel: '确认按钮文案',  // 限度可能抉择的文件为某些类型  filters: [    // { name: 'Images', extensions: ['jpg', 'png', 'gif'] },    // { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },    // { name: 'Custom File Type', extensions: ['as'] },    // { name: 'All Files', extensions: ['*'] },   ],  nameFieldLabel: '替换文件', // “文件名”文本字段后面显示的文本自定义标签  showsTagField: true, // 显示标签输入框，默认值为true  properties: [ 'showHiddenFiles' ],  message: 'mac文件选择器title'})console.log('res', res)

electron-playgroud运行示例:

3.2 API阐明

dialog.showSaveDialogSync(browserWindow,options)

参数：

options

  • defaultPath  String (可选) - 设置对话框默认关上哪个门路，须要设置一个无效门路否则将不失效。
  • buttonLabel  String (可选) - 确认按钮的文案, 当为空时, 将应用默认标签
  • filters 默认所有文件类型都能够抉择，设置后,只能抉择容许的文件类型

  • properties String[] (可选)

    • openFile - 容许抉择文件
    • openDirectory - 容许抉择文件夹
    • multiSelections - 容许多选。
    • showHiddenFiles - 显示对话框中的暗藏文件
  • message String (可选) -  mac文件选择器的title

返回值类型：

String[] | undefined - 用户抉择的文件或文件夹门路;如果勾销对话框，则返回undefined；

残缺API解释参考文档

3.3 不同场景体现

  1. 抉择了一个存在的文件

提醒"文件夹中已有雷同名称的文件或文件夹。替换它将笼罩其以后内容。"，点击确认后返回该文件地址

  1. 抉择了一个不存在的文件

返回该不存在的文件地址

4. 错误信息弹窗

dialog.showErrorBox

这个API能够在app模块触发ready事件之前被平安地调用，它通常用在启动时报告谬误。 在Linux上, ready事件之前调用这个API, 音讯将被发送到stderr, 并且不会呈现GUI对话框。

const { dialog } = require('electron')dialog.showErrorBox('报错题目', '报错内容')console.log('API非常简单用于报错很不便')

小结

以上就是本文的内容了，更多对于electron的常识点击进入electron-playground仓库来理解吧，心愿通过这个我的项目大家可能更好的学习和了解electron,少走弯路。

  1. electron-playground是一个通过尝试electron各种个性，使electron的各项个性所见即所得, 来达到咱们疾速上手和学习electron的目标。
  2. electron-playground 系统性的整顿了electron相干的api，不便你在理论业务中抉择相应的app。
  3. 在electron-playground中所有代码都能够即时运行，即时反馈，能够下载一下咱们我的项目来尝试一下，置信你不会悲观的。
对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。

咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。

咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。