1-electron初识npm init -y pnpm i electron -D 安装nodemon pnpm in

npm init -y
pnpm i electron -D

安装nodemon

pnpm install -g nodemon
配置命令

"scripts": {
  "dev": "nodemon --exec electron ."
},

配置 nodemon监听文件

nodemon.json

{
  "ignore": ["node_modules", "dist"],
  "colours": true, // 控制台输出颜色
  "verbose": true, // 控制台输出详细信息
  "restartable": "rs", // 重启命令
  "watch": ["*.*"], // 监听所有文件
  "ext": "html,js" // 监听文件类型
}

不同操作系统的处理方式

// main.js
// 主入口- 主进程是nodejs环境(是没有dom的)，渲染进程是浏览器环境
const { BrowserWindow, app } = require("electron");
const path = require("path");

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    alwaysOnTop: true, // 窗口置顶
    x: 150, // 窗口位置
    y: 100, // 窗口位置
  });
  return mainWindow;
};

// 1. 创建窗口
app.whenReady().then(() => {
  const mainWindow = createWindow();
  // 2. 加载网页
  //   mainWindow.loadURL("https://www.baidu.com");

  // 3. 加载本地html
  mainWindow.loadFile(path.resolve(process.cwd(), "index.html"));

  // 4. **监听窗口关闭事件**
  app.on("window-all-closed", function () {
    // macOS用户点击关闭按钮时，不会关闭应用，而是隐藏应用到任务栏
    if (process.platform != "darwin") app.quit();
  });

  // 5. 监听窗口激活事件
  app.on("activate", function () {
    console.log("窗口激活");
  });
});

frame: false ->去掉默认的菜单栏
- 这个时候是没法拖动窗口的
- css控制

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 300,
    height: 300,
    alwaysOnTop: true, // 窗口置顶
    x: 150, // 窗口位置
    y: 100, // 窗口位置
    frame: false, // 去掉默认的菜单栏
    transparent: true, // 窗口透明
  });
  // 2. 加载网页
  //   mainWindow.loadURL("https://www.baidu.com");

  mainWindow.setAspectRatio(1); // 设置窗口比例 避免拖拽变形
  // 3. 加载本地html
  mainWindow.loadFile(path.resolve(process.cwd(), "index.html"));
};

<!-- index.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>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>hello12</h1>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}
body {
  /* 设置透明时候body不能设置颜色 */
  width: 100vw;
  height: 100vh;
}

html {
  -webkit-app-region: drag;
}

textarea {
  -webkit-app-region: no-drag;
}

h1 {
  background-color: brown;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

完整的main.js

// 主入口- 主进程是nodejs环境(是没有dom的)，渲染进程是浏览器环境
const { BrowserWindow, app } = require("electron");
const path = require("path");

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 300,
    height: 300,
    alwaysOnTop: true, // 窗口置顶
    x: 150, // 窗口位置
    y: 100, // 窗口位置
    frame: false, // 去掉默认的菜单栏
    transparent: true, // 窗口透明
  });
  // 2. 加载网页
  //   mainWindow.loadURL("https://www.baidu.com");

  mainWindow.setAspectRatio(1); // 设置窗口比例
  // 3. 加载本地html
  mainWindow.loadFile(path.resolve(process.cwd(), "index.html"));
};

// 1. 创建窗口
app.whenReady().then(() => {
  createWindow();

  // 4. 监听窗口关闭事件
  app.on("window-all-closed", function () {
    if (process.platform != "darwin") app.quit(); // macOS用户点击关闭按钮时，不会关闭应用，而是隐藏应用
  });

  // 5. 监听窗口激活事件
  app.on("activate", function () {
    console.log("窗口激活");
  });
});

css 拖动使用上面的东西

这个就是一个可以脱宅的透明底子圆球