用Electron创建跨平台应用(第三弹)开启系统通知-阿里云开发者社区

开发者社区> 开发与运维> 正文

用Electron创建跨平台应用(第三弹)开启系统通知

简介: 对于QQ这类实时通讯软件, 设置系统通知是非常常见的功能, 对于办公用的电子邮件服务, 收到新邮件进行通知也是非常必要的 Electron适用于创建跨平台应用, 对于系统通知这类常见需求, 也提供了非常好用的api 用户收到系统通知后, 往往会通过...
  • 对于QQ这类实时通讯软件, 设置系统通知是非常常见的功能, 对于办公用的电子邮件服务, 收到新邮件进行通知也是非常必要的
  • Electron适用于创建跨平台应用, 对于系统通知这类常见需求, 也提供了非常好用的api
  • 用户收到系统通知后, 往往会通过点击系统通知, 打开与通知相对应的界面, 这个功能往往也是必须的

需求: 我们需要创建一个动漫更新的系统通知, 当用户点击系统的通知, 就会打开相应的界面播放动漫, 这是一个Electron功能演示的文章, 所以并不涉及如何通过网络监听各大平台的动漫更新情况(当然实现的思路也是有的, 用一个爬虫程序, 定时去爬各个平台的动漫的标题目录的变化, 如果有更新, 则通过回调函数, 发出系统通知)

效果展示

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Electron发送系统通知</title>
</head>
<body>
    <style>
        button {
            color: #ffffff;
            background-color: #44A1F8;
            font-size: 20px;
            outline: none;
        }

    </style>
    <button id="btn1">点击我,可以触发系统通知</button>
    <script>
        const path = require('path');
        const {shell} = require('electron')

        document.getElementById("btn1").onclick = function(){

            let option = {
                title: "你订阅的《海贼王》更新了",
                body: "《海贼王》已更新至第852集 激斗开幕 路飞VS卡塔库栗",
                icon: "../static/hhw.ico",
                href: 'https://www.iqiyi.com/v_19rqz6uit0.html'
            };

            // 创建通知并保存
            let hhwNotication = new window.Notification(option.title, option);

            // 当通知被点击时, 用默认浏览器打开链接
            hhwNotication.onclick= function(){
                shell.openExternal(option.href)
            }
        }


    </script>
</body>
</html>

系统通知的图标最好是ico格式图片, 但简书不支持上传ico格式的图片, 我们可以通过http://www.bitbug.net/ 制作, 简单快捷, 下面我在源码中使用的图片资源../static/hhw.ico, 感兴趣的可以用http://www.bitbug.net/ 自己制作成ico格式的图片(自己动手, 丰衣足食)

小结:

Electron对系统通知这种常见功能封装的很好, 善用系统通知功能, 能让我们的程序更好用

用Electron创建跨平台应用是一个连载, 如果阅读本篇有困难,可以补一下前两弹的内容
用Electron创建跨平台应用(第一弹)
用Electron创建跨平台应用(第二弹)开启多窗口

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章