從零開始學Electron筆記（六）

豐寸發表於2020-07-16
筆記

在之前的文章我們介紹了一下Electron如何通過連結開啟瀏覽器和嵌入網頁，接下來我們繼續說一下Electron中的對話方塊 Dialog和訊息通知 Notification。

在之前的文章中其實我們是說了一下對話方塊dialog的，就是在講Menu選單欄的時候，下面我們再來系統的看一下 dialog 的使用。

dialog 官方地址：https://www.electronjs.org/docs/api/dialog

現在我們要實現一個功能，就是點選一個按鈕，然後彈出一個對話方塊，類似於刪除操作的二次確認，點選對話方塊的確認按鈕代表刪除，點選取消按鈕代表取消刪除操作。這就用到了Electron為我們提供的dialog模組。

我們先來看一下我們的程式碼結構：

 

 接下來我們在index.html 中實現我們的程式碼邏輯，如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hello world</title>
 6 </head>
 7 <body>
 8 <div>
 9     <button id="btn">點我刪除</button>
10 </div>
11 <script>
12     const {dialog} = require('electron').remote;
13     let btn = document.getElementById('btn');
14     btn.onclick = function () {
15         dialog.showMessageBox({
16             // 對話方塊的型別
17             type: 'warning',
18             // 對話方塊的提示 title
19             title: '溫馨提示？',
20             // 對話方塊的主題內容
21             message: '確定要進行刪除操作嗎?',
22             // 對話方塊的操作按鈕
23             buttons: ['確定', '取消']
24         }).then(result => {
25             // 點選操作按鈕觸發的事件
26             console.log(result)
27         })
28     }
29 </script>
30 </body>
31 </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。這時候我們就可以通過斷開自己的網路來看一下執行結果了，我的執行結果如下：

 

相關文章