文档章节

electron-系统对话框

罗布V
 罗布V
发布于 2017/08/12 17:21
字数 594
阅读 197
收藏 1

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)

© 著作权归作者所有

罗布V
粉丝 13
博文 60
码字总数 47114
作品 0
温州
程序员
私信 提问
GitHub 发布 Electron 1.0,可用于构建跨平台软件

GitHub近日发布了Electron版本1.0,这种应用程序框架可用于构建跨平台软件。Electron使用CSS、HTML和JavaScript,可以构建面向Linux、OS X和Windows的原生应用程序。 Electron之前名为Atom ...

oschina
2016/05/12
5.9K
22
如何利用 Electron 开发一个桌面 APP

摘要:你是否曾经想过可以用 HTML、CSS 和 JavaScript 这些前端技术来构建跨平台的桌面应用?使用 Electron 就能做到。本文带着你深入 Electron 的核心概念。阅读本文后,你会知道如何使用 ...

开源中国
2018/01/08
0
0
Electron构建跨平台应用Mac/Windows/Linux

入门基础笔记,这里记录一下 一、前言 和 都可以用前端的知识来开发桌面应用。 和 起初是同一 个作者开发。后来种种原因分为两个产品。一个命名为 (英特尔公司提供技术支持)、 另一命名为 (G...

Poetries
01/22
0
0
如何利用 Electron 开发一个桌面 APP

你可曾想过可以利用 HTML, CSS, and JavaScript 来编写一个跨平台的桌面应用。 Electron 将一切变为了可能。 这篇文章将会教会你一些 Electron 的核心概念。 通过本文,你将会了解到使用 El...

oschina
2018/01/03
9.3K
19
开发一个React + Electron应用

最近用React + Electron开发了一个RSS阅读器,开源在:github.com/breeze2/bre…,这里记录一下大致的开发过程。 初始化 创建项目 以普通的React应用做基础,一步步初始化项目。预先安装yar...

breeze
03/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部