在之前的文章我们介绍了一下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. 如何用Python从海量文本抽取主题？

    摘自https://www.jianshu.com/p/fdde9fc03f94 你在工作.学习中是否曾因信息过载叫苦不迭?有一种方法能够替你读海量文章,并将不同的主题和对应的关键词抽取出来,让你谈笑 ...

  2. Spring AOP学习笔记04：AOP核心实现之创建代理

    上文中,我们分析了对所有增强器的获取以及获取匹配的增强器,在本文中我们就来分析一下Spring AOP中另一部分核心逻辑--代理的创建.这部分逻辑的入口是在wrapIfNecessary()方法中紧接 ...

  3. appium安装的permission deny处理方法-20200204

    npm -v 报错:Error: EPERM: operation not permitted, mkdir 'C:\soft\nodejs' 起因:原本安装node在C盘soft文件夹下,按node ...

  4. 计算机网络之DDOS

    1.什么是DDOS DDOS(Distributed Denial of Service),中文意思为“分布式拒绝服务”,就是利用大量合法的分布式服务器对目标发送请求,从而导致正常合法用户无法获得服务 ...

  5. Android Studio 插件 ADBWifi 无线调试真机

    长话短说,步骤如下 Android Studio 安装插件 ADB Wifi.这一步可以选择AS->Settings->Plugins->Market搜索:或者可以选择去插件官网下载 ...

  6. Illegal reflective access by org.apache.hadoop.security.authentication.util.KerberosUtil

    在使用Java API操作HBase时抛出如下异常: Illegal reflective access by org.apache.hadoop.security.authentication.ut ...

  7. JDK8 日期格式化

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  8. Tomcat的启停脚本源码解析

    Tomcat是一款我们平时开发过程中最常用到的Servlet容器.本系列博客会记录Tomcat的整体架构.主要组件.IO线程模型.请求在Tomcat内部的流转过程以及一些Tomcat调优的相关知识. ...

  9. 猿灯塔：Java程序员月薪三万，需要技术达到什么水平？

    最近跟朋友在一起聚会的时候,提了一个问题,说Java程序员如何能月薪达到二万,技术水平需要达到什么程度?人回答说这只能是大企业或者互联网企业工程师才能拿到.也许是的,小公司或者非互联网企业拿二万的不太 ...

  10. Spring Boot中的事务是如何实现的

    本文首发于微信公众号[猿灯塔],转载引用请说明出处 今天呢!灯塔君跟大家讲: Spring Boot中的事务是如何实现的 1. 概述 一直在用SpringBoot中的@Transactional来做事 ...