【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类似，不同点在于：

这是一个异步方法，返回值为Promise类型；
对话框可以指定一个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 不同场景表现

选择了一个存在的文件

提示"文件夹中已有相同名称的文件或文件夹。替换它将覆盖其当前内容。"，点击确认后返回该文件地址

选择了一个不存在的文件

返回该不存在的文件地址

4. 错误信息弹窗

dialog.showErrorBox

这个API可以在app模块触发ready事件之前被安全地调用，它通常用在启动时报告错误。在Linux上, ready事件之前调用这个API, 消息将被发送到stderr, 并且不会出现GUI对话框。

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

小结

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

electron-playground是一个通过尝试electron各种特性，使electron的各项特性所见即所得, 来达到我们快速上手和学习electron的目的。
electron-playground 系统性的整理了electron相关的api，方便你在实际业务中选择相应的app。
在electron-playground中所有代码都可以即时运行，即时反馈，可以下载一下我们项目来尝试一下，相信你不会失望的。

对 Electron 感兴趣？请关注我们的开源项目 Electron Playground，带你极速上手 Electron。
我们每周五会精选一些有意思的文章和消息和大家分享，来掘金关注我们的晓前端周刊。

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

【Electron Playground 系列】Dialog与文件选择篇

electron原生对话框

1. 消息提示 dialog.showMessageBoxSync

1.1 消息提示

1.2 消息提示与确认

1.3 API说明

dialog.showMessageBoxSync(browserWindow, options)

dialog.showMessageBox(browserWindow, options)

2. 选择文件和文件夹

2.1 选择文件实例

API说明

3. 保存文件

3.1 实例

3.2 API说明

3.3 不同场景表现

4. 错误信息弹窗

小结

你可能感兴趣的:(html)