Electron 提供了一个对话框模块,可用于显示本地系统对话框,可用于打开和保存文件,已经消息的提供。
下面我们简单以实例的方式演习一下,表示创建一个应用,弹出一个文件打开的窗口,将文件的内容显示出来。
创建一个新的main.js文件,并敲入下面的代码。
const {app, BrowserWindow} = require('electron')const url = require('url')const path = require('path')const {ipcMain} = require('electron')let winfunction 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文件
File read using system dialogs
上面的代码主要的功能是向main线程发送一个openFile请求,再通过fileData的事件向界面显示文件的内容。
最终我们的效果如下图所示
![屏幕截图 2017-08-12 17.04.52]( 2017-08-12 17.04.52.png)
下面显示的是文件的内容
![屏幕截图 2017-08-12 17.06.49]( 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]( 2017-08-12 17.18.00.png)
dialog.showErrorBox(title, content) 显示错误消息
dialog.showErrorBox('显示提示消息',)
![屏幕截图 2017-08-12 17.14.28]( 2017-08-12 17.14.28.png)
dialog.showCertificateTrustDialog([browserWindow, ]options, callback)