Electron窗口及对话框

窗口

BrowserWindow

主进程模块BrowserWindow用于创建和控制浏览器窗口。

  mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    // ...
  });
  mainWindow.loadURL('http://www.conardli.top/');

无框窗口

无框窗口是没有镶边的窗口，窗口的部分（如工具栏）不属于网页的一部分。

在BrowserWindow的构造参数中，将frame设置为false可以指定窗口为无边框窗口，将工具栏隐藏后，就会产生两个问题：

1.窗口控制按钮（最小化、全屏、关闭按钮）会被隐藏
2.无法拖拽移动窗口

可以通过指定titleBarStyle选项来再将工具栏按钮显示出来，将其设置为hidden表示返回一个隐藏标题栏的全尺寸内容窗口，在左上角仍然有标准的窗口控制按钮。

new BrowserWindow({
    width: 200,
    height: 200,
    titleBarStyle: 'hidden',
    frame: false
  });

窗口拖拽

默认情况下, 无边框窗口是不可拖拽的。我们可以在界面中通过CSS属性-webkit-app-region: drag手动制定拖拽区域。

在无框窗口中, 拖动行为可能与选择文本冲突，可以通过设定-webkit-user-select: none;禁用文本选择：

.header {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

相反的，在可拖拽区域内部设置 -webkit-app-region: no-drag则可以指定特定不可拖拽区域。

透明窗口

通过将transparent选项设置为true, 还可以使无框窗口透明:

new BrowserWindow({
    transparent: true,
    frame: false
  });

Webview

使用 webview 标签在Electron 应用中嵌入 “外来” 内容。外来内容包含在 webview 容器中。 应用中的嵌入页面可以控制外来内容的布局和重绘。

与 iframe 不同, webview 在与应用程序不同的进程中运行。它与您的网页没有相同的权限, 应用程序和嵌入内容之间的所有交互都将是异步的。

对话框

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

注意：dialog是主进程模块，想要在渲染进程调用可以使用remote

错误提示

dialog.showErrorBox用于显示一个显示错误消息的模态对话框。

 remote.dialog.showErrorBox('错误', '这是一个错误弹框！')

对话框

dialog.showErrorBox用于调用系统对话框，可以为指定几种不同的类型： “none”, “info”, “error”, “question” 或者 “warning”。

在 Windows 上, “question” 与"info"显示相同的图标, 除非你使用了 “icon” 选项设置图标。 在 macOS 上, “warning” 和 “error” 显示相同的警告图标

remote.dialog.showMessageBox({
  type: 'info',
  title: '提示信息',
  message: '这是一个对话弹框！',
  buttons: ['确定', '取消']
}, (index) => {
  this.setState({ dialogMessage: `【你点击了${index ? '取消' : '确定'}！！】` })
})

文件框

dialog.showOpenDialog用于打开或选择系统目录。

remote.dialog.showOpenDialog({
  properties: ['openDirectory', 'openFile']
}, (data) => {
  this.setState({ filePath: `【选择路径：${data[0]}】 ` })
})

信息框

这里推荐直接使用HTML5 API，它只能在渲染器进程中使用。

let options = {
  title: '信息框标题',
  body: '我是一条信息～～～',
}
let myNotification = new window.Notification(options.title, options)
myNotification.onclick = () => {
  this.setState({ message: '【你点击了信息框！！】' })
}