electron实现简单应用番茄钟

最新推荐文章于 2024-04-15 15:54:51 发布

whuhewei

最新推荐文章于 2024-04-15 15:54:51 发布

阅读量332

点赞数

分类专栏：前端文章标签： electron

本文链接：https://blog.csdn.net/whuhewei/article/details/120920725

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

package.json

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^15.3.0"
  },
  "dependencies": {
    "timer.js": "^1.0.4"
  }
}

index.js

const { app, BrowserWindow, Notification, ipcMain } = require('electron');

let win;
app.on('ready', () => {
    win = new BrowserWindow({
        width: 300,
        height: 300,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false, // electron12之后需要设置contextIsolation: false才能在渲染进程中使用require
        }
    })
    win.loadFile('./index.html');
    handleIPC();
})

function handleIPC() {
    ipcMain.handle('work-notification', async function () {
        let res = await new Promise((resolve, reject) => {
            let notification = new Notification({
                title: '任务结束',
                body: '是否开始休息',
                actions: [{text: '开始休息', type: 'button'}],
                closeButtonText: '继续工作'
            })
            notification.show();
            notification.on('action', () => {
                resolve('rest');
            })
            notification.on('close', () => {
                resolve('work');
            })
        })
        return res;
    })
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="timer-container"></div>
<script src="./renderer.js"></script>
</body>
</html>

renderer.js

const {ipcRenderer} = require('electron');
const Timer = window.require('timer.js');

function startWork() {
    let workTimer = new Timer({
        ontick: (ms) => {
            updateTime(ms);
        },
        onend: () => {
            notification();
        }
    })
    console.log(workTimer);
    workTimer.start(10);
}

function updateTime(ms) {
    let timeContainer = document.getElementById('timer-container');
    let s = (ms / 1000).toFixed(0);
    let ss = s % 60;
    let mm = (s / 60).toFixed(0);
    timeContainer.innerText = `${mm.toString().padStart(2, 0)}: ${ss.toString().padStart(2, 0)}`;
}

async function notification() {
    let res = await ipcRenderer.invoke('work-notification');
    if(res === 'rest') {
        setTimeout(() => {
            alert('休息');
        }, 5 * 1000)
    }
    else if(res === 'work') {
        startWork();
    }
}

startWork();

重点关注webPreferences中的配置项
在系统设置中允许electron发送通知

Default Changed: contextIsolation defaults to true
In Electron 12, contextIsolation will be enabled by default. To restore the previous behavior, contextIsolation: false must be specified in WebPreferences.

We recommend having contextIsolation enabled for the security of your application.

Another implication is that require() cannot be used in the renderer process unless nodeIntegration is true and contextIsolation is false.

whuhewei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron实现简单应用番茄钟

package.json{ "name": "electron-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "keywords": [], "author": "",
复制链接

扫一扫