Electron快速入门（二）:在（一）的基础上修改两个文件完成自定义显示时间和天气的标题栏

news2024/11/25 2:57:34

修改主进程：main.js

// main.js

const { app, BrowserWindow } = require("electron");
const path = require("node:path");
const createWindow = () => {
  try {
    const mainWindow = new BrowserWindow({
      width: 1200,
      height: 870,
      alwaysOnTop: true,
      frame: false,
      icon: path.join(__dirname, "./img/icon.ico"),
      webPreferences: {
        preload: path.join(__dirname, "preload.js"),
       
      },
    });
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 打开开发工具
    mainWindow.webContents.openDevTools();
  } catch (e) {
    console.error("Failed to create window:", e);
  }
};

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 在 Windows 和 Linux 上，关闭所有窗口时应该退出应用
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

// 在 MacOS 上，应用没有结束，但所有窗口已关闭时，重新创建一个窗口
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

修改渲染进程：index.html

<!--index.html-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="width=device-width, initial-scale=1.0">
  <title>空空我啊</title>
  <!-- <link rel="stylesheet" href="./src/style.css"> -->
  <style>
    /* 格式化样式 */
    * {
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
      /* 防止用户选中文本 */
      user-select: none;
    }

    body {
      width: 100vw;
      height: 100vh;
      background: #2c3e50;
      /* 溢出隐藏 */
      overflow: hidden;
    }

    /* title-bar自定义标题栏  */
    .title-bar {
      width: 100vw;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff9c;
      -webkit-app-region: drag;

      .logo {
        img {
          width: 30px;
          height: 30px;
          margin: 6px 0 0px 5px;
          -webkit-app-region: no-drag;
          transition: transform 0.3s ease;

          &:hover {
            transform: scale(1.2);
          }
        }
      }

      .form-btn {
        -webkit-app-region: no-drag;
        /* 最小宽度 */
        min-width: 100px;

        /* 按钮样式 */
        button {
          cursor: pointer;
          font-size: 1.5rem;
          cursor: pointer;
          border: none;
          color: #ffffffb7;
          text-shadow: 1px 1px

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1849645.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！