Electron怎么自定义窗口桌面时钟

发布时间：2023-03-09 15:40:46 作者：iii
来源：亿速云阅读：119

Electron怎么自定义窗口桌面时钟

引言

在现代的桌面应用程序开发中，Electron 是一个非常流行的框架，它允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。Electron 的一个强大之处在于它提供了丰富的 API，使得开发者可以轻松地创建自定义窗口、系统托盘、菜单等。本文将详细介绍如何使用 Electron 创建一个自定义窗口的桌面时钟应用程序。

1. 环境准备

在开始之前，确保你已经安装了 Node.js 和 npm。如果还没有安装，可以从 Node.js 官网下载并安装。

接下来，创建一个新的项目目录并初始化一个新的 Node.js 项目：

mkdir electron-clock
cd electron-clock
npm init -y

然后，安装 Electron：

npm install electron --save-dev

2. 创建主进程

Electron 应用程序由主进程和渲染进程组成。主进程负责管理应用程序的生命周期、创建窗口等，而渲染进程则负责显示用户界面。

在项目根目录下创建一个 main.js 文件，作为主进程的入口文件：

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 200,
        frame: false, // 无边框窗口
        transparent: true, // 透明背景
        alwaysOnTop: true, // 窗口始终置顶
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    mainWindow.loadFile('index.html');

    // 打开开发者工具
    // mainWindow.webContents.openDevTools();

    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

在这个文件中，我们创建了一个无边框、透明背景的窗口，并且窗口始终置顶。窗口的大小设置为 400x200 像素。

3. 创建渲染进程

接下来，我们需要创建一个 index.html 文件，作为渲染进程的入口文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron Clock</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: transparent;
            font-family: Arial, sans-serif;
            color: white;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div id="clock">00:00:00</div>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
        }

        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>

在这个 HTML 文件中，我们创建了一个简单的时钟显示，使用 JavaScript 每秒更新一次时间。

4. 运行应用程序

现在，我们已经完成了主进程和渲染进程的代码。接下来，我们需要在 package.json 中添加一个启动脚本：

{
  "name": "electron-clock",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^23.0.0"
  }
}

然后，在终端中运行以下命令来启动应用程序：

npm start

你应该会看到一个无边框、透明背景的窗口，显示当前的时间，并且窗口始终置顶。

5. 添加系统托盘图标

为了让应用程序更加实用，我们可以添加一个系统托盘图标，允许用户通过托盘图标来控制应用程序。

首先，安装 electron-tray-window 包：

npm install electron-tray-window --save

然后，修改 main.js 文件，添加系统托盘图标：

const { app, BrowserWindow, Tray, Menu } = require('electron');
const path = require('path');

let mainWindow;
let tray;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 200,
        frame: false,
        transparent: true,
        alwaysOnTop: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    mainWindow.loadFile('index.html');

    // 打开开发者工具
    // mainWindow.webContents.openDevTools();

    mainWindow.on('closed', function () {
        mainWindow = null;
    });

    // 创建系统托盘图标
    tray = new Tray(path.join(__dirname, 'icon.png'));
    const contextMenu = Menu.buildFromTemplate([
        {
            label: '退出',
            click: function () {
                app.quit();
            },
        },
    ]);
    tray.setToolTip('Electron Clock');
    tray.setContextMenu(contextMenu);

    // 点击托盘图标时显示/隐藏窗口
    tray.on('click', () => {
        if (mainWindow.isVisible()) {
            mainWindow.hide();
        } else {
            mainWindow.show();
        }
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

在这个代码中，我们创建了一个系统托盘图标，并添加了一个上下文菜单，允许用户退出应用程序。点击托盘图标时，可以显示或隐藏窗口。

6. 打包应用程序

最后，我们可以使用 electron-packager 来打包应用程序，以便分发。

首先，安装 electron-packager：

npm install electron-packager --save-dev

然后，在 package.json 中添加一个打包脚本：

{
  "name": "electron-clock",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . --platform=win32 --arch=x64 --out=dist --overwrite"
  },
  "devDependencies": {
    "electron": "^23.0.0",
    "electron-packager": "^17.0.0"
  }
}

运行以下命令来打包应用程序：

npm run package

打包完成后，你可以在 dist 目录中找到打包好的应用程序。

结论

通过本文，我们学习了如何使用 Electron 创建一个自定义窗口的桌面时钟应用程序。我们创建了一个无边框、透明背景的窗口，并且窗口始终置顶。我们还添加了系统托盘图标，允许用户通过托盘图标来控制应用程序。最后，我们使用 electron-packager 打包了应用程序，以便分发。

Electron 提供了丰富的 API，使得开发者可以轻松地创建各种自定义的桌面应用程序。希望本文能够帮助你入门 Electron 开发，并激发你创建更多有趣的桌面应用程序。

Electron怎么自定义窗口桌面时钟

Electron怎么自定义窗口桌面时钟

引言

1. 环境准备

2. 创建主进程

3. 创建渲染进程

4. 运行应用程序

5. 添加系统托盘图标

6. 打包应用程序

结论

相关阅读