electron-系统对话框

Electron 提供了一个对话框模块,可用于显示本地系统对话框,可用于打开和保存文件,已经消息的提供。

下面我们简单以实例的方式演习一下,表示创建一个应用,弹出一个文件打开的窗口,将文件的内容显示出来。

创建一个新的main.js文件,并敲入下面的代码。

``` Javascript
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文件

``` 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])

``` javascript
  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) 显示错误消息

```javascript
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)

赞 (0) 评论 分享 ()