Electron -系统对话框
对于任何应用程序来说，user-friendly都是非常重要的。因此，您不应该使用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 =newBrowserWindow({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 containsall 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)当主进程从呈现程序进程接收到“openFile”消息时，该代码将弹出打开对话框。此消息将把文件内容重定向回呈现程序进程。现在，我们必须打印内容。
现在我们用以下代码创建一个新的index.html文件
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>File read using system dialogs</title>
</head>
<body>
<scripttype="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)
本文翻译转载自www.tutorialspoint.com