在之前的文章我们介绍了一下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. Asp.Net Core入门之自定义中间件

    什么是中间件? 这里引用官方解释: 中间件是用于组成应用程序管道来处理请求和响应的组件.管道内的每一个组件都可以选择是否将请求交给下一个组件.并在管道中调用下一个组件之前和之后执行某些操作.请求委托被 ...

  2. OO第二单元——兜兜转转之神秘电梯

    一.设计策略及程序结构分析 1.第一次作业 第一次作业是需要我们用多线程模拟一个实时电梯系统,功能比较简单正常,但要有捎带功能,我采用的调度策略便是指导书上提供的ALS调度策略,采用消费者-生产者模式 ...

  3. vulstack红队评估(五)

    一.环境搭建: ①根据作者公开的靶机信息整理 虚拟机密码: Win7: heart 123.com    #本地管理员用户 sun\Administrator dc123.com    #域管用户,改 ...

  4. 容器技术之Docker Machine

    前文我们聊了下docker容器的资源限制,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13138725.html:今天我们来聊一聊docker machine ...

  5. Kubernetes学习笔记（九）：StatefulSet--部署有状态的多副本应用

    StatefulSet如何提供稳定的网络标识和状态 ReplicaSet中的Pod都是无状态,可随意替代的.又因为ReplicaSet中的Pod是根据模板生成的多副本,无法对每个副本都指定单独的PVC ...

  6. junit基本介绍视频笔记1

    程序员每天工作的基本流程: 1.从svn检出代码: 2.运行单元测试,测试无误,进入下一步: 3.开始一天的代码编写工作: 4.代码提交到服务器之前进行单元测试: 5.单元测试通过提交到svn服务器. ...

  7. springboot_自动配置原理

    目录 1.1 @SpringBootApplication 2.1 @EnableAutoConfiguration 2.1.1 @AutoConfigurationPackage 2.1.2 @Im ...

  8. day01---学习Mysql高级性能优化1

    Mysql逻辑架构图

  9. Spark中自定义累加器

    通过继承AccumulatorV2可以实现自定义累加器. 官方案例可参考:http://spark.apache.org/docs/latest/rdd-programming-guide.html# ...

  10. Tensorflow与Keras自适应使用显存

    Tensorflow支持基于cuda内核与cudnn的GPU加速,Keras出现较晚,为Tensorflow的高层框架,由于Keras使用的方便性与很好的延展性,之后更是作为Tensorflow的官方 ...