博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用 Electron 调用系统对话框
阅读量:5863 次
发布时间:2019-06-19

本文共 3637 字,大约阅读时间需要 12 分钟。

使用 Electron 调用系统对话框

此系列文章的应用示例已发布于 . 可以 Clone 或下载后运行查看. 欢迎 Star .

Electron 中的 dialog 模块允许您使用本地系统对话框打开文件或目录, 保存文件或显示信息性消息.

这是一个主进程模块, 因为这个进程对于本地实用程序更有效, 它允许调用的同时而不会中断页面渲染器进程中的可见元素.

在浏览器中查看 .

打开文件或目录

支持: Win, macOS, Linux | 进程: Main

在本示例中, ipc 模块用于从渲染器进程发送一条消息, 指示主进程启动打开的文件(或目录)对话框. 如果选择了文件, 主进程可以将该信息发送回渲染器进程.

渲染器进程

const ipc = require('electron').ipcRendererconst selectDirBtn = document.getElementById('select-directory')selectDirBtn.addEventListener('click', function (event) {  ipc.send('open-file-dialog')})ipc.on('selected-directory', function (event, path) {  document.getElementById('selected-file').innerHTML = `You selected: ${path}`})

主进程

const ipc = require('electron').ipcMainconst dialog = require('electron').dialogipc.on('open-file-dialog', function (event) {  dialog.showOpenDialog({    properties: ['openFile', 'openDirectory']  }, function (files) {    if (files) event.sender.send('selected-directory', files)  })})

高级技巧

macOS 上的工作表样式对话框.

在 macOS 上, 您可以在 "工作表" 对话框或默认对话框之间进行选择. 工作表版本是从窗口顶部滑落. 要使用工作表版本, 请将 window 作为对话框方法中的第一个参数.

const ipc = require('electron').ipcMainconst dialog = require('electron').dialogconst BrowserWindow = require('electron').BrowserWindowipc.on('open-file-dialog-sheet', function (event) {  const window = BrowserWindow.fromWebContents(event.sender)  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})})

错误对话框

支持: Win, macOS, Linux | 进程: Main

在本示例中, ipc 模块用于从渲染器进程发送一条消息, 指示主进程启动错误对话框.

您可以在应用程序的 ready 事件之前使用错误对话框, 这对于在启动时显示错误很有用.

渲染器进程

const ipc = require('electron').ipcRendererconst errorBtn = document.getElementById('error-dialog')errorBtn.addEventListener('click', function (event) {  ipc.send('open-error-dialog')})

主进程

const ipc = require('electron').ipcMainconst dialog = require('electron').dialogipc.on('open-error-dialog', function (event) {  dialog.showErrorBox('一条错误信息', '错误消息演示.')})

信息对话框

支持: Win, macOS, Linux | 进程: Main

在本示例中, ipc 模块用于从渲染器进程发送一条消息, 指示主进程启动信息对话框. 可以提供用于响应的选项, 响应会被返回到渲染器进程中.

注意title 属性不会显示在 macOS 中.

一个信息对话框可以包含图标, 选择的按钮, 标题和消息.

渲染器进程

const ipc = require('electron').ipcRendererconst informationBtn = document.getElementById('information-dialog')informationBtn.addEventListener('click', function (event) {  ipc.send('open-information-dialog')})ipc.on('information-dialog-selection', function (event, index) {  let message = '你选择了 '  if (index === 0) message += '是.'  else message += '否.'  document.getElementById('info-selection').innerHTML = message})

主进程

const ipc = require('electron').ipcMainconst dialog = require('electron').dialogipc.on('open-information-dialog', function (event) {  const options = {    type: 'info',    title: '信息',    message: "这是一个信息对话框. 很不错吧?",    buttons: ['是', '否']  }  dialog.showMessageBox(options, function (index) {    event.sender.send('information-dialog-selection', index)  })})

保存对话框

支持: Win, macOS, Linux | 进程: Main

在本示例中, ipc 模块用于从渲染器进程发送一条消息, 指示主进程启动保存对话框. 它返回由用户选择的路径, 并可以将其路由回渲染器进程.

渲染器进程

const ipc = require('electron').ipcRendererconst saveBtn = document.getElementById('save-dialog')saveBtn.addEventListener('click', function (event) {  ipc.send('save-dialog')})ipc.on('saved-file', function (event, path) {  if (!path) path = '无路径'  document.getElementById('file-saved').innerHTML = `选择的路径: ${path}`})

主进程

const ipc = require('electron').ipcMainconst dialog = require('electron').dialogipc.on('save-dialog', function (event) {  const options = {    title: '保存图片',    filters: [      { name: 'Images', extensions: ['jpg', 'png', 'gif'] }    ]  }  dialog.showSaveDialog(options, function (filename) {    event.sender.send('saved-file', filename)  })})

如果这边文章对您有帮助, 感谢 下方点赞 或 Star 支持, 谢谢.

转载地址:http://beynx.baihongyu.com/

你可能感兴趣的文章
怎样学习一个新技术
查看>>
JAVA锁机制
查看>>
PostgreSQL 远程登录不需要密码
查看>>
远程共享工具USB Network Gate v8.0.1828发布,支持Windows Server 2016
查看>>
Linux文件删除原理及案例分析
查看>>
Java 集合使用parallelStream 和 stream的问题
查看>>
centos7下zabbix安装与部署
查看>>
【spring boot笔记】 springboot 使用第三方json解析
查看>>
ajax异步跨服上传图片
查看>>
js事件循环
查看>>
设计模式学习总结
查看>>
跨域获取cookie方法
查看>>
中文和拼音的转换
查看>>
安装gulp及相关插件
查看>>
linux centos 安装jdk1.7(tar.gz)
查看>>
大型企业网络系统集成的设计方案
查看>>
全局依赖的管理
查看>>
redis架构演变与redis-cluster群集读写方案
查看>>
E12-用户实际生产需求-查看用户上次更改密码时间
查看>>
阿里云专有网络VPC使用教
查看>>