Electron 底部通知消息的制作

发布于 2021-06-18 12:54:07 字数 1012 浏览 1963 评论 0

Electron 的消息通知是通过 H5 的 window.Notification 来实现的。

window.Notification 的属性参数

  • title: 通知的标题,可以显示在通知栏上
  • option: 消息通知的各种属性配置,以对象的形式进行配置。

点击按钮提示消息

那直接来作一个实例,当我们点击一个按钮时,会自动给我 i 们弹出提示消息,告诉我们有新的订单。 新建一个 demo5.html,然后编写如下代码。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="notifyBtn">通知消息</button>
</body>
<script>

    var notifyBtn = document.getElementById('notifyBtn');

    var option = {
        title:'小二,来订单了,出来接客了!',
        body:'有大官人刚翻了你的牌子',

    }
    notifyBtn.onclick = function(){
      new  window.Notification(option.title,option)
    }
</script>
</html>

然后改变一下 main.js 中的代码,让他渲染 demo5.html。

mainWindow.loadFile("demo5.html");

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

书间行客

文章 0 评论 0

神妖

文章 0 评论 0

undefined

文章 0 评论 0

38169838

文章 0 评论 0

彡翼

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文