关于html:Electron-Playground-系列Dialog与文件选择篇

作者: 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、简书、开源中国、博客园 关注咱们。