在之前的文章我们介绍了一下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. 『图论』LCA 最近公共祖先

    概述篇 LCA (Least Common Ancestors) ,即最近公共祖先,是指这样的一个问题:在一棵有根树中,找出某两个节点 u 和 v 最近的公共祖先. LCA 可分为在线算法与离线算法 ...

  2. 【JMeter_19】JMeter逻辑控制器__简单控制器<Simple Controller>

    简单控制器<Simple Controller> 业务逻辑: 就像他的名字一样,简单,可以理解为一个文件夹,就是分组用的,没有其他特殊功能,但相比不添加简单控制器,区别在于简单控制器可以被 ...

  3. cb49a_c++_STL_算法_对所有元素排序_sort_stable_sort

    cb49a_c++_STL_算法_对所有元素排序_sort_stable_sort sort(b,e) sort(b,e,p) stable_sort(b,e) stable_sort(b,e,p) ...

  4. arduino连接1602LCD方法

    arduino连接1602LCD方法 参考代码:

  5. 重学 Java 设计模式：实战命令模式「模拟高档餐厅八大菜系，小二点单厨师烹饪场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 持之以恒的重要性 初学编程往往都很懵,几乎在学习的过程中会遇到 ...

  6. Perl入门 - Perl方法的使用

    1.定义一个方法 Perl使用sub定义方法. 语法: sub 方法名称{方法体} 2.调用一个方法 Perl直接使用方法名称调用方法. 调用方式有以下四种: 方法名称: &方法名称: 方法名 ...

  7. Hibenate面试

    5. 对比总结 返回值: get()返回的是查询出来的实体对象,而load()查询出来的是一个目标实体的代理对象. 查询时机: get()在调用的时候就立即发出SQL语句查询,而load()在访问非I ...

  8. MySql数据库GROUP BY使用过程中的那些坑

    MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...

  9. JDK8--04：内置接口

    在JDK8--3中已经说过,使用lambda方法需要新增函数式接口,为了使用方便,JDK8已经提供了许多内置接口,总的归纳来说,有四大函数式接口. /** * * java8 四大内置接口 * * 1 ...

  10. Spring WebFlux 01 (原理及使用场景)

    一.什么是 Spring WebFlux 好多人以为Spring WebFlux就是Spring MVC的升级版,其实不然,那到底什么是Spring WebFlux呢,首先就要搞清楚Spring We ...