Electron 教程：系统对话框
对于任何一款应用程序来说，用户友好是非常重要的特性。因此，不应使用alert()函数来创建对话框。Electron提供了一个很棒的界面来完成创建对话框的任务,让我们尝试使用它。
Electron提供了一个对话框模块，我们可以用它来显示本地系统对话框，用于打开和保存文件、信息提示等。
让我们直接编写一个例子，创建一个应用程序来显示简单的文本文件。
创建一个新的main.js文件，并在其中输入以下代码
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain} = require('electron')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
ipcMain.on('openFile', (event, path) => {
const {dialog} = require('electron')
const fs = require('fs')
dialog.showOpenDialog(function (fileNames) {
// fileNames is an array that contains all the selected
if(fileNames === undefined) {
console.log("No file selected");
} else {
readFile(fileNames[0]);
}
});
function readFile(filepath) {
fs.readFile(filepath, 'utf-8', (err, data) => {
if(err){
alert("An error ocurred reading the file :" + err.message)
return
}
// handle the file content
event.sender.send('fileData', data)
})
}
})
app.on('ready', createWindow)当我们的主进程从渲染器进程接收到“打开文件”消息时，就会弹出打开对话框。此消息会将文件内容重定向回渲染器进程。例子中，我们打印文件内容。
现在，用以下内容创建一个新的index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>File read using system dialogs</title>
</head>
<body>
<script type = "text/javascript">
const {ipcRenderer} = require('electron')
ipcRenderer.send('openFile', () => {
console.log("Event sent.");
})
ipcRenderer.on('fileData', (event, data) => {
document.write(data)
})
</script>
</body>
</html>现在，当我们运行应用程序时，都会弹出一个本地打开对话框，如下图所示:
一旦我们选择了一个文本文件，它的内容就会显示在应用程序窗口上
这只是Electron提供的四个对话框之一。但是它们都有相似的用法。一旦你学会了如何使用showOpenDialog，那么你就可以使用任何其他对话框。
具有相同功能的对话框有:
showSaveDialog([browserWindow, ]options[, callback]) showMessageDialog([browserWindow, ]options[, callback]) showErrorDialog(title, content)