Electron 从入门到实践02

使用Electron API 打开原生对话框

1、打开对话框

在原来的项目目录基础上，创建一个event.js文件

// 引入对话框
const remote = require('electron').remote;
const dialog = remote.dialog;

// 打开简单对话框
function onClick_OpenFile() {
  const label = document.getElementById('label');
  //  显示打开文件对话框，并将选择的文件显示在页面上
  label.innerText= dialog.showOpenDialog({properties: ['openFile']})
}

// 定制打开对话框
/* 
openFile - 允许选择文件
openDirectory - 允许选择文件夹
multiSelections-允许多选。
showHiddenFiles-显示对话框中的隐藏文件。
createDirectory macOS -允许你通过对话框的形式创建新的目录。
promptToCreate Windows-如果输入的文件路径在对话框中不存在, 则提示创建。 这并不是真的在路径上创建一个文件，而是允许返回一些不存在的地址交由应用程序去创建。
noResolveAliases macOS -禁用自动别名 (symlink) 路径解析。 选定的别名现在将返回别名路径而不是其目标路径。
treatPackageAsDirectory macOS -将包 (如 .app 文件夹) 视为目录而不是文件。
 */
function onClick_CustomOpenFile() {
  const label = document.getElementById('label');
  var options = {};
  //  设置 Windows 版打开对话框的标题
  options.title = 'windows打开文件';
  //  设置 Mac OS X 版本打开对话框的标题
  options.message = 'mac打开文件';
  //  设置按钮的文本
  options.buttonLabel = '确认';
  // 设置打开文件对话框的默认路径（当前目录）
  options.defaultPath = '.';
  options.properties = ['openFile'];
  label.innerText= dialog.showOpenDialog(options)
}

// 打开有筛选的对话框
function onClick_FileType(){
  const label = document.getElementById('label');
  var options = {};
  options.title = '打开文件';
  options.buttonLabel = '选择';
  //  Mac OSX 默认目录是桌面
  options.defaultPath = '.';
  options.properties = ['openFile'];
  options.filters = [
      {name: '图像文件', extensions: ['jpg', 'png', 'gif']},
      {name: '视频文件', extensions: ['mkv', 'avi', 'mp4']},
      {name: '音频文件', extensions: ['mp3','wav']},
      {name: '所有文件', extensions: ['*']}
  ]
  label.innerText= dialog.showOpenDialog(options)
}

// 打开和创建目录的对话框
function onClick_OpenAndCreateDirectory() {
  const label = document.getElementById('label');
  var options = {};
  options.title = '打开目录';
  //  createDirectory仅用于Mac OS 系统
  options.properties = ['openDirectory','createDirectory'];
  label.innerText= dialog.showOpenDialog(options)
}

// 选择多个文件和目录
function onClick_MultiSelection() {
  const label = document.getElementById('label');
  var options = {};
  options.title = '选择多个文件和目录';
  options.message = '选择多个文件和目录';

  options.properties = ['openFile','multiSelections'];
  if (process.platform === 'darwin') {
      options.properties.push('openDirectory');
  }
  label.innerText= dialog.showOpenDialog(options)
}

// 通过回调函数返回选择的文件和目录的对话框
function onClick_Callback() {
  const label = document.getElementById('label');
  var options = {};
  options.title = '选择多个文件和目录';
  options.message = '选择多个文件和目录';

  options.properties = ['openFile','multiSelections'];
  if (process.platform === 'darwin') {
      options.properties.push('openDirectory');
  }
  dialog.showOpenDialog(options,(filePaths) =>{
      for(var i = 0; i < filePaths.length;i++) {
          label.innerText += filePaths[i] + '\r\n';
      }

  });
}

在index.html增加以下内容

<!-- 打开对话框 -->
<button onclick="onClick_OpenFile()">打开文件对话框</button>
<br>
<button onclick="onClick_CustomOpenFile()">定制打开对话框</button>
<br>
<button onclick="onClick_FileType()">指定文件类型</button>
<br>
<button onclick="onClick_OpenAndCreateDirectory()">打开和创建目录</button>
<br>
<button onclick="onClick_MultiSelection()">选择多个文件或目录</button>
<br>
<button onclick="onClick_Callback()">通过回调函数返回选择的文件和目录</button>
<br>
<label id="label" style="font-size: large"></label>

终端中运行测试：

electron .

2、保存对话框

在event.js中增加以下代码

// 保存对话框
function onClick_Save() {
  const label = document.getElementById('label01');
  var options = {};
  options.title = '保存文件';
  options.buttonLabel = '保存';
  options.defaultPath = '.';
  //Only Mac OS X，输入文件名文本框左侧的标签文本
  options.nameFieldLabel = '请输入要保存的文件名';
  //是否显示标记文本框，默认值为True
  //options.showsTagField = false;
  //设置要过滤的图像类型  
  options.filters = [
      {name: '图像文件', extensions: ['jpg', 'png', 'gif']},
      {name: '视频文件', extensions: ['mkv', 'avi', 'mp4']},
      {name: '音频文件', extensions: ['mp3','wav']},
      {name: '所有文件', extensions: ['*']}
  ]
  //显示保存文件对话框，并将返回的文件名显示页面上
  label.innerText= dialog.showSaveDialog(options)
}

// 带回调的保存对话框
function onClick_SaveCallback() {
  const label = document.getElementById('label01');
  var options = {};
  options.title = '保存文件';
  options.buttonLabel = '保存';
  options.defaultPath = '.';
  //  Only Mac OS X
  options.nameFieldLabel = '请输入要保存的文件名';
  // 
  options.showsTagField = false;
  options.filters = [
      {name: '图像文件', extensions: ['jpg', 'png', 'gif']},
      {name: '视频文件', extensions: ['mkv', 'avi', 'mp4']},
      {name: '音频文件', extensions: ['mp3','wav']},
      {name: '所有文件', extensions: ['*']}
  ]
  dialog.showSaveDialog(options,(filename) => {
      console.log('查看打印：',filename)
      label.innerText = filename;
  })
}

在index.html中增加以下代码

<!-- 保存对话框 -->
<button onclick="onClick_Save()">保存文件对话框</button>
<br>
<br>
<button onclick="onClick_SaveCallback()">保存文件对话框（回调函数）</button>
<br>

3、消息对话框

在event.js中增加以下代码

// 消息提示对话框
function onClick_MessageBox() {
  var options = {};
  options.title = '信息对话框';
  options.message = '这是一个信息提示框';
  // options.icon = '../../../images//note.png';  可以指定显示的icon
  options.type = 'none'; // 指定消息类型
  /* type String (可选) - 可以为 "none", "info", "error", "question" 或者 "warning"
  在 Windows 上, "question" 与"info"显示相同的图标, 除非你使用了 "icon" 选项设置图标。 
  在 macOS 上, "warning" 和 "error" 显示相同的警告图标 */
  options.buttons = ['按钮1','按钮2']  // 在弹出框里面加按钮，注意使用这种按钮时会出现图1的结果
  // options.buttons = ['Yes','No']      // 使用这种按钮时会出现图2的结果
  dialog.showMessageBox(options,(response) => {
    console.log('当前被单击的按钮索引是' + response);
  })
}

在index.html中增加以下代码

<!-- 消息弹框 -->
<label id="label01" style="font-size: large"></label>
<button onclick="onClick_MessageBox()">打开消息弹框</button>
<br>

图1

图2

4、错误对话框

在event.js中增加以下代码

// 错误消息对话框
function onClick_ErrorBox() {
  // showErrorBox(title, content)
  dialog.showErrorBox('错误对话框', '发生了一个错误');
}

在index.html中增加以下代码

<!-- 错误弹框 -->
<button onclick="onClick_ErrorBox()">发生错误弹框</button>
<br>