Question

文档 https://electronjs.org/docs/api/dialog

dialog 属于主进程中的模块

dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框， alert 框， 所以 web 应用可以给用户带来跟系统应用相同的体验

1. 在 src/index.html 中引入

<button id="showError">showError</button><br />
<button id="showMsg">showMsg</button><br />
<button id="showOpenDialog">showOpenDialog</button><br />
<button id="saveDialog">saveDialog</button><br />

<script src="render/dialog.js"></script>

2. 新建 render/dialog.js

// render/dialog.js

let showError = document.querySelector('#showError');
let showMsg = document.querySelector('#showMsg');
let showOpenDialog = document.querySelector('#showOpenDialog');
let saveDialog = document.querySelector('#saveDialog');

var {remote} = require('electron')

showError.onclick = function () {
  remote.dialog.showErrorBox('警告', '操作有误')
}
showMsg.onclick = function () {
  remote.dialog.showMessageBox({
    type: 'info',
    title: '提示信息',
    message: '内容',
    buttons: ['确定', '取消']
  },function(index){
    console.log(index)
  })
}
showOpenDialog.onclick = function () {
  remote.dialog.showOpenDialog({
    // 打开文件夹
    properties: ['openDirectory', 'openFile']

    // 打开文件
    // properties: ['openFile']
  }, function (data) {
    console.log(data)
  })
}
saveDialog.onclick = function () {
  remote.dialog.showSaveDialog({
    title: 'Save File',
    defaultPath: '/Users/poetry/Downloads/',
    // filters 指定一个文件类型数组，用于规定用户可见或可选的特定类型范围
    filters: [
      { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
      { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
      { name: 'Custom File Type', extensions: ['as'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  }, function (path) {
    // 不是真的保存 ，具体还需 nodejs 处理
    console.log(path)
  })
}

showError

remote.dialog.showErrorBox('警告', '操作有误')

showMessageBox

remote.dialog.showMessageBox({
  type: 'info',
  title: '提示信息',
  message: '内容',
  buttons: ['确定', '取消']
},function(index){
  console.log(index)
})

showOpenDialog

remote.dialog.showOpenDialog({
  // 打开文件夹
  properties: ['openDirectory', 'openFile']

  // 打开文件
  // properties: ['openFile']
}, function (data) {
  console.log(data)
})

showSaveDialog

remote.dialog.showSaveDialog({
  title: 'Save File',
  defaultPath: '/Users/poetry/Downloads/',
  // filters 指定一个文件类型数组，用于规定用户可见或可选的特定类型范围
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}, function (path) {
  // 不是真的保存 ，具体还需 nodejs 处理
  console.log(path)
})