在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页，接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification。

在之前的文章中其实我们是说了一下对话框dialog的，就是在讲Menu菜单栏的时候，下面我们再来系统的看一下 dialog 的使用。

dialog 官方地址：https://www.electronjs.org/docs/api/dialog

现在我们要实现一个功能，就是点击一个按钮，然后弹出一个对话框，类似于删除操作的二次确认，点击对话框的确认按钮代表删除，点击取消按钮代表取消删除操作。这就用到了Electron为我们提供的dialog模块。

我们先来看一下我们的代码结构：

接下来我们在index.html 中实现我们的代码逻辑，如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello world</title>

 </head>

 <body>

 <div>

     <button id="btn">点我删除</button>

 </div>

 <script>

     const {dialog} = require('electron').remote;

     let btn = document.getElementById('btn');

     btn.onclick = function () {

         dialog.showMessageBox({

             // 对话框的类型

             type: 'warning',

             // 对话框的提示 title

             title: '温馨提示？',

             // 对话框的主题内容

             message: '确定要进行删除操作吗?',

             // 对话框的操作按钮

             buttons: ['确定', '取消']

         }).then(result => {

             // 点击操作按钮触发的事件

             console.log(result)

         })

     }

 </script>

 </body>

 </html>

在上面的代码中，我们定义了一个按钮来模拟删除的二次确认操作，然后我们还通过 console.log() 来输出我们的确定和取消按钮的点击日志，我们先点击一下确认按钮，再点击一下取消按钮，运行结果如下：

从结果上看符合我们的预期结果，从控制台的输出日志可以看出当我们点击确认时返回的结果中有个字段为 response:0，点击取消时字段为 response:1，根据这个字段我们就能进行接下来的操作了。

接下来我们再来看一个另一种通知形式 Notification

notification 官方地址：https://www.electronjs.org/docs/tutorial/notifications，

它会在电脑屏幕的侧边弹出来对我们进行提示。

接下来我们就根据 Notification 来做一个断网通知的案例，需要用到 Electron 为我们提供的 在线/离线 监听

在线/离线 官方地址 https://www.electronjs.org/docs/tutorial/online-offline-events

所有三个操作系统都提供了应用程序向用户发送通知的手段。 Electron允许开发者使用 HTML5 Notification API 发送通知，并使用当前运行的操作系统的本地通知 API 来显示它。

注意: 由于这是一个 HTML5 API，它只能在渲染器进程中使用。 如果你想在主进程中显示通知，请查看 Notification 模块.

index.html 代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello world</title>

</head>

<body>

<script>

    window.addEventListener('online', () => {

        let onlineNotification = new window.Notification('通知', {

            body: '网络重新连接了！'

        })

    });

    window.addEventListener('offline', () => {

        let offlineNotification = new window.Notification('通知', {

            body: '网络断开了！'

        })

    });

</script>

</body>

</html>

在上面的代码中，我们是在 index.html 渲染进程中进行的操作，所以使用的是 window.Notification。这时候我们就可以通过断开自己的网络来看一下运行结果了，我的运行结果如下：

从零开始学Electron笔记（六）的更多相关文章

  1. 从零开始学Electron笔记（四）

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  2. 从零开始学Electron笔记（一）

    前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...

  3. 从零开始学Electron笔记（二）

    在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...

  4. 从零开始学Electron笔记（三）

    在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https ...

  5. 从零开始学Electron笔记（五）

    在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打 ...

  6. 从零开始学Electron笔记（七）

    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...

  7. Mysql 5.5从零开始学阅读笔记

    第一章 1.什么是数据库? 数据库包含两层含义:保管数据的“仓库”,以及数据管理的方法和技术. 2.表 行被称为记录,列被称为字段 3.主键 primary key,用于唯一标识表中的每一条记录,主键 ...

  8. 《Python 3.5从零开始学》笔记-第8章 面向对象编程

    前几章包括开启python之旅.列表和元组.字符串.字典.条件和循环等语句.函数等基本操作.主要对后面几章比较深入的内容记录笔记. 第8章 面向对象编程 8.3深入类 #!/usr/local/bin ...

  9. 从零开始学Kotlin第六课

    Kotlin调用java代码: 1.如果是内部工程的类,直接调用,如果是外部的工程项目按照java的方式将jar包导入进来. 2.实例化java对象 我们之前学java的时候实例化对象是这个样子的. ...

随机推荐

  1. BUAA_OO_2020_Unit4_总结博客

    BUAA_OO_2020_Unit4_总结 2020年春季学期第十六周,OO第四单元即最终章落下帷幕,本单元是利用Java进行UML类图的解析,完成对类图.顺序图.状态图的内部查询操作与简单的规则判断 ...

  2. Oracle连接Db2

    因为有个业务场景需要访问客户DB2数据库的数据,我们使用的Oracle,百度一下是有方法的,本来以为很简单,没想到搞了一天,因为数据库版本都太老,使用的也少走了不少弯路,在此记录下来给需要的人借鉴. ...

  3. Linux MySQL集群搭建之主从复制

    前期准备 准备两台Linux,一主,一从,具体Linux安装MySQL操作步骤:点我直达 集群搭建 注意事项 一主可以多从 一从只能一主 关闭主从机器的防火墙策略 chkconfig iptables ...

  4. 宝塔面板成功部署Django项目流程

    宝塔面板部署Django项目完整流程 上线Django项目记录,超简单,避免无意义的踩坑! 第一步:安装python管理器 在宝塔在线面板安装“python项目管理器” 第二步:安装适配python版 ...

  5. NodeJs将异步方法改为同步以上传文件为例

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 下面这个例子既写 ...

  6. elasticsearchBouncing Results问题

    bouncing results问题,两个document排序,field值相同:不同的shard上,可能排序不同:每次请求轮询打到不同的replica shard上:每次页面上看到的搜索结果的排序都 ...

  7. 入门大数据---Hive常用DDL操作

    一.Database 1.1 查看数据列表 show databases; 1.2 使用数据库 USE database_name; 1.3 新建数据库 语法: CREATE (DATABASE|SC ...

  8. C# 接口（interface） 抽象类（abstract）

    类代码: interface Employee { void ShowEmp(); } abstract class EmployeeInPostion: Employee { public abst ...

  9. 吐血推荐，想进BAT必看

    不必太纠结于当下,也不必太忧虑未来,人生没有无用的经历,当你经历过一些事情后,眼前的风景已经和从前不一样了.--村上春树 一.包含如下内容 ActiveMQ消息中间件面试专题 BAT80道面试题 BA ...

  10. js进度条

    第一步//====================.wrap,.circle,.percent{                  position: absolute;                ...