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) {
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)
上面我们使用了前面提到的IPC模块,用于从界面发送一个openFile的命令,接收到之后我们显示一个文件打开的窗口,并且将文件的内容发送到前台的界面。
现在我们创建一个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>
上面的代码主要的功能是向main线程发送一个openFile请求,再通过fileData的事件向界面显示文件的内容。
最终我们的效果如下图所示
![屏幕截图 2017-08-12 17.04.52](http://7xrkms.com1.z0.glb.clouddn.com/屏幕截图 2017-08-12 17.04.52.png)
下面显示的是文件的内容
![屏幕截图 2017-08-12 17.06.49](http://7xrkms.com1.z0.glb.clouddn.com/屏幕截图 2017-08-12 17.06.49.png) 2017-08-12 17.06.49.png)
上面我们只提供了显示文件打开的示例,同样的electron还提供保存文件以及显示消息的窗口。
dialog.showOpenDialog([browserWindow, ]options[, callback])
dialog.showSaveDialog([browserWindow, ]options[, callback])
显示保存文件窗口
dialog.showMessageBox([browserWindow, ]options[, callback])
dialog.showMessageBox({type:'info',title:"显示消息",message:'消息',detail:'这是一个提示的消息片段'},function(message){
console.log(message);
})
![屏幕截图 2017-08-12 17.18.00](http://7xrkms.com1.z0.glb.clouddn.com/屏幕截图 2017-08-12 17.18.00.png)
dialog.showErrorBox(title, content) 显示错误消息
dialog.showErrorBox('显示提示消息',)
![屏幕截图 2017-08-12 17.14.28](http://7xrkms.com1.z0.glb.clouddn.com/屏幕截图 2017-08-12 17.14.28.png)
dialog.showCertificateTrustDialog([browserWindow, ]options, callback)