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