Electron button - yaokun123/php-wiki GitHub Wiki

底部通知消息的制作

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");
⚠️ **GitHub.com Fallback** ⚠️