运用 Electron 挪用体系对话框

此系列文章的运用示例已宣布于 GitHub: electron-api-demos-Zh_CN. 能够 Clone 或下载后运转检察. 迎接 Star .

Electron 中的 dialog 模块许可您运用当地体系对话框翻开文件或目次, 保留文件或显现信息性音讯.

这是一个主历程模块, 由于这个历程关于当地实用程序更有效, 它许可挪用的同时而不会中缀页面渲染器历程中的可见元素.

在浏览器中检察 完全 API 文档 .

翻开文件或目次

支撑: Win, macOS, Linux | 历程: Main

在本示例中, ipc 模块用于从渲染器历程发送一条音讯, 指导主历程启动翻开的文件（或目次）对话框. 假如挑选了文件, 主历程能够将该信息发送回渲染器历程.

渲染器历程

const ipc = require('electron').ipcRenderer

const 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').ipcMain
const dialog = require('electron').dialog

ipc.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').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow


ipc.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').ipcRenderer

const errorBtn = document.getElementById('error-dialog')

errorBtn.addEventListener('click', function (event) {
  ipc.send('open-error-dialog')
})

主历程

const ipc = require('electron').ipcMain
const dialog = require('electron').dialog

ipc.on('open-error-dialog', function (event) {
  dialog.showErrorBox('一条毛病信息', '毛病音讯演示.')
})

信息对话框

支撑: Win, macOS, Linux | 历程: Main

在本示例中, ipc 模块用于从渲染器历程发送一条音讯, 指导主历程启动信息对话框. 能够供应用于相应的选项, 相应会被返回到渲染器历程中.

注重：title 属性不会显现在 macOS 中.

一个信息对话框能够包括图标, 挑选的按钮, 题目和音讯.

渲染器历程

const ipc = require('electron').ipcRenderer

const 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').ipcMain
const dialog = require('electron').dialog

ipc.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').ipcRenderer

const 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').ipcMain
const dialog = require('electron').dialog

ipc.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 GitHub: electron-api-demos-Zh_CN 支撑, 感谢.